2019年PageSpeed Insights 「オフスクリーン画像の遅延読み込み」への対処方法

2018年11月からページスピードインサイト（PageSpeed Insights）で仕様変更がありました。以前と比較してチェック項目が増え、スコア付が厳しくなりました。特に「オフスクリーン画像の遅延読み込み」という項目がスコア減少に大きく影響しています。今回はこの「オフスクリーン画像の遅延読み込み」への対処方法を解説します。

「オフスクリーン画像の遅延読み込み」とはどのようなことか？

まず「オフスクリーン画像の遅延読み込み」とは何を意味しているのでしょうか？ ページスピードインサイトの注釈には次のように記載があります。

オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにして、インタラクティブになるまでの時間を短縮することをご検討ください。

要は画面表示されていない部分への画像の読み込みを止めましょうということです。

該当ページが縦に長い場合、モニターに表示されていない部分の画像を読み込んでいることが原因で画面描写が完了しないこともあります。特にスマートフォンの場合、PCよりも画面サイズは小さいです。ディスプレイで表示されていない部分の画像読み込みで画面表示が完了していないということは確かにストレス以外になりません。これを画面が表示されたときに画像を読み込むように改善するだけでページスピードインサイトのスコアは劇的に変わります。例えば改善前のスコアがこちら。

それが改善するとこのように変化します。

画面が表示されたときに画像を読み込む方法

画像遅延読み込みの方法としては弊社はJavaScriptを利用して非同期読み込みをするのが良いと考えます。非同期読み込みのJavaScriptはいくつかあります。弊社で全てを試した訳ではないので最適解とは言い切れないかもしれませんが、「lozad.js」は使いやすいです。使って便利なのは次の点です。

• 単体で動く（jQueryとか他のライブラリを必要としない）
• 画像（IMGタグ）だけでなく、背景画像にもiframeにも使用可能である

特にiframeの遅延読み込みにも対応していることは有り難いです。YouTube動画を埋め込むとページ内のDOMノード数が増えます。DOMノード数が増えるというのは簡単にいうとHTMLタグの数が増えるということです。DOMノード数が増えると「過大な DOM サイズの回避」に影響します。ページスピードインサイトには次のように注釈があります。

ブラウザ エンジニアは、ページに含まれる DOM のノード数が 1,500 個を超えないようにすることを推奨しています。ツリーの深さは 32 要素まで、子や親の要素数は 60 個までにするのが最適です。DOM サイズが大きいと、メモリの使用量が増え、スタイルの計算に時間がかかり、レイアウトのリフローというコストが発生します。

動画やGoogle MAP、SNSなど外部ファイルを埋め込むとページスピードインサイトのスコアに影響があります。なので、単純に貼り付けるのは控えた方が良いです。Lozad.jsの使い方はこちらをご覧ください。

▼IntersectionObserverベースな、遅延読み込みライブラリのLozad.jsを紹介する
https://qiita.com/yukagil/items/369a9972fd45223677fd