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

Lighthouse レポートの [改善案] セクションには、ページ内のオフスクリーンまたは非表示の画像がすべて、削減可能な kibibyte(KiB)単位で表示されます。操作可能になるまでの時間を短縮するには、重要なリソースをすべて読み込んだ後にこれらの画像を遅延読み込みすることを検討してください。

Lighthouse のオフスクリーン画像の遅延読み込み監査のスクリーンショット

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

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

AMP

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

Drupal

Drupal で遅延読み込み画像を構成することを検討してください。画像のフィールド フォーマッタは、lazy または eager をサポートしています。

Joomla

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

Magento

ウェブ プラットフォームの遅延読み込み機能を使用するように、商品とカタログのテンプレートを変更することを検討してください。

WordPress

オフスクリーン イメージを遅らせるか、その機能のあるテーマに切り替える機能を提供する WordPress の遅延読み込みプラグインをインストールします。AMP プラグインの使用もご検討ください。

リソース