Lighthouse レポートの [改善案] セクションには、ページ内のオフスクリーンまたは非表示の画像がすべて、削減可能な kibibyte(KiB)単位で表示されます。操作可能になるまでの時間を短縮するには、重要なリソースをすべて読み込んだ後にこれらの画像を遅延読み込みすることを検討してください。
![Lighthouse のオフスクリーン画像の遅延読み込み監査のスクリーンショット](https://developer.chrome.google.cn/static/docs/lighthouse/performance/offscreen-images/image/a-screenshot-the-lightho-886f5632a8905.png?authuser=0&hl=ja)
lazysizes を使用して画面外の画像を遅延読み込みする Codelab もご覧ください。
スタック固有のガイダンス
AMP
amp-img
を使用して画像を自動的に遅延読み込みします。画像に関するガイドをご覧ください。
Drupal
Drupal
で遅延読み込み画像を構成することを検討してください。画像のフィールド フォーマッタは、lazy
または eager
をサポートしています。
Joomla
Joomla の遅延読み込みプラグインをインストールして画面外の画像の読み込みを遅らせるか、遅延読み込み機能のあるテンプレートに切り替えてください。Joomla 4.0 以降では、「Content - Lazy Loading Images」プラグインを使用して専用の遅延読み込みプラグインを有効にできます。また、AMP プラグインの使用も検討してください。
Magento
ウェブ プラットフォームの遅延読み込み機能を使用するように、商品とカタログのテンプレートを変更することを検討してください。
WordPress
オフスクリーン イメージを遅らせるか、その機能のあるテーマに切り替える機能を提供する WordPress の遅延読み込みプラグインをインストールします。AMP プラグインの使用もご検討ください。