遅延読み込みを使用して読み込み速度を向上しましょう
Webサイトの一般的なペイロードに含まれる画像とビデオの部分は、重要になるかもしれません。残念ながら、プロジェクトの利害関係者は、既存のアプリケーションからメディアリソースを削減することを望まいようです。このような行き詰まりは、特にすべての関係者がサイトのパフォーマンスを向上させたいが、実施方法について合意を得ない場合、苛立たしいものになります。幸いことに、遅延読み込みは、初期ページのペイロードと読み込み時間を短縮するソリューションですが、コンテンツを無駄にすることはありません。
遅延読み込みとは何ですか？ #
遅延読み込みは、ページの読み込み時に重要ではないリソースの読み込みを延期する手法です。代わりに、こういった重要ではないリソースは、必要になる時点に読み込まれます。画像の場合、「重要ではない」は普通に「画面外」と同義です。 Lighthouseを使用して改善を検討したことがあれば、この領域でオフスクリーン画像監査の延期のフォームでガイダンスを見たことがあるかもしれません。
おそらく、遅延読み込みが実際に行われているのを見たことがあるでしょう。これは次のようになります。
- ページに訪問し、コンテンツを読みながらスクロールを開始します。
- ある時点で、プレースホルダー画像をビューポートにスクロールします。
- プレースホルダー画像がいきなり最終画像に置き換えられます。
画像の遅延読み込みの例は、一般公開プラットフォームMediumにあります。このプラットフォームは、ページの読み込み時に軽量のプレースホルダー画像を読み込み、そしてビューポートにスクロールすると遅延読み込みの画像に置き換えられます。
遅延読み込みに慣れていない場合は、この手法がどれほど有用であり、メリットは何であるか疑問に思われるかもしれません。ここで読んで調べましょう！
なぜ画像や動画を単に読み込むのではなく、遅延読み込みますか？ #
ユーザーに表示されなさそうものを読み込んでいる可能性があるためです。これにはいくつかの理由でこの問題が起こります。
- データを浪費します。計測されていない接続では、これは発生する可能性のある最悪の事態ではありません（ただし、実際にユーザーに表示される他のリソースをダウンロードするためにその貴重な帯域幅を使用することはできます）。ただし、制限されたデータプランでは、ユーザーが見ることのないものを読み込むと、お金の無駄になるかもしれません。
- 処理時間、バッテリー、およびその他のシステムリソースを浪費します。メディアリソースがダウンロードされた後、ブラウザはそれをデコードし、ビューポートにそのコンテンツをレンダリングする必要があります。
画像と動画の遅延読み込みにより、初期ページの読み込み時間、初期ページの重さ、システムリソースの使用量が削減されます。これらはすべて、パフォーマンスにプラスの影響を及ぼします。
遅延読み込みの実装 #
遅延読み込みを実装するにはいくつかの手段があります。ソリューションの選択では、サポートするブラウザーと、遅延読み込みしようとしているものを考慮する必要があります。
最新のブラウザは、画像とiframeのloading属性の使用によって有効にされるブラウザレベルの遅延読み込みを実装しています。古いブラウザとの互換性を提供したり、埋め込む遅延読み込み無しで要素で遅延読み込みを実行したりするには、独自のJavaScriptを使用してソリューションを実装できます。これを行うのに役立つ既存のライブラリも多数あります。こういったすべてのアプローチの詳細については、このサイトの投稿を参照してください。
また、遅延読み込みに関する潜在的な問題のリストと、実装時の注意すべき点をまとめました。
結論 #
画像と動画の遅延読み込みにより、サイトの初期読み込み時間とページペイロードが大幅に低下する可能性があるので、慎重にご使用ください。ユーザーは、不必要なネットワークアクティビティや、表示されない可能性のあるメディアリソースの処理コストを負担することはありませんが、必要に応じてそれらのリソースを表示することはできます。
パフォーマンス改善手法に関する限り、遅延読み込みについてはかなり議論の余地がありません。サイトにインライン画像がたくさんある場合は、不要なダウンロードを減らすのに最適な方法です。自分のサイトのユーザーとプロジェクトの利害関係者はそれを高く評価するでしょう！