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

Lighthouse レポートの [最適化] セクションには、ページ内のすべての画面外画像や非表示の画像が一覧表示され、削減できる可能性がある画像(KiB)が表示されます。操作可能になるまでの時間を短縮するために、重要なすべてのリソースの読み込みが完了した後でこれらの画像を遅延読み込みすることを検討してください。

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

Lazysizes で画面外画像の遅延読み込みを行うもご覧ください。

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

AMP

amp-img で画像を自動的に遅延読み込みする。画像のガイドをご覧ください。

Drupal

画像の遅延読み込みが可能な Drupal モジュールをインストールします。このようなモジュールには、画面外の画像を遅延させてパフォーマンスを改善する機能があります。

Joomla

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

Magento

商品とカタログのテンプレートを変更して、ウェブ プラットフォームの遅延読み込み機能を利用することをおすすめします。

WordPress

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

関連情報