WordPressのサイトを高速化して表示速度を改善する方法【PageSpeed Toolsによる測定】

前回、Googleのサイト性能解析ツールPageSpeed Insightsを使って、WordPressで構築したWebサイトのページ読み込みスピードを計測しました。

その結果、数々の高速化のための提案を受けています。。

今回は、提案の中の1つである「画像最適化」について、対応と結果を説明します。

画像最適化とは

画像の品質に影響を与えずに、画像を圧縮することです。
圧縮することで転送サイズを減らし、ページの表示スピードを早くすることができます。

PageSpeed Insightsでは、次のように説明されています。

画像を最適化する
画像に適切なフォーマットと圧縮を選ぶことで、データ サイズを大きく削減できます。
次の画像を最適化すると、サイズを 230.3 KB(46%)削減できます。

今回は、利用しているすべての画像を最適化する方法について説明します。

画像の最適化方法

画像の最適化対象として大きく以下の2通りあります。

  1. WordPressのテーマで使われている画像
  2. メディアにアップロードした画像

1は、WordPressテーマでデフォルトで利用されている画像です。
2は、ブログの投稿などでメディアにアップロードした画像です。
それぞれの圧縮方法について以下で説明します。

WordPressのテーマで使われている画像の圧縮方法

ローカル環境で動かす画像圧縮ツールや、ブラウザから簡単に画像を圧縮してくれるサイトがあるので、これらを活用すれば簡単に画像を圧縮できます。
WordPressの画像で使われているPNG、JPEGについて、それぞれツールを以下に紹介します。

PNG

  • TinyPNG(Webツール, ドラッグアンドドロップだけの簡単操作)
  • OptiPNG(ダウンロードツール, Windows, Linux対応)
  • PNGOUT(ダウンロードツール, Windows, Linux対応)

JPG

メディアにアップロードした画像の圧縮方法

ブログの投稿などでメディアにアップロードした画像は、WordPressのプラグインで簡単に圧縮することができます。

利用するプラグインは「EWWW Image Optimizer」というプラグインです。
アップロードした画像を一括で圧縮してくれます。
また、インストール後は、アップロードする画像を自動で圧縮してくれます。
以下で利用方法を説明します。

EWWW Image Optimizerのインストール

「EWWW Image Optimizer」のインストール方法について説明します。

1.「プラグイン」→「新規追加」から「EWWW Image Optimizer」をインストールします。

  1. EWWW Image Optimizerプラグインを有効化します。
    EWWW Image Optimizerプラグインを有効化します。

 icon-wrench  EWWW Image Optimizerの使い方

※一括で画像を最適化するので、バックアップを取っておくことを推奨します。

  1. 「メディア」→「一括最適化」をクリックします。
    メディアの一括最適化をクリックします。

  2. 「最適化されていない画像をスキャンする」をクリックします。
    「最適化されていない画像をスキャンする」をクリックします。

  3. 少し待つと以下の画面が表示されるので、「最適化を開始」をクリックします。
    「最適化を開始」をクリックします。

  4. 画像の最適化が開始されます。
    画像の最適化が始まります。

  5. 以下のように”完了”と表示されれば、最適化の処理が完了です。
    最適化が完了しました。

画像最適化後の再測定

画像最適化前後で、PageSpeed Insightsの測定結果を比較しました。
最適化前のスコア61に対して、最適化後は70まで上がりました。
画像を最適化する提案も消えています。

  • 最適化前
    画像最適構えのスコアは61でした。

  • 最適化後
    画像最適化後のスコアは70でした。

まとめ

今回は、WordPressで使っている画像の圧縮方法について説明しました。
簡単な作業で効果があることがわかってもらえたかと思います。
画像を多用している場合は大きな効果があるので、ぜひ試してみてください。