画像を最適化して表示速度のスコアを73%上げた3つの方法

WordPressでサイトを運営していて、よくあるお悩みの1つが、データが増えて表示速度が遅くなってしまうことです。この現象は人間の体重になぞらえて、サイトが「重くなる」と呼ばれています。

表示速度は、ユーザビリティはもちろんSEOでも重要で、2018年の7月にこの表示速度のアップデートが起こると言われています。表示速度が遅い、「重い」サイトは今まで以上にSEOで不利になってしまうのです。

WordPressが重い原因はいくつか考えられますが、その中でも多いのが画像です。画像はユーザーの目を引き付けたり、文章だけでは説明が難しい内容を、シンプルに直接伝えたり、ユーザビリティの面でとても効果的です。

でも、だからといって調子に乗って画像をどんどん入れていくと、それに比例してデータが膨れ上がり、どんどんWordPressが重くなっていくのです。

ユーザビリティのために入れた画像によって、ユーザビリティが損なわれては本末転倒ですよね?

私自身、今まであまり意識せずに画像をアップロードしていたのですが、今回画像の最適化を施した結果、表示速度のスコアを73%上げることに成功しました。

まだまだ表示速度が速いとは言いにくい状態ですが、それでもある程度の成果が出たので、画像を最適化させた方法をお話ししたいと思います。

 

スポンサーリンク

WordPressが重いと、どうなるのか?

画像の最適化の話の前に、そもそもWordPressが重いと、どうなるんでしょうか?まずは、そこからお話していきたいと思います。

ユーザー離れ

1つ目は、ユーザー離れに繋がるということです。クリックしたのに、なかなか表示されないサイトにイライラしたことは、ありませんか?あまりにも遅いと、サイトが開くのを待たずに閉じちゃったりしますよね。

それを証明するように、Googleの公式調査で、サイトの表示速度について、こんな調査結果が発表されているそうです。

  • 読み込みが1秒から3秒になると、直帰率は32%上がる
  • 読み込みが1秒から5秒になると、直帰率は90%上がる
  • 読み込みが1秒から6秒になると、直帰率は106%上がる
  • 読み込みが1秒から10秒になると、直帰率は123%上がる

直帰率を簡単に説明すると、サイトを訪問して他のページを見ずに帰ったユーザーの割合です。なのですが、サイトが重いという観点から見たら、この直帰率は他のページを見ずに帰ったというより、なかなか表示されないから帰ったという見方ができますよね?

そう考えたら、これは重大な機会損失と言う他ありません。3秒から5秒になるだけで2倍以上、5秒を超えると読み込み時間1秒に比べて、直帰率が2倍を超えるのですから。ユーザー離れに繋がってしまうのも、当然だと思いますよね?

SEOに不利

Googleは2018年の7月に表示速度のアップデートを行うと予告しています。重いサイトは、今後SEOに不利になっていくのです。

Googleは、検索順位を決めるためにクローラーと呼ばれるロボットを使っています。このクローラーがサイトを巡回して検索順位を決めているのですが、その際サイトが重いと、サイトにアクセスするのにクローラーの容量がたくさん消費されるので、敬遠されてしまうそうです。

それでなくても、ユーザーファーストを謳っているGoogleが、ユーザー離れを引き起こす「重い」サイトに対して、高評価をするとは考えづらいですよね?

以上のことから、WordPressが重いとユーザビリティとSEOの面で不利になってしまうのです。

WordPressが重いことと画像が、どう関係あるのか?

単純な話、重いということは、それだけデータが大きいということです。データが大きくなれば、そのデータを読み込む時間も長くなりますよね?

Webサイトのコンテンツは、ざっくり言うとテキスト(文字)と画像でできています。

その中でも画像は、500 × 500 px 程度のものでも、数十KBから数百KBほどになります。

それに対して文字の方は、1万文字のテキストでも30KBほどだそうです。コンテンツ全体に対して、画像がどれだけデータが大きいか一目瞭然ですよね。

WordPressに限らず、文字だけの文章は、なかなか読んでもらえません。文字だけでは伝わりにくい内容も、画像があることによって、簡単に伝えることができます。

そして、WordPressは画像のアップロードが簡単にできてしまうので、どんどん画像を入れてしまいがちです。でも、簡単にアップロードできる分、容量の大きな画像も気付かないうちに入れてしまいがちです。

それが積み重なることで、知らず知らずのうちにどんどんデータが大きくなり、その結果重くなってしまうのです。ここまで読んで、画像の最適化がSEOやユーザビリティにおいてどれだけ重要か、分かっていただけると思います。

 

表示速度を測定した3つのツール

WordPressが重いかどうか?表示速度の測定には、以下の3つのツールを使いました。

PageSpeed Insights

「PageSpeed Insights」は、googleが無料で提供しているツールで、サイトの表示速度の測定だけでなく、サイトが重くなっている原因と解決法をアドバイスしてくれます。日本語表記なのが嬉しい限りです。

やり方は簡単です。「ウェブページのURLを入力」と書かれた欄に、測定したいサイトのURLを入力して「分析」をクリック。以上です。

すると、PC版とモバイル版それぞれの表示速度が、100点満点中何点かという形で表示されます。スコアが高いほど表示速度が速いということを意味して、逆にスコアが低いほど表示速度が遅い、つまりサイトが重いということを意味します。

GTmetrix

「GTmetrix」は、先ほどの「PageSpeed Insights」と、Yahoo!の提供する「YSlow」を使って、同時にサイトの表示速度を測定してくれるものです。

カナダの会社が提供しているツールのようで全部が英語表記ですが、「PageSpeed Insights」と同様に表示速度だけでなく、サイトが重くなっている原因と解決法をアドバイスしてくれます。

やり方も「PageSpeed Insights」と同じです。「Enter URL to Analyze」と書かれた欄にURLを入力して「Analyze」をクリック。以上です。

すると、「PageSpeed Insights」と「YSlow」それぞれの表示速度の得点と、実際の表示速度が表示されます。「PageSpeed Insights」でも実際の表示速度は測定できるそうですが、「Unavailable(測定不能)」と表示されてしまうことが多いようです。私のブログも、そうでした(涙)

こちらも、スコアが高いほど表示速度が速いということです。

test my site

「PageSpeed Insights」と同じくGoogleが提供している「test my site」です。「URLを入力してサイトをテスト」の欄にURLを入力して測定すると、モバイル版の表示速度と、そこから推定される離脱率、そして改善案を提案してくれます。

測定した結果

この3つのツールで計測した数値が、こちらです。不覚にも、最適化をする前の測定結果を残しておらず、最適化後の結果になります。


上段が「PageSpeed Insights」の(左)モバイル(右)PC、中段が「GTmetrix」、下段が「test ny site」の測定結果です。

モバイル版が84点、PC版71点。表示速度が「GTmetrix」では3.2秒、「test ny site」では7秒で離脱率26%という結果でした。

ちなみに、最適化前は

PC版が41点で表示速度が5.6秒(GTmetrix)という結果で、なぜかモバイル版が99点

という謎の結果でした。

「PageSpeed Insights」のスコアが、最適化前41点から最適化後71点と、

表示速度のスコアが73%上がりました。

モバイル版の得点の割に「test ny site」では7秒だったり、「Yslow」の得点が依然として低かったりと、まだまだ改善の必要アリな部分も多いですが、それでも最適化前に比べたら大幅に改善されました。

モバイル版の得点が下がっているのが謎ですが、それでも目安と言われている80~85点に入っているので、良しとします。

 

画像を最適化した方法

WordPressが重くなってしまう原因である、画像を最適化した方法をこれからお話ししていきます。「画像を最適化」なんて難しそうな言葉を使いましたが、やることは

画像そのものを圧縮する。

と、いうことです。

具体的に、どのように圧縮するのか、掘り下げていきたいと思います。

画像をそのまま、アップロードしていませんか?

WordPressでアップロードする画像は、ご自身が撮影した写真、有料・無料を問わずWebで配布されている画像素材、大きく分けて2通りだと思います。それらの画像をアップロードするとき、画像をそのままアップロードしていないでしょうか?

私も、自分で撮った写真、Webで配布されている画像素材の両方を使っているのですが、画像のサイズをまったく気にせず、そのままアップロードしていました。

デジカメで撮った写真を、ある記事のアイキャッチ画像(記事一覧で表示される画像)に使ったのですが、サイズが5MB。これではWordPressが重くなって当然でした。これは要改善です。他にも、デジカメの写真を何枚か使っていたので、まとめて改善していきます。

オンライン画像圧縮サービスで画像を圧縮

画像を最適化するためとは言え、画像を圧縮してしまうと、画像のクオリティが落ちてしまうのではないかと心配する人も、多いと思います。

ここでご紹介するオンライン画像圧縮ツールを使うと、クオリティを損なうことなく画像を圧縮してくれます。

TinyPNG

画像のクオリティをできるだけ高い状態のまま圧縮してくれるサービスとして、多くの人がおススメする「TinyPNG」です。

「PNG」とありますが、JPG形式のファイルもしっかり圧縮してくれます。

やり方は簡単で、「Drop your .png or .jpg files here!」と書かれた部分に、圧縮したい画像をドラッグ&ドロップするだけです。

画像圧縮サービスは、ぶっちゃけこれだけでも良いと思うぐらい、おススメです。

Optimizilla

「Optimizilla」も、有名なオンライン画像圧縮サービスです。日本語なのが嬉しいですよね。やり方は、先ほどの「TinyPNG」と一緒で、「ファイルをここにドラッグ&ドロップして下さい。」という箇所に画像をドラッグ&ドロップするだけです。

「Optimizilla」の売りは、何と言っても圧縮レベルを自分で決められることです。プレビューで確認しながらできるのも、おすすめポイントです。

自分好みで設定したい人や、徹底的に画像を圧縮させたい人には、おすすめだと思います。

プラグインを使って画像を圧縮

WordPressは、プラグインという拡張機能があって、プラグインを組み合わせて自分好みにカスタマイズできます。当然、画像を圧縮してくれるプラグインもあります。

「EWWW Image Optimizer」というプラグインが有名です。

この「EWWW Image Optimizer」は、画像をアップロードすると自動でファイルサイズを圧縮してくれます。しかも、過去にアップした画像を検出して、その画像たちを一括で圧縮できます。さらに、画像圧縮の処理が速いという、優れものです。

先ほどの画像圧縮サービスも、枚数は限られますが一括で画像を圧縮できます。でも、枚数が限られるため、どうしてもその都度圧縮をかけないといけないのが、少し面倒です。その点、「EWWW Image Optimizer」は、有効化している限り自動で画像を圧縮してくれるので便利です。

「EWWW Image Optimizer」のインストール方法や、詳しい設定方法などは、こちらの記事が参考になります。
EWWW Image Optimizer の設定方法と使い方|バズ部

画像の圧縮、もう1つの方法

ここまでお話しした画像の圧縮は、画像ファイルのデータ量を縮小させるものでした。画像の圧縮というと、このデータ量の縮小をイメージしがちですが、画像の圧縮はこれだけではありません。

画像のサイズダウンだって、立派な圧縮です。

画像の要らない部分をトリミング(切り取り)したり、画像のサイズそのものを縮小したりすることです。これをするだけでも、データ量を大きく減らることができます。

ここまでご紹介した画像の圧縮方法を用いた結果、これだけ圧縮させることができました。



左が無圧縮でそのままアップロードしたもの、右が圧縮後です。いかかでしょうか?もともとのファイルサイズから、90%以上も圧縮できていることが分かります。

 

画像を最適化した2つ目の方法

WordPressが重い原因となる画像。画像を最適化した2つ目の方法は、画像の読み込みを後回しにする方法です。

画像読み込みを後回しにするとは?

通常、コンテンツの読み込みはテキストと画像の両方を同時に行ないます。でもそうすると、データの大きい画像が1枚でもあったとき、その読み込みのためにコンテンツ全体の表示が遅くなってしまいます。

それを回避するために、画像の表示を後回しにして、テキストの表示を優先させるのです。そうすることで、データの小さいテキストの方が先に表示されるので、表示速度が上がるという訳です。

ただ、画像の読み込みを遅くさせるだけなのですが、多くの人が薦めているように、馬鹿にできないほどの効果があります。WordPressが重いとお悩みのあなたは、ぜひ試してみてください。

画像を後回しにする方法

「画像の表示を後回しにする」と言うと難しく聞こえますが、

WordPressはプラグインを使えば、この画像の遅読み込みも簡単にできるようになるのです。

画像の遅読み込みプラグインで有名なのは、「Lazy Load」です。WordPressにインストールして有効化するだけなので、設定が簡単です。

ただ、直近のアップデートが2年前とのことで、最新のWordPressバージョンと適合するか微妙なところがあります。それが原因なのか、私が使っているWordPressテーマ(ストーク)では、

有効化したとたん、画像が表示されなくなるという憂き目に遭いました。

販売元サイトを確認してみると、「相性が悪いプラグイン」にしっかり入っていました。

幸いにも、遅読み込みプラグインは「Lazy Load」の他にもいろいろあって、このブログではそのうちの「BJ Lazy Lord」を導入しました。

この「BJ Lazy Lord」も、インストール→有効化ですぐに使えるようになります。どちらにしても、エラーの出ないプラグインを導入すると良いと思います。

 

まとめ

以上が、WordPressが重い原因、画像を最適化して表示速度のスコアを73%上げた2つの方法でした。画像を最適化した2つの方法は

  • 画像そのものを圧縮する‐オンライン画像圧縮サービスを使う、プラグインを使う、画像のリサイズ
  • 画像の読み込みを後回しにする‐プラグインを使う

表示速度の改善は、私自身取り組んでいる最中です。効果的な方法が見つかり次第、順次このブログでご紹介したいと思います。

きたる表示速度のアップデートに向けて、あなたのWordPressサイトを対策していきましょう。

 

今日も、最後まで読んでいただいて、ありがとうございました。

 

 

 

 

スポンサーリンク






コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です