【WordPress】ブログの表示速度が遅いと感じる人は画像ファイルを圧縮してみよう

WordPressブログの表示速度が遅くて困っている人って多いじゃないでしょうか?

いまはSEOに強いテーマがいっぱいあって、有名なテーマであればちゃんとチューニングもされているので、そのまま使うだけで結構スピードも出たりします。

また、サーバーをWordPressに強いエックスサーバーに変えるだけで、目に見えて速度が変わることもあるのですが、長く運用するにつれどうしてもパフォーマンスが落ちてしまいます。

それは、今までアップロードしてきたメディアファイルが原因であることが多いので、今回は画像周りを中心としたWordPressブログのパフォーマンス改善について紹介していきたいと思います。

ブログのパフォーマンス改善にはどうすればいいの?

【WordPress】ブログの表示速度が遅いと感じる人は画像ファイルを圧縮してみよう

初めてブログを運用する方であれば、パフォーマンスを上げると言っても何から手をつけていいのかよく分からないですね?

表示速度の改善には専門的な施策が必要な場合もあり、アレもコレもやろうとするとややこしいので、

まずはブログで使用している画像(WordPeess管理画面のメディアからアップロードした画像)が、どれくらい量があるのかをチェックしてみましょう。また、ブログの1画面にどれくらいの数の画像が表示されているのかも確認してみましょう。

画像の使用数が多い場合、それらのファイルサイズ(容量)を圧縮することで、結構な割合でスピードが変わったりします。

このブログでは過去にもパフォーマンス改善についていくつか記事を紹介しているので、今回はその内容と重複するところもございます。

ただ、初めてブログを運用する方にはページのチューニングってとてもハードルが高いと思うので、今回は画像の容量圧縮にフォーカスして紹介することにいたします。

なぜ画像を圧縮する必要があるのか?

例えばスマホで撮影した写真をそのままブログにアップしたり、フリー素材のサイトからGETした高画質画像をそのまま使おうとすると、ファイルの容量がデカいままブログに掲載されることになります。

容量がデカいとページの読込みが完了する(画像の読込みが終わる)までに時間がかかってしまいます。

最悪の場合、ページへアクセスしても数秒〜十数秒経たないと何も表示されない😭…ことになり、せっかくブログを訪れて来てくれたユーザーさんがそのまま離脱してしまう確率が高くなってしまうのです。

表示速度そのものを改善するためには、画像以外にも手を入れないといけないこともありますが、ちゃんとしたWordPressのテーマを使っていれば、画像の容量をなんとかするだけでパフィーマンスが改善することも多いです。

具体的に何から始めればいいのか?

画像がどれくらいブログの表示速度に影響を及ぼしているのか?
まずは以下の「Google PageSpeed Insights」でスピードテストしてみましょう。

Google PageSpeed Insightsの使い方については以前の記事でも紹介していますので、そちらも合わせて参考にしてみてくださいね。

Google PageSpeed Toolsでの表示速度の最適化とスコアアップ対策例をご紹介(2019年版)

2019年1月23日

PageSpeed Insightsの測定結果の中で「適切なサイズの画像」という指摘があれば、次は圧縮ツールやプラグインを使って容量を削減してあげましょう。
【WordPress】ブログの表示速度が遅いと感じる人は画像ファイルを圧縮してみよう

画像の圧縮ツールとプラグイン、そのほかの施策について

いくつか画像の容量を削減できるWEBサービスやWordPressのプラグインがあるものの、個人的におすすめするのは以下の2つです。

ブログ初心者にもおすすめの画像圧縮ツール
  1. パンダPNG
  2. EWWW Image Optimizerプラグイン

パンダPNG

正式名称は「TinyPNG」ですが、以下のWEBサイトを見てもお分かりのように、かわいいパンダさんがお出迎えしてくれます。

【WordPress】ブログの表示速度が遅いと感じる人は画像ファイルを圧縮してみよう

「Drop your .png or .jpgfiles here!」と書かれた箇所にマウスで画像をドラッグしてアップロードすると、自動で容量を削り落としてくれます。
(画像形式はJPGとPNGが対応いています)
【WordPress】ブログの表示速度が遅いと感じる人は画像ファイルを圧縮してみよう

どれくらいサイズダウンになったのかを%で表示してくれるので、分かりやすいですね。
【WordPress】ブログの表示速度が遅いと感じる人は画像ファイルを圧縮してみよう

あとはスリムになった画像をダウンロードして、WordPress管理画面のメディアからアップロードすればOKです。

「TinyPNG」はWordPressのプラグインとしても存在するものの、無料で使える機能に限度があります。
大量の画像を圧縮するには厳しいですが、ランディングページやペラサイト用に画像を圧縮するのであれば、パンダさんに削ってもらうだけでも充分事足ります。

EWWW Image Optimizerプラグイン

プラグインであればEWWW Image Optimizerをおすすめします。
【WordPress】ブログの表示速度が遅いと感じる人は画像ファイルを圧縮してみよう

このプラグインも無料の範囲でできること、有料でないとできないことはあるのですが、無料のままでも役立つ機能が満載のため、これ1つ入れておけば画像の容量削減はOKと言っていいでしょう。

EWWW Image Optimizerプラグインの特徴
  1. 無料ながら大量の画像ファイルの圧縮ができる
  2. メディアからアップロードするたびに圧縮がかかるので手間要らず
  3. 過去にアップロードした非圧縮画像も、管理画面上でまとめて容量削減することができる
何よりうれしいのが、WordPressの管理画面から過去にアップした画像であってもまとめて圧縮してくれるという点。

大量の画像を1つ1つ容量削って、アップロードし直すとか面倒くさくて非現実的なんですが、EWWW Image Optimizerであればその辺りの一括処理までやってくてるので、とても便利なプラグインじゃないかと思います。

表示速度改善のために画像関連で他にもやった方が良いこと

これも過去に紹介したGoogle PageSpeed Insightsの記事でも少し触れていますが、画像の遅延表示はやって方が良いでしょう。

なお、WordPressのバージョンが5.5であれば、画像遅延機能はネイティブでサポート済です。

それ以前のバージョンを使っていたり、テーマが遅延処理に対応していないのでしたら、以下の記事も参考に画像遅延をやっておくことをおすすめします。

画像の遅延読み込みができるWordPressプラグイン4選と速度比較のまとめ

2019年2月16日
注意点として、スライドショー機能が入ったテーマでは、まれにプラグインとの相性が合わずにレイアウトが崩れたり、画像が表示されなくなったりするケースもあります。
なので、自分のブログの環境に合わせてプラグインを選定するようにしましょう。

最後にPageSpeed Insightsでどの程度パフォーマンスが上がったのかを検証

できる対策をやり終えたら、PageSpeed Insightsへ戻って再度スピードテストしてみましょう。

画像の部分で指摘を受けた箇所が改善されていれば、サイトの読み込み速度が実感できるレベルまで向上しているではないかと思います。

もし、どうやってもうまく改善できない場合は、以下のようにより踏み込んだ施策を行ってみると良いでしょう。

  1. そもそも使用している画像のサイズ自体を小さくする
    (2000pxや4000pxの画像サイズは1000px以下にリサイズする、など)
  2. ウィジェットで読み込んでいるサムネイル画像があれば消してみる
  3. スライドショーを使用しているテーマであれば、いったん機能をOFFにしてみる
最後まで読んでいただき、ありがとうございました♪

関連記事

コメントを残す