ワードプレスのプラグインで画像の圧縮・最適化をしてみた

サイトを長く運用していると、画面表示速度が遅くなってきている気がする。。もしかしたら画像をそのままアップしていませんか？最初はサイトを運営しているときは特に問題なくても、徐々にサイトが遅くなっている場合は、、画像とjavascriptが原因となることが多いです。今回はサイトスピード改善に役立つ画像の最適化方法をご紹介します。

 

 

今回最適化しようとした背景

今回画像を最適化しようとした背景は、ある運用サイトの表示が遅いと感じ、
ページスピードインサイトというツールで、計測したところ点数がかなり低く、その原因の多くが画像に起因するものだったからです。

 

ページスピードインサイトによると、以下の画像のように画像や読み込みに関する項目で

サイトスピードの改善が期待出来るようです。

ページスピードインサイトについては下記の記事でも解説しています。

ページスピードインサイトで引っかかった項目の概要

ページスピードインサイトで引っかかった項目を説明していきます。

 

次世代フォーマットでの画像配信

通常WEBで使用されている画像は拡張子が「.png」、「.jpg(.jpeg)」、「.gif」となっているものが多いです。
次世代フォーマットでの画像配信とは、JPEG2000やJPG XR、WebPといった画像フォーマットになります。

これらの画像フォーマットは、通常で配信されている、「.png」、「.jpg(.jpeg)」より圧縮性能が高く、ダウンロード時間やデータの配信量を抑えることができ、より表示されるスピードが上がりやすくなります。

なお2020年6月現在での、各3つのフォーマットのブラウザ対応状況は以下となっております。

https://caniuse.com/から弊社が独自で作成

ブラウザ名	JPEG XR	JPEG 2000	WebP	備考
IE	〇	×	×
Edge	△	×	〇	Edge12～18はサポート済みだが
				Edge79～81,83は非サポート
Firefox	×	×	〇
Chrome	×	×	〇
Safari	×	〇	×
Opera	×	×	〇
iOS Safari	×	〇	×
Opera mini	×	×	〇
Android Browser	×	×	〇
Opera Mobile	×	×	〇
Chrome Android	×	×	〇
Firefox Android	×	×	〇

(引用: https://caniuse.com/)

上記からすると、WebPはサポートしているブラウザが多いようですので、今後次世代フォーマットの画像配信を検討している方は、まずはWebPから始めたほうが良さそうです。

WebPにすると、PNG画像で26%、JPEG画像で 25-34%小さくできるとされています。

出典(引用: https://developers.google.com/speed/webp/)

なお次世代フォーマットでの画像配信するためには、フォトショップのプラグイン(https://github.com/fnordware/AdobeWebM)を使うのがよさそうですが、フォトショップ自体を持っていない運用担当の方がいるかと思います。

その場合はフォトショップを持っているWebデザイナーさんに頼むか、またはWeb上で変換するサービスがありますのでそれを使ってみて下さい(Web上で変換するサービスは後程ご説明します)。

WebPについては下記の記事で解説しています。

効率的な画像フォーマット

効率的な画像をフォーマットとは、一言で言うと画像のサイズは小さくしましょうということです。画像を小さくするためには以下の方法があります。

1. 画像の品質に大きな影響を与えずにファイルサイズを小さくする(画質は85、解像度は70dpi程度)。
2. 画像を保存する際に適切な保存形式にする(写真ならjpg、透過があるならpng、アニメーション画像ならgifなど)
3. 画像で配信する必要がない表や図形はなるべくHTMLやcssを利用する

 

オフスクリーン画像の遅延読み込み

オフスクリーンの画像の遅延読み込みとは、画面にに表示されてない画像の読み込みを遅くさせる(スクロールし、画面が表示された段階で該当の画像を読み込む)事です。
通常は、1画面の画像やテキスト情報を全て読み込みます。画面に表示されていない画像が原因で画面表示が完了していないとなると、ユーザーにとってはストレスと感じそのサイトを離脱する可能性もあります。

そのため、ユーザーから見て表示されている部分だけ表示することで、その分表示速度も改善しますし、ユーザーのストレスも軽減されるでしょう。

 

ワードプレスのプラグインを使って、画像の最適化に挑戦してみた

今回のサイトは約400以上の画像があったため、1つ1つ画像を最適化していてはかなり時間がかかってしまいます。幸いワードプレスを使っており、ワードプレスには画像を最適化してくれるプラグインがありますので、今回はプラグインを使って対応しました。

今回使ったプラグイン

今回使ったプラグインは主に以下の2つです。

1. 　・ewww image optimizer(次世代フォーマットでの画像配信対策で使ったewww image optimizerこちらからダウンロードできます)
2. a3 Lazy Load(オフスクリーン画像の遅延読み込み対策で使ったa3 Lazy Loadはこちらからダウンロードできます。

更にjavascriptとcssの最適化で以下のプラグインも併せて使いました。

・Async JavaScript(https://ja.wordpress.org/plugins/async-javascript/)
・Autoptimize(https://ja.wordpress.org/plugins/autoptimize/)

 

検証前の点数

検証前はモバイルサイトの点数で34点とあまりよくない点数。。

 

次世代フォーマットでの画像配信対応後の点数

ewww image optimizerで設定をする

まずは、ewww image optimizerというプラグインをインストールします。

インストールの設定で、WebPの設定を行います。やり方は簡単で、図のように「リライトルールを挿入する」をクリックするだけです。

 

なお、ewww image optimizerには「イージーモード」で画像を遅延読み込みできます。

ただ検証したサイトでは、スライド画像が表示されなくなったので、チェックボックスから外しました。

 

画像を一括で最適化する

メディア→一括最適化で、既存の画像を全て最適化します。

 

さて最適化後の点数は？

次世代フォーマット配信後の点数は以下のように60点となりました。

 

改善できる項目からは外れているので、かなり改善できたようです。そのかわりオフスクリーン画像の遅延読み込みが目立ってきました。

 

オフスクリーン画像の遅延読み込み対応後の点数

全項目で次世代フォーマットは改善できましたが、オフスクリーン画像の項目が目立ってきました。

a3 Lazy Loadをインストールする。

これは、インストールするだけです。なぜなら、デフォルトで、オフスクリーン画像の遅延読み込みをしてくれているからです。

 

さて最適化後の点数は？

なんと、40点と下がってしまいました。。

 

原因は、レンダリングを妨げるリソースの除外との事で、cssやjavascriptに原因がありそうです。

これらも次で改善する必要がありそうです。

 

レンダリングを妨げるリソースの除外対応後の点数

AutoptimizeとAsync JavaScriptをインストールして最適化します。

Async JavaScriptの設定

Async JavaScriptは以下のように設定します。

 

Autoptimizeの設定

Autoptimizeは以下のように設定します。

JavaScript オプション

以下のように「JavaScript コードの最適化」と「JS ファイルを連結する」にチェックを入れましょう。

cssの オプション

以下のように「css コードの最適化」と「css ファイルを連結する」、「インラインのcssを連結」にチェックを入れましょう。

 

 

さて最適化後の点数は？

ほぼほぼ80点とかなり上がりました！

 

 

まとめ

今回の検証でいくつかのプラグインを使って改善してみました。もちろんワードプレスにはほかにも最適化できるプラグインがありますので、それを使ってみても良いでしょう。ただ画像をあまりにも最適化すると画像が粗くなってしまうことに注意が必要です。