当ブログがisland teaのHPで掲載中

【PageSpeed Insightsで改善!】留学ブログが伸びない原因は画像?

留学ブログを始めてみたけど、全然閲覧数が伸びない。自分には才能が無いのかな。

社会人

なやたね

ブログに写真は多過ぎないですか?

 

ブログをやっていると必ず閲覧数が伸びない問題に直面します。

 

僕もブログの閲覧数が伸びなくて悩んだ時期がありました。

 

今でも大して伸びてませんが・・・特に伸びてなかった時期が有りまして、そんな時に僕が思っていたブログが伸びない理由はこんな感じです。

 

  • ブログはすぐには結果が出ないから、今は我慢の時期
  • SEOの知識が無いから対策が足りてない
  • 良い記事は書けていると思うからこのまま記事を書き続ければ結果が出るはず

 

ブログを始めて100記事を超えてもなんら変わらない状況が待っていました。

 

もちろん適当に記事を書いていた訳では無いし、素人なりにSEO対策をやっていてこの結果です。

 

なやたね

閲覧数が増える兆しすらありませんでした。

 

この状況を打破した理由の1つに「写真容量を軽くてモバイル表示速度を格段に改善」したことが挙げられます。

 

当時の僕のモバイル表示速度はPageSpeed Insightsの結果で29、そこから74まで回復させました。

 

なやたね

ここまで低評価からスタートしている人って中々いないんじゃ無いかなと思います。

 

そんな僕、なやたね(@nayatane_cebu)がモバイル表示速度の改善と画像容量の重要性について、留学ブロガーの視点で解説して行きます。

PageSpeed Insightsでモバイル表示速度を確認して絶望

PageSpeed Insightsで自分のブログのPC表示速度と、モバイル表示速度が確認できるのですが、PCの方はそこまで悪い評価が付いていなかったのに、モバイル表示スピードが終わってました。

 

僕は留学ブロガーなので、スマホで撮った写真を無加工でブログにバンバン貼り付けていたのですが、よくよく考えればこんなやり方で画像を多用する留学ブログをやっていたら、悪い結果になって当然と言えます。

 

なやたね

「SEO対策をしてブログをプラスにする!」という以前の問題で、そもそもマイナスだったという・・・。

 

しかし怖いのが、こんな29点赤点の僕でもPageSpeed Insightsをやるまで、画像容量についてそこまで深刻な問題だと思ってなかったんですよ!

 

その理由は、WiFi環境のスマホや、パソコンで自分ブログにアクセスしていたことや、パソコンやスマホにキャッシュが残っていたので「自分のブログが遅い」っていう自覚症状が一切無かったということ。

 

なやたね

なので「自分は大丈夫!」と思っている人もPageSpeed Insightsを自分のブログでやってみてくださいね。

 

PageSpeed InsightsはGoogleが提供しているサイトの表示速度を計測するツールなので、ここで低評価を受けること=Googleからのモバイル表示速度について評価がされていないということが言えます。

 

低評価だった僕は、天下のGoogle様の言うことであればやるしか無いということで、モバイル表示速度改善を始めることになりました。

 

PageSpeed Insightsは表示速度を遅らせている原因や、改善策も提示してくれます。

 

モバイル表示速度の遅延を妨げている理由の大半が画像関連だったので、過去の画像から今後のルーティーンまで含めて努力していく決意を固めました。

 

留学ブロガーの場合は、現地に留学している留学生がスマホからブログに来てくれることもあるので、結構重要な問題です!

 

なやたね

ブログ始めた当初は「なんでフィリピンからのアクセスがこんなに多いんだ?」と思ってましたが、そういうことみたいです。

 

その後2日間本気で頑張ってみた結果、モバイルの表示速度が74まで回復!

画像容量を意識する重要性

最近ではスマホは持ってるけど、パソコンは持っていないという人も増えているので、スマホユーザーがストレス無く、読めるブログ作りが評価されるようになってきています。

 

よくブロガー界隈で言われているGoogleの検索の順位で、スマホ版とPC版の検索順位が違うという問題もモバイル表示速度が絡んでいるとか絡んでいないとか。

 

Googleはフワッとしてるから、どこまで関わりがあるかは不明ですが、モバイルの表示スピードが遅いとこのようなデメリットが考えられます。

 

  • 画像容量が多いページ=読み込みに時間が掛かりユーザーをイラつかせる
  • ユーザーがイラつく=離脱するので滞在時間が減ることになる
  • 滞在時間が減る=Googleに良い評価をされない

 

モバイルの表示スピードについてのアメリカ大手企業の見解

 

  • 0.1秒の遅延が発生すると、売り上げは1%ほど減少する(Amazon )
  • 2秒のレスポンスタイムの低下は、ユーザー1人当たり、4.3%の売り上げ低下を招く(マイクロソフト)
  • ページ表示の2秒の遅れでユーザーの要求が2%減り、3.75%のクリックが失われ、全体にわたって満足度が減る(Google)
  • 検索結果の表示において「表示スピードが0.5秒遅くなると、検索数が20%ほど減少する」(元Google副社長マリッサ・メイヤー氏)(現在は米Yahoo! CEO)

引用元:モバイルラボ

 

実際にGoogle発信でも直帰率とコンバージョン率の関係の予測が出されています。

 

  • 表示速度が1秒から3秒に落ちると、直帰率は32%上昇
  • 表示速度が1秒から5秒に落ちると、直帰率は90%上昇
  • 表示速度が1秒から6秒に落ちると、直帰率は106%上昇
  • 表示速度が1秒から7秒に落ちると、直帰率は113%上昇
  • 表示速度が1秒から10秒に落ちると、直帰率は123%上昇
  • ページの要素(テキストやタイトル、画像など)の数が400個から600個に増えると、コンバージョン率は95%下がる

引用元:海外SEO情報ブログ

 

難しい話や、SEO評価云々を除いたとしても、ユーザーにストレスを溜めさせてしまうブログを作るメリットはありませんよね。

 

表示速度の遅延の原因になる画像の扱いはブロガーにとって重要なことであるということが分かります。

 

特に留学ブロガーは、別ジャンルのブロガーに比べてブログに掲載する写真が多いので気を付けないといけません!

 

  • 綺麗な景色の写真をブログに添付
  • 現地の写真をブログに添付
  • 食べ物の写真を多めに添付

 

画像多めの記事を書くことが多いので、留学ブログは表示速度の影響を受けやすいジャンル。

 

では留学ブロガーで赤点を喰らった僕がどのような解決策を行なったのか、下記の3つだけです。

 

  • 画像容量を下げる
  • 不要な画像は貼らない
  • 自分のブログの適正画像サイズ(ピクセル)を理解

 

なやたね

めちゃくちゃ簡単なので、すぐに実践可能です。

画像容量を下げる

画像容量を下げる方法は手動で行う方法と、自動で行う方法の2パターンあります。

 

因みに僕は、手動で画像容量を下げる→ブログにアップする→自動で画像容量を下げるにしています。

手動で画像の容量を下げる方法

手動で画像の容量を下げる方法として留学ブロガーにおすすめなのはOptimizillaです。

 

Optimizillaは、見栄えに支障が無いレベルで、画像容量を圧縮してくれるフリーサイト。

 

登録とか煩わしい事は無く、無料ですぐに使えます。

 

使い方も簡単も超簡単で、容量圧縮したい画像を枠内に持って行けば、勝手に画像容量を圧縮してくれる。

 

 

なやたね

僕はこのサイトをオプティマイザウルスと呼んでいます!

 

他にもTiny JPGTiny PNGなど、画像容量を圧縮出来るフリーサイトがありますが、Optimizillaの良いところは、ユーザー側が画質を荒くしてでも容量を落としたい場合に、手動で画像のクオリティーレベルを選択出来るところ!

 

留学ブロガーの場合、画像サイズをいくら圧縮しても、そもそもの画像容量が大き過ぎて、画質を落とさないと圧縮しても全然容量が大き過ぎるということもありますので、この機能は助かりますね。

 

なやたね

画質のクオリティーレベルも自分で調整出来るので、細かい調整が出来ます!

 

但し、Optimizillaは、1日に何十画像もやると一定時間サイトが使えなくなることがあります。

 

そのような場合は、名前は違えど中身がOptimizillaと完全一緒のフリーサイトJpeg 圧縮Png 圧縮がおすすめ!

 

なやたね

もはや原型はありませんが、僕はこのサイトをサブティマイザウルスと呼んでいます。

自動で画像容量を下げる方法

 

ワードプレスのみとなりますが、無料プラグインのEWWW Image Optimizer を使うことで、画像容量を自動で下げることも可能です。

 

自分が過去にアップした画像容量も下げることが出来るので便利で簡単!

 

  1. 新規プラグインから「EWWW Image Optimizer」を追加
  2. プラグインの有効化
  3. メディアタブ選択
  4. 一括最適化

 

EWWW Image Optimizerは、見栄えに支障が無いレベルで、画像容量を圧縮してくれますが、手動で圧縮する場合に比べて、圧縮容量が少ないので、時間を掛けられる人は手動で画像圧縮をする方が良い。

 

この理由で僕は、手動で画像容量を下げる→画像をブログにアップする→自動で画像容量を下げるようにしています。

 

友達のブログでも検証しましたが、EWWW Image Optimizerのみでもモバイルの表示速度が改善されました。

 

所要時間は10分程で、ボタン押して画像容量が最適化されるのを松の実!

 

 

それでも、まだ赤ラインにいるので、時間が無い人は、EWWW Image Optimizerだけでも良いですが、ちゃんとやるなら画像を再添付という怠い作業をする必要がある。

 

因みに僕の友達と僕のブログのモバイル表示速度で差が出ているのは、その怠い作業をしたかしてないかの差です。

 

なやたね

EWWWだけじゃダメなの?と言う人もいるかもしれませんが、努力した分だけ報われる。

自分のブログの適正の画像サイズを理解する

容量の圧縮だけが全てでは無いです。

 

ブログには記事が表示される枠がありますよね。

 

基本的には、記事枠の中に写真を掲載する形になっていると思うのですが、それぞれのブログテーマには写真の添付すう際の適正サイズ(縦横比)というのがあります。

 

僕の場合は、ワードプレスの有料テーマSANGOを使っていますので、SANGOの記事内に掲載する適正画像サイズは「680×390」

 

因みに「680×390」以上のサイズの画像を添付するとSANGO側で自動調整して、表示してくれるのですが、潜在的にこのような問題が起こります。

 

可愛い猫の画像①「680×390」79kb

可愛い猫の画像②「1360×780」229kb

「1360×780」でも自動縮尺してくれるので、見た目は同じですよね。

 

しかし、「680×390」は79kbなのに対し「1360×780」は229kb

 

「1360×780」の方が3倍近い容量があります。

 

見た目同じなのに・・・。

 

サイズにこだわりが無い画像の場合は、フルサイズで使用せず、予めトリミングをして「680×390」の画像を貼った方が画像容量を抑えることが出来るということになりますよね。

 

とにかく容量を削ればOKという訳ではなく、適正サイズの画像をアップすることも大事。

不要な画像は貼らない

ここはもはや意識の問題なのですが、モバイル表示速度を維持するためには、日々のブログルーティーンに画像容量について頭に入れておく必要があります。

 

例えば海の画像とか、色んな角度の写真を読者さんに見て欲しい!

 

そんな気持ちで写真を貼ってしまうととんでもないことになっているかも。

 

実際に僕もやってました。

 

たくさん画像使った方が拾い画ではないという証明にもなりそうだし、世界観を共有したいとかいう謎の押し売りマインドがあったので・・・。

 

因みに、500KBの画像を四方から4枚撮ってブログに全部貼ったら2MBになります。

 

2MBは標準画質の動画1分見るのと同様の容量ということになるので、中々な容量であることが分かりますよね。

 

因みに最近のスマホは画質が良いので綺麗に撮れるメリットは有りますが、その分画像も重いので容量を下げずにブログにアップするのは止めた方がいいです。

留学ブログが全く伸びない理由は画像かも?まとめ

モバイル表示スピードに本気で取り組む場合は、ある程度労力を掛けて画像の容量圧縮や再添付が必要になりますが、時間が無い人はプラグインのみでも入れると効果があると言えます。

 

画像を貼り過ぎない意識や、自分のブログに合った画像サイズ(縦横比)を理解することも大事なので、継続してモバイル表示速度を維持出来るように日々努力が必要!

 

PageSpeed Insightsの画像評価はトップページのデフォルトで表示される画像しか読み込んでいないので、評価を参考にして記事内の画像も同じくらいのクオリティーで作っていくといいと思います。

 

この辺は露出する機会が多いので、優先的に直していくといいかもしれません。

 

  • 画像吹き出しに使っている画像
  • トップページの背景画像
  • トップページのヘッダー画像

 

PageSpeed Insightsは、他の人のブログの表示速度を見ることも出来るので、参考にしたり作業するモチベーションにしながら取り組むのも有りだと思いますよ!

コメントはお気軽にどうぞ!