ウェブサイトの一般的なペイロードには、画像と動画の大部分が占める割合が大きくなることがあります。残念ながら、プロジェクト関係者は既存のアプリケーションからメディア リソースを削減したくない場合があります。そのような状況は、関係者全員がサイトのパフォーマンスを改善したいものの、その方法について合意が得られない場合などに、ストレスを感じることになります。幸い、遅延読み込みは、最初のページ ペイロードと読み込み時間を短縮し、コンテンツを無駄にしないソリューションです。
遅延読み込みとは
遅延読み込みは、ページ読み込み時に重要でないリソースの読み込みを遅らせる手法です。代わりに、これらの重要でないリソースは必要に応じて読み込まれます。画像に関しては、「重要でない」は「画面外」と同義です。Lighthouse を使用して改善の機会を探ったことがある方は、画面外イメージの監査を延期するという形で、この分野のガイダンスを目にしたことがあるかと思います。
![Lighthouse の [画面外画像の遅延] 監査のスクリーンショット。](https://web.developers.google.cn/static/articles/lazy-loading/image/a-screenshot-the-defer-o-8f47961e24d4d.png?hl=ja)
遅延読み込みの実際の動作はご覧になったことがあるかもしれません。その流れは次のようになります。
- ページにアクセスし、コンテンツを読んでスクロールし始めます。
- ある時点で、プレースホルダ画像をビューポートまでスクロールすると、
- プレースホルダ画像が突然最終的な画像に置き換えられます。
画像の遅延読み込みの例として、一般的なパブリッシング プラットフォームの Medium をご覧ください。このプラットフォームは、ページの読み込み時に軽量のプレースホルダ画像を読み込み、ビューポートにスクロールされると遅延読み込み画像に置き換えます。
遅延読み込みに詳しくない場合、この手法がどれほど有用で、どのようなメリットがあるのか疑問に思われるかもしれません。以下で詳しくご説明します。
画像や動画をただ読み込むのではなく遅延読み込みするのはなぜですか？
ユーザーに表示されないものを読み込む可能性があるからです。これにはいくつかの理由から問題があります。
- データの無駄使いです。定額制の接続では、これは最悪の事態にはなりません（ただし、その貴重な帯域幅を、実際にユーザーに表示される他のリソースのダウンロードに使用する可能性があります）。一方、限られたデータプランでは、ユーザーにまったく表示されないものを読み込むことは、事実上費用の無駄になる可能性があります。
- 処理時間、バッテリー、その他のシステム リソースが無駄になります。メディア リソースがダウンロードされると、ブラウザはそれをデコードし、そのコンテンツをビューポートにレンダリングする必要があります。
画像と動画の遅延読み込みは、最初のページの読み込み時間、最初のページのデータ量、システム リソースの使用量を削減します。これらはすべてパフォーマンスにプラスの影響を与えます。
遅延読み込みの実装
遅延読み込みを実装する方法はいくつかあります。選択するソリューションは、サポートされているブラウザと、遅延読み込みの対象を考慮する必要があります。
最新のブラウザでは、ブラウザレベルの遅延読み込みが実装されています。これは、画像や iframe で loading 属性を使用することで有効にできます。古いブラウザとの互換性を確保する場合や、組み込みの遅延読み込みを使用せずに要素の遅延読み込みを実行するには、独自の JavaScript を使用してソリューションを実装します。これを行う際に役立つ既存のライブラリも多数あります。これらすべてのアプローチの詳細については、このサイトの投稿をご覧ください。
また、遅延読み込みの潜在的な問題と実装時の注意事項のリストもまとめています。
おわりに
画像と動画の遅延読み込みを慎重に使用すると、Core Web Vitals など、サイトの初期読み込み時間とページ ペイロードが大幅に減少する可能性があります。ユーザーは不要なネットワーク アクティビティ（低速接続でのネットワーク競合など）やメディア リソースの処理コストを発生させることはありませんが、必要に応じてリソースを表示できます。
パフォーマンス改善の手法に関しては、遅延読み込みが合理的に理解できる余地はありません。サイトにインライン画像が多数ある場合は、不必要なダウンロードを削減する上でまったく問題ありません。サイトのユーザーや プロジェクト関係者からも高い評価を受けるでしょう。