【WordPress】 良い Lazy Load と良くない Lazy Load 【#np2020】

気まぐれにGoogleの「PageSpeed Insights」をやってみたらPC向けにはまあまあ良い点が出たものの、画像の遅延読み込み「 Lazy Load」(ページをスクロールしていくのに従って画像が順次読み込まれていくヤツ)を使えと怒られたので、WordPressのプラグインで対応してみました。

画像の圧縮は別のプラグイン「Imagify」でやっているので、今回入れたのはLazy Loadだけをやってくれるシンプルなものです。



Lazy Load by WP Rocket




「Imagify」が非常に使いやすかったので、その作者であるWP Rocketのプラグインを選んでみました。インストール後最小限の設定で使えたのは良かったんですが、残念なことにこのプラグインを入れるとページがちらつくんですよね。このブログはページ最上部にメニューバーがありますが、ページ読み込み直後にこれが一瞬でかくなる。始めはCSSファイルの読み込みが遅延しているのかなと思ったのですが、そうではなくてメニューの画像を一旦非表示にしてから表示するのか、その仕組みがこのブログの作りと合わなかったのが原因でした。

最初は仕方ないかと思っていたんですけど、何回も見てるときになってきて……残念ながらアンインストール。



a3 Lazy Load




「Lazy Load by WP Rocket」でダメだったので、もしかしたらLazy Load自体がこのブログと合わないんじゃないかと思ったんですが、ダメ元でもうひとつ。これも入れただけで動作する親切設計で、なおかつ細かい設定も出来る(特定のクラスはLazy Loadさせない、といった設定も可能)便利なプラグイン。肝心のページ崩れはというと……このプラグインでは全く問題なしでした!詳しく調べてはいないけど、動作のさせ方に違いがあるんでしょうね。


そしてこれを入れて再度「PageSpeed Insights」をやってみた結果がこちらです。




おおお!95点!すごい!いろいろと機能持たせてる割にこの結果はすごいなあ。自分のブログがサクサク見れて感動してます。まああと5点を埋めるのはちょっと難しいかなと思いますけど……



ちなみに:モバイル向けは残念な感じ




頑張って改善してみたけどそれでも60点止まりでした。厳しい。

ちなみに一番怒られてるのは「テキスト圧縮の有効化」。すでにサーバ側でgzipしてるんですけど、一部のファイルがCloudFrontでキャッシュされているせいで、圧縮されてないんですね(キャッシュ有効時間はデフォルトの24時間)。それさえ解決出来れば、もう少しは良くなるのかなと思います。