オフスクリーン画像の遅延読み込みはa3 Lazy Loadプラグインで即解消！

PageSpeed Insightsでサイト表示スコアを測ると思いのほか点数が伸びないことはありませんか？

そこで改善提案も表示されますが、①「オフスクリーン画像の遅延読み込み」と言う項目があります。これが改善できると当サイトの場合は②「0.72秒」表示が早くなるそうです。

ページの表示速度が3秒を超えると直帰率が上がると言われているのでコンマ何秒かでも表示速度の改善はPVアップに直結します。

やるっきゃない！

と言う事で当サイトでも「オフスクリーン画像の遅延読み込み」対策をしてみたので記事にします。

結論は他のプラグインも試したけど「a3 Lazy Load」がベストでしたよ！と言う記事です。設定内容も含めて大公開します。

目標は「オフスクリーン画像の遅延読み込み」の合格！

この記事での目標は改善できる項目欄に「オフスクリーン画像の遅延読み込み」がでないことです。合格すると「合格した監査」欄に項目が移されるのでそこを目指します。

使ったプラグインは③「a3 Lazy Load」です。普通に公開されている物なのでプラグインの新規追加から検索してインストール＆有効化するだけです。

このプラグインの良いところは特に設定変更せずに初期設定のままでスコアが改善することです。有効化したところでPageSpeed Insightsスコアを計測してみたところ、45点と未対策の頃より2点改善しました。

そして無事に「改善できる項目」から「オフスクリーン画像の遅延読み込み」が無くなりました！

そして「合格した監査」の欄に④「オフスクリーン画像の遅延読み込み」が移動しています。改善提案にあった0.72秒の表示時間短縮ができたことになります。0.7秒の短縮は大きいですね。

よく他のブロガーの方で「Lazy Load」を推奨する記事を見ましたが、当サイトで検証した結果、上記の「a3 Lazy Load」程、改善しませんでした。

ちなみに⑤「Lazy Load」も通常のプラグインで公開されているのでインストール＆有効化するだけで使用できます。

この「Lazy Load」の大きなメリットは⑥「設定」が全く不要な点です。先に紹介した「a3 Lazy Load」も初期設定から変更不要で簡単に使えましたが、この「Lazy Load」は更に上を行っており、そもそも設定項目がありません。

当サイトの環境で「Lazy Load」を有効化すると画像の遅延読み込みどころか、待てども暮らせど一部の画像が表示されませんでした…。当サイトの場合、記事トップに貼っている⑦「アイキャッチ画像」が表示されませんでした。

PageSpeed Insightsでスコアを計測してみましたが、点数は伸びず未対処より更にマイナス1点の42点でした。

そして改善できる項目に⑧「オフスクリーン画像の遅延読み込み」が表示されています。改善による効果が0.63秒となっているので未対処の時より0.1秒は短縮できた計算になります。

もう一つ画像の遅延読み込み方法としてCocoonの高速化機能が使用できます。

設定方法はダッシュボード内のCocoon設定の中より⑨「高速化」を選びます。その中の「Lazy Load」設定から⑩「Lazy Loadを有効にする」にチェックを入れて、⑪「変更を保存」を選択します。

複雑な設定もなくこれだけで使えるのはメリットですね。しかしブログテーマにCocoonを使用している人限定の方法なのでその点では対象者が絞られます。

PageSpeed Insightsでスコアを計測してみましたところ、点数は「a3 Lazy Load」使用時と同じ45点でした。

ただし改善できる項目に⑫「オフスクリーン画像の遅延読み込み」が表示されています。改善による効果が0.45秒となっているので未対処より0.27秒は短縮できた計算になります。それでも3分の1程度しか改善できていない計算になります。

今回は3種類の方法を試しましたが、「a3 Lazy Load」がベストだと言う結果になりました。今回使用したプラグイン、機能はどれも詳細な設定を触る必要が無く、インストール＆有効化するだけで使えるのは手間いらずでした。

関連記事です。PageSpeed Insightsスコアがたったの3分で平均15点アップ！サーバ応答時間（TTFB）も劇的に改善した方法の紹介です。