(翻訳)および遅延ロードによるWebパフォーマンスへの影響

原文:https://blog.bitsrc.io/effects-of-too-much-lazy-loading-on-performance-4dbe8df33c37

遅延ロードを適切に使用すると、Webパフォーマンスの向上に役立ちます。

現在、Lazy Loadingはアプリケーションのパフォーマンスを向上させる一般的なテクノロジーです.ロード時間を短縮し、データの使用を最適化することで、ユーザー体験を向上させます.
ただし、遅延ロードが多すぎると、アプリケーションのパフォーマンスに悪影響を及ぼす可能性があります.この文書では、遅延ロードのパフォーマンスについて説明し、遅延ロードを使用するタイミングを説明します.

遅延ロードとは?

遅延ロードは、Webページのデータが必要になるまでリソースのインポートを一時的に遅らせる便利なテクノロジーです.
現在、遅延ロードはWeb標準であり、多くの主流のWebブラウザはloading = "lazy"属性を使用して遅延ロードをサポートしている.

// with img tag
<img 
  src="bits.jpeg" 
  loading="lazy" 
  alt="an image of a laptop" 
/>

// with IFrame
<iframe 
  src="about-page.html" 
  loading="lazy">
</iframe>

遅延ロードが有効になっている場合、ユーザーがコンテンツを表示する必要がある場所にスクロールした場合にのみ、コンテンツが表示されます.

ご覧のように、遅延ロードはアプリケーションのパフォーマンスとユーザー体験を向上させます.これは、開発者が遅延ロードを選択しなければならない理由です.
しかし、遅延ロードは必ずしもアプリケーションのパフォーマンスの向上を保証するものではありません.もしそうであれば、遅延ロードがパフォーマンスに及ぼす影響について説明します.

遅延ロードのパフォーマンスへの影響

多くの研究は,遅延負荷には2つの主要な利点があり,開発者がそこから利益を得ることができることを示している.

ページロード時間(PLT):リソースロードを遅延させることで、初期ページロード時間を短縮します.

最適化

リソース使用:遅延ロードリソースによりシステムリソース使用を最適化します.この効果は、処理能力が低く、メモリが少ないモバイルデバイスに非常に効果的です.

ただし、遅延ロードが多すぎると、パフォーマンスに影響を与える可能性があります.

高速スクロール速度の低下

オンラインショップなどのWebアプリケーションがある場合は、ユーザーがすばやくスクロールして閲覧できるようにする必要があります.
これらのアプリケーションのロードを遅延すると、データのロードを待つ必要があるため、スクロール速度が低下する可能性があります.これにより、アプリケーションのパフォーマンスが低下し、ユーザー体験に問題が発生する可能性があります.

コンテンツ移動遅延

遅延ロード画像の幅と高さのアトリビュートが定義されていない場合、画像レンダリング中に明らかな遅延が発生する可能性があります.ブラウザは、初期ページをロードするときにリソースをダウンロードしないため、ページレイアウトのコンテンツサイズを知りません.
リソースをロードした後、ユーザーが特定のビューポートにスクロールすると、ブラウザはコンテンツを処理し、ページレイアウトを再変更する必要があります.これにより、他の要素が移動し、ユーザー体験が悪化する可能性があります.

コンテンツバッファ

アプリケーションが不要な遅延ロードを使用している場合、コンテンツバッファが発生する可能性があります.このような状況は、リソースのダウンロード中にユーザーがすばやくスクロールすると発生します.
この場合、特に帯域幅の低い接続で発生し、Webページのレンダリング速度に影響を与える可能性があります.

遅延ロードが必要な場合

現在、より良いWebパフォーマンスを得るために、遅延ロードを適切に使用することを考慮する必要があります.
私が後で提案する方法は、適切な場所を見つけるのに役立ちます.

1.適切な場所での適切なリソースのロード遅延

大量のリソースを持つ長いWebページがある場合は、遅延ロードの追加を検討できます.ただし、スクロールして表示するコンテンツ(fold未満)またはユーザー・ポイント以外のコンテンツにのみ遅延ロードを追加します.

バックグラウンドタスクの実行に必要なリソースは絶対に遅延してはいけません.例えば、JavaScriptコンポーネント、背景画像、または他のマルチメディアコンテンツであってもよい.これらのアイテムは遅延ロードできません.
ChromeブラウザのLighthouseツールを使用して、可能なリソースを区別して遅延ロードプロパティを追加できます.

2.遅延ロードはウェブページの使用に影響しない内容

遅延ロードは、重要度の高いリソースよりも重要なリソースを推奨します.また、エラー処理を忘れないでください.遅延ロードが予想される効果に達していない場合は、重要でないリソースをロードしないほうがより良いユーザー体験になります.
現在、すべてのプラットフォームとブラウザで遅延ロードはサポートされていません.また、ライブラリまたはJavaScriptカスタムインプリメンテーションを使用すると、すべてのユーザーに機能しない可能性があります.特に、JavaScriptが使用できないブラウザでは、これは問題かもしれません.

3.遅延ロードは検索エンジンの最適化に重要でない内容である

コンテンツのロードが遅れると、Webサイトが徐々に表示されます.つまり、初期ページをロードするときに何も含まれません.一見、遅延ロードされたページのロード速度はずっと速く、SEOページのランキングを向上させるのに役立つ可能性があります.ただし、遅延ロードの使用が多すぎると、悪影響を及ぼします.
SEOインデックスが進行中の場合、検索エンジンはサイトをスクロールしてページインデックス用のWebサイトデータを検索します.ただし、遅延ロードのため、Webスクロールではすべてのページデータを表示できません.これは、ユーザーがページと対話していないため、データをロードできないためです.従って、遅延ロードはSEOにとって有益ではない.
開発者として、SEOに必要なビジネスデータを見逃すことを望んでいません.したがって、キーワードやビジネス情報などのSEOターゲットコンテンツに対して遅延ロードを使用しないことを推奨します.

n/a.結論

遅延ロードは、Web開発者がWebページの可用性とパフォーマンスを向上させるために使用するインテリジェントなツールです.しかし、この技術を過度に使用すると、「人が多くて船が山に登る」ように、サイトの性能が低下する可能性があります.この文書では、パフォーマンスに及ぼす遅延ロードの影響に重点を置き、適切な使用タイミングを理解するためのいくつかの提案を行います.このテクノロジーをいつどこで使用するかを知っていて、このテクノロジーを注意して使用すると、大きなパフォーマンスが得られます.
この記事が役に立つことを願っています.読んでくれてありがとう!