1. TOPTOP
  2. Webサービス
  3. Google

PageSpeed InsightsのLighthouseで「オフスクリーン画像での遅延読み込み」が指摘される〜a3 Lazy Loadでスコアの改善

pagespeed_insights_lighthouse_ewww_1_0

PageSpeed Insightsの速度スコアにLighthouseが導入されましたね。自分は2018年11月中旬ぐらいに画面が変更されて祈ることに気がつきました。LighthouseはChromeのプラグイン(拡張ツール)として公開されていましたが、PageSpeed Insightsにも導入されたようです。

スマホに厳しいLighthouse

lighthouse_a3_lazy_load_1

記事によっては多少スコアに差が出ますが概ね「遅い(25点~30点程度)」と判定されます。

pagespeed_insights_lighthouse_ewww_1_2

以前のPageSpeed Insightsでは、スマホは「速い(80点程度)」と判定されていましたので、かなり違います。この状態を放置すると、主にスマホで見られるような記事の検索順位は、かなり下げられると考えています。

改善できる項目の第1位「適切なサイズの画像」

lighthouse_a3_lazy_load_2

新しいPageSpeed Insightsでも最適化提案として、「改善できる項目」を列挙してくれます。自分の場合、その筆頭として挙げられた項目が「オフスクリーン画像での遅延読み込み」です。遅延読み込みを行うことで6.9秒の改善が見込めると判定されました。

プラグイン「a3 Lazy Load」の活用

そこで「オフスクリーン画像での遅延読み込み」を行うために活用できるプラグインがa3 Lazy Load(新しいタブで開く)です。当エコテキブログでは、WP Super Cacheをインストール・有効化しています。遅延読み込みのプラグインとバッティングしないかどうか非常に気になるところです。

a3 Lazy LoadとWP Super Cacheはバッティングしない

ただ公式ディレクトリに上がっているa3 Lazy Loadの概要やWordPressサポートフォーラムに投稿されているFAQを見ると、a3 Lazy LoadとWP Super Cacheはバッティングしないとのこと

a3 Lazy Loadでスコアが改善

lighthouse_a3_lazy_load_3

a3 Lazy Loadをインストール・有効化をしたのち設定画面(Setting)を開き、「Threshold」を400とします。

lighthouse_a3_lazy_load_4

同じ記事について、再度PageSpeed Insightsでスコアを計測すると8点改善しました。

lighthouse_a3_lazy_load_5

また「オフスクリーン画像での遅延読み込み」によって、読み込み速度が2.7秒(= 6.9秒 – 4.2秒)速くなりました。