[WordPress] 遅延読込プラグイン比較 – (1)Lazy Loader, (2)Lazy Load, (3)a3 Lazy Load (2020) – ID8071 [2020/01/27]

by Google Ads ID23293
by Google Ads ID:11145
by Google Ads ID24747
by Google Ads ID:11143(2)

Post Views: 51

by Google Ads ID8603

1 画像遅延プラグインの効果
2 結論
3 評価方法
- 3.1 比較検討したPluginのバージョン
4 結果の概要
- 4.1 Lazy Load と Lazy Loader
- 4.2 a3 Lazy Load
5 まとめ
- 5.1 総合改善度

画像遅延プラグインの効果

以下の3つの画像遅延ローダーをGoogleのPageSpeed Insightsのスコアで比較しました。

Lazy loading plugin that supports images, iFrames, video and audio elements and uses the lightweight lazysizes script. With manual modification of the …

Florian Brinkmann

Lazy Load

Lazy load your images and iframes, replace Youtube videos by a preview thumbnail.

WP Rocket

a3 Lazy Load

Use a3 Lazy Load for images, videos, iframes that are n…

a3rev Software

画像遅延処理のPluginの有無でPageSpeed Insightスコアは、以下のように改善できた。

Synology DS517 by Amazon ID:22173
Synology DS920+ by Amazon ID:22172
オムロン BY50S用パック by Amazon ID:22171
オムロン BY50S by Amazon ID22170
Synology 高機能無線ルーター 800Mbps + 1,733Mbps(11a/b/g/n/ac対応) 高セキュリティ VPN Plus対応 RT2600ac by Amazon ID24327
エレコム LANケーブル CAT6A 5m 爪折れ防止コネクタホワイト LD-GPA/WH5 by Amazon ID24327

結論

by Rakuten ID:15895

結論から言うと今回の結果から、採用したPluginは、「Lazy Load – Optimize Images Ver.2.3.2」です。

評価方法

例えば、以下のアドレスをGoogle Page Speed Insightsに入力して測定します。(https://harikiri.diskstation.me/myblog/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 (画像の縮小化)

総合改善度

まとめに記載したように、ごく最近まで速度に関するスコアについて知識がなかったため、関連するプラグインは、何も入れていなかった。そのときのスコアから現在までのスコアの改善度は、以下の通りです。

by Google Ads ID19417

まだまだですが、当初のことを思えば、劇的な改善度です。

PageSpeed Insightsスコア: Plugin導入前からの変遷

ルート(myblog)

長文のページ

モバイル : 2~3 → 50程度

モバイル : (未測定) → 35程度

以上

by Amaozn ID13196
by Amazon ID19245

【Amazon.co.jp 限定】HP USBメモリ 128GB USB 3.1 スライド式金属製 HPFD796L-128 GJP by Amazon - ID 24751
3Dプリンターダヴィンチ Jr. 1.0(造形サイズ15×15×15cm) - 環境に優しい土に返るPLAフィラメント - ダビンチ Jr. 1.0 XYZプリンティングジャパン by AMAZON ID21513
3Dプリンター|ダヴィンチ1.0 pro|オートキャリブレーション機能付|オープンフィラメント可|ABS対応|造形サイズ20×20×20cm|レーザー刻印機能拡張可|積層ピッチ0.02mm~|3F1AWXJP00F - XYZプリンティングジャパン by AMAZON ID21511
ABS使用可造形サイズ175×175×175mm オープンフィラメント可オートキャリブレーション機能付きレーザー刻印機能拡張可金属系PLA拡張可 3FJSPXJP00G - ダビンチ Jr.Pro X+ XYZプリンティングジャパン by AMAZON ID21509
zedela 5-in-1 USB-Cハブ【3ポート5Gbps by Amazon - ID 24751