WebFundamentalsウェブサイトの一般的なペイロードには、かなりの量のイメージと動画が含まれることがあります。プロジェクト関係者は、既存のアプリケーションからメディアリソースを減らすことなく使いたいと考えるかもしれません。このような状況では、特に関係者全員がサイトのパフォーマンスを向上させたいものの実現方法について意見が割れる場合、ジレンマが生じます。ここで便利なのが、遅延読み込みです。これは、コンテンツを減らすことなく、最初のページのペイロードと読み込み時間を短縮するソリューションです。遅延読み込みとは遅延読み込みは、ページ読み込み時に重要でないリソースの読み込みを遅らせる手法です。代わりに、重要でないリソースは必要なときに読み込まれます。イメージの場合、「重要でない」とはたいてい「オフスクリーン」と同義です。イメージ監査という形で見たことがあるでしょう。遅延読み込みの対象となるオフスクリーンのイメージを特定することです。遅延読み込みが実行されているのを見たことがあるでしょう。それは次のように行われます。ページにアクセスし、コンテンツを読みながらスクロールし始めます。イメージが最終的なイメージに置き換えられます。イメージを読み込み、スクロールによってイメージがビューポートに現れるときに、遅延読み込みされたイメージに置き換えます。イメージ遅延読み込みが実行されている例。イメージが読み込まれ(左)、ビューポートにスクロールされると、必要なタイミングで最終的なイメージが読み込まれます。遅延読み込みに詳しくない場合、このテクニックの有用性やメリットについて疑問に思うかもしれません。その点について説明します。イメージや動画を単に読み込むのではなく、遅延読み込みをするのはなぜですか。それは、ユーザーに表示されないものを読み込んでいる可能性があるからです。これにはいくつかの点で問題があります。定額制の接続では、これは最悪の問題になるわけではありません(ただし、その貴重な帯域幅を、実際にユーザーに表示される他のリソースのダウンロードに使用できるかもしれません)。データ量に上限のあるプランの場合、ユーザーに表示されないものを読み込むなら、実質的にデータ料金が無駄になる可能性があります。リソースの無駄になります。リソースがダウンロードされた後、ブラウザはそれをデコードし、そのコンテンツをビューポートにレンダリングする必要があります。リソースの使用量を減らすことができ、すべてパフォーマンス向上につながります。このガイドでは、いくつかのテクニックを取り上げ、イメージや動画を遅延読み込みするためのガイダンスと、一般的に使用されるライブラリの簡単なリストを紹介します。イメージの遅延読み込みイメージの遅延読み込みのメカニズムは理論的には単純ですが、実際のしくみは少し複雑です。つの異なるユースケースがあります。イメージの遅延読み込みから説明します。要素で使用されるイメージです。使用してそれらがビューポート内にあるかどうかを確認します。ハンドラを使用したかもしれません。よって要素の可視性を高性能かつ効率的にチェックすることができます。すべてのブラウザでサポートされているわけではありません。ブラウザ間の互換性が重要な場合は、次のセクションをご覧ください。ハンドラを使用してイメージを遅延読み込みする方法を紹介します。ハンドラに依存するコードよりも使いやすく読みやすい方法です。登録するだけでよいからです。デベロッパーが行うのは、要素が表示される場合に何をするかを決めるだけです。パターンを使用するとします。