画像遅延プラグインの効果
以下の3つの画像遅延ローダーをGoogleのPageSpeed Insightsのスコアで比較しました。
画像遅延処理のPluginの有無でPageSpeed Insightスコアは、以下のように改善できた。
結論
結論から言うと今回の結果から、採用したPluginは、 「Lazy Load – Optimize Images Ver.2.3.2」です。
評価方法
例えば、以下のアドレスをGoogle Page Speed Insightsに入力して測定します。(https://harikiri.diskstation.me/wordpress/7804/)
結果は、モバイル : 40程度 → 50程度
少し長文のページのスコアも測定しました。
結果は、モバイル : 25程度 → 35程度
比較検討したPluginのバージョン
- Lazy Loader Ver.5.1.2
- Lazy Load – Optimize Images Ver.2.3.2
- a3 Lazy Load Ver 2.2.2
結果の概要
Lazy Load と Lazy Loader
Lazy Load >= Lazy Loaderと、PageSpeed Insightsスコアで若干の差があったが、ほぼ同等。
ただし、Lazy Loadでは、連続でスコアを測定すると、だんだん良くなる傾向がある。cache関係で相性が良いのかもしれない。
a3 Lazy Load
パソコンでのPageSpeed Insightsスコアが高く出る傾向がある。長文の投稿ページでは、スコアの改善が殆どなかった。これからのPage作りは、モバイル・オリエンテッドなどで、パソコンでのスコアは、以下の通り良かったが、採用を見送ることにした。
ルート(myblog) モバイル
- モバイル : 35⇨57
- パソコンで91が最大値。その他のPluginでは、モバイル55が最大/パソコンでは、90を超えない(87程度)
ルート(myblog) 長文ページ
- モバイル : 25⇨25
- パソコン : 65⇨91
まとめ
これまでに、Autoptimize プラグインによるCSS, JavaScriptなどの最適化、WP-Optimizeによるcacheのによる最適化、EWWW Image Optimizerによる画像の軽量化を検討してきました。今回は、画像の遅延表示によるPageSpeed Insightsスコアの改善を検討しました。
- Autoptimizeプラグイン (Java Script, CSSおよびhtml最適化)
- WP-Optimize プラグイン(キャッシュのみ有効化)
- EWWW Image Optimizer (画像の縮小化)
総合改善度
まとめに記載したように、ごく最近まで速度に関するスコアについて知識がなかったため、関連するプラグインは、何も入れていなかった。そのときのスコアから現在までのスコアの改善度は、以下の通りです。
まだまだですが、当初のことを思えば、劇的な改善度です。
PageSpeed Insightsスコア: Plugin導入前からの変遷
ルート(myblog)
長文のページ
- モバイル : 2~3 → 50程度
- モバイル : (未測定) → 35程度
以上