オフスクリーン画像の遅延読み込みを行う

Lighthouse レポートの [機会] セクションには、ページ内のオフスクリーンまたは非表示の画像がすべて、キビバイト（KiB）で削減可能な容量とともに表示されます。重要なリソースをすべて読み込んだ後にこれらの画像を遅れて読み込むようにして、操作可能になるまでの時間を短縮することをご検討ください。

lazysizes を使用して画面外の画像を遅延読み込みする Codelab もご覧ください。

スタック固有のガイダンス

AMP

amp-img を使用して画像を自動的に遅延読み込みします。画像に関するガイドをご覧ください。

Drupal

Drupal で画像の遅延読み込みを設定することを検討してください。画像のフィールド フォーマッタは lazy または eager に対応しています。

Joomla

Joomla の遅延読み込みプラグインをインストールして画面外の画像の読み込みを遅らせるか、遅延読み込み機能のあるテンプレートに切り替えてください。Joomla 4.0 以降では、「Content - Lazy Loading Images」プラグインを使って、専用の遅延読み込みプラグインを有効にできます。また、AMP プラグインの使用も検討してください。

Magento

ウェブ プラットフォームの遅延読み込み機能を活用できるように、ご使用のサービスとカタログのテンプレートを編集することを検討してください。

WordPress

WordPress の遅延読み込みプラグインをインストールすると、画面外の画像の読み込みを遅らせたり、遅延読み込み機能のあるテーマに切り替えたりできます。AMP プラグインの使用もご検討ください。

リソース

• オフスクリーン画像の遅延読み込みを行う監査のソースコード