【WordPress】画像を最適化して、サイトの表示速度を高速化する方法

サイトの表示速度を計測するために「PageSpeed Insights」を利用する方が多いと思います。

0-49点のレッド（Low）、50-89点のオレンジ（Medium）、90-100点のグリーン（Good）。

一喜一憂することはないかもしれませんが、表示速度が遅いと直帰率が上昇し、90点以上がパフォーマンスの髙いページと評価されることは誰もが知ることなので、できることはしっかりしておきたいですよね。

そこで、「PageSpeed Insights」で指摘されていた、“適切なサイズの画像→適切なサイズの画像を配信して、モバイルデータ量を節約し読み込み時間を短縮してください”を改善するために、２つのことを試してみました。

すると、わずかながら表示速度の評価が上昇することができました。

ここでは試した２つの方法についてご紹介します。

こんな方におすすめ

画像のデータ量を抑える方法

サイトやブログに掲載する画像は、一般的に画質にこだわるより、軽くデータ量で素速く読み込ませて表示速度を上げることが優先されています。

なので、できれば画質をそこそこ落とさずに画像のデータ量を抑えることが重要になります。

そこで試してみたのが、WEBSITE PLANETが提供する無料のオンラインツール「オンラインPNG・JPEG圧縮」です。

最大の特徴は、“画質を全く妥協せずに元の画像を最大80%圧縮”すること。

同様に画像圧縮をしてくれるウエブアプリ「Squoosh」を使っていたこともありますが、複数枚の画像を一気に圧縮できないのが欠点。

「オンラインPNG・JPEG圧縮」は、対応するファイル形式がPNG・JPEGで、別のファイル形式に圧縮することはできませんが、目的は画像圧縮なので、PNG→PNG・JPEG→JPEGで十分です。

実際に複数枚の画像で試してみると、70％以上の圧縮率でありながら、画質をほぼ維持してくれました。

これなら使えそうです。

次に行ったのが、WordPressのサイトやブログに画像をアップロードする際に推奨されているWebP形式に自動変換してくれるプラグイン「WebP Converter for Media」を試してみました。

WebPは、Googleが開発した画像形式（フォーマット）で、画像の圧縮率が高く超軽量のデータ量にしてくれます。
表示速度の高速化に一役買ってくれるわけです。

だったら、最初からWebP形式の画像を作成してからWordPressにアップロードすればいいじゃん、となりますが、前述の「Squoosh」でWebP形式で圧縮した画像をアップロードしてみたところ上手くいきませんでした。

どうやら、functions.phpにコードを追記しないとダメなようです。

また、WordPressに画像をアップロードすると自動で圧縮してくれるプラグイン「EWWW Image Optimizer」でも設定次第でWebP形式の画像に対応しているようですが、.htaccessをいじらなければダメなようで、こちらは万が一に何かが起こると面倒なので避けました。

ということで、試してみた「WebP Converter for Media」ですが、公開した記事の掲載画像を確認してみると、WebP形式の画像になっていました。

また、既にアップロードしていた画像についても、一括変換でデータ量を大幅に減らすことができたので、これは使えるなと感じました。

つまり、何も知識がなくても簡単にWebP形式の画像にすることができたわけです。

さて、実際にアップロードする前に画像のデータ量を圧縮して抑え、アップロード時に軽量画像形式のWebPに変換したことで、表示速度はどのくらい改善されたのか。

改めて「PageSpeed Insights」で計測してみました。

すると、モバイルが59→62に、パソコンが94→95になりました。

この数字をどう見るか。わずかながらの改善とはいえ、画像のデータ量を大幅に減らすことができたのでサーバーの負担も軽減されることを考えれば、やってよかったと思っています。

ただ、画像関連は改善できたものの、改善できる項目には、相変わらず“使用していない JavaScript の削減”“レンダリングを妨げるリソースの除外”“使用していない CSS の削減”が立ちはだかります。

これをなんとかしなくてはいけませんが、今回は指摘された「適切なサイズの画像」が改善できたので一安心といったところです。

最後まで読んでいただきありがとうございました。