はじめに
ページスピード対策を行っているサイトでPageSpeed Insightsの「オフスクリーン画像の遅延読み込み」の項目を解消した方法をお伝えします。
PageSpeed Insightsの「オフスクリーン画像の遅延読み込み」の解消法
オフスクリーン画像の<img>要素に対して「loading=”lazy”」 を追加しましょう。
<img src="sample.webp" alt="画像" width="400" height="300" loading="lazy">
<img>要素に対して、width、heightを指定しないとPageSpeed Insightsで「画像要素で width と height が明示的に指定されていない」という改善項目が表示されるのでwidthとheightも指定しましょう。
オフスクリーン画像とは？
オフスクリーン画像とはウェブページの初期読み込み時には画面上に表示されない画像のことです。このような画像は「loading=”lazy”」を追加して遅延読み込みさせることで、ページスピードを改善することができます。
まとめ
PageSpeed Insightsの「オフスクリーン画像の遅延読み込み」の項目を解消するには他にプラグインやJavaScriptのライブラリを使用する方法もありますが、今回紹介した「loading=”lazy”」でも十分に対応ができると思っております。ぜひサイト構築の際にはご利用ください。
