このページで: [隠れる]
遅延読み込みは、ページを再読み込みせずにコンテンツを動的に読み込む最新のWeb実装です。. これは、Webページに挿入してから、訪問者のWebブラウザから正しく読み取って適用する必要がある特別なコードに依存しています。. この記事では、その仕組みと利点の概要を説明します.
遅延読み込みとは何ですか？ウェブサイト構築でどのように実装できますか?
遅延読み込みは、単純なアプローチに従うプログラミングパターンに基づく標準的なWebデザイン手法です。: オブジェクトは必要な場合にのみロードされます. ウェブサイト構築の用語で, とも呼ばれます 非同期ロード, これは、Webサイトのコンテンツと要素が必要に応じて読み込まれることを意味します ページを更新せずに.
このメカニズムは、主に2つの主要なポイントの画像に使用されます: 後 アバブザフォールド コンテンツが読み込まれるか、特定の条件が満たされる. これはまた提供します パフォーマンスの向上 サーバーの. これは、ページが一番下までスクロールされていない場合に証明されます, 最後に配置された画像は読み込まれません.
これにより、帯域幅だけでなく節約できます (トラフィックの多いサイトでは高額になる可能性があります), だけでなく、Webブラウザの速度を節約します. Web開発者によると, がある いくつかのアプローチ これはWeb開発者が行うことができます:
- コード分割 — これは、開発者がさまざまなテクノロジーに適用されるコード部分を分割することに依存しています: JavaScript, CSS, およびHTML. 全体をより小さな部分に分割し、それをさまざまなオブジェクトやリソースにリンクすることによって. 最小限のコードがWebブラウザに送信されます, これにより、ページの処理時間が大幅に改善されます.
- JavaScriptの最適化 — スクリプトをモジュールとして扱うことにより、JavaScriptコードを延期することができます. これは、を適用することによって行われます type =” module”宣言.
- CSSコードの最適化 — CSSリソースは、レンダリングをブロックするリソースと見なされます。つまり、有効なシートが読み込まれたときにのみ、処理されたコンテンツが読み込まれます。. 考えられる方法は、CSSファイルを個別のファイルにリンクすることです。.
- フォントの最適化 — 遅延テキストレンダリングは、レンダリングツリーが構築されるまで遅延されるフォント要求の結果です。. これはCSSを使用してオーバーライドできます.
Webサイトでの画像の遅延読み込みを実装する方法?
画像に使用することにはいくつかの利点があります, 特に、WordPressやJoomlaなどの複雑なCMSシステムを使用してサイトを構築する場合. これらは通常、DOMオブジェクトをコンテナーとして使用してコンテンツを表示するようにプログラムされたJavaScriptコードを実装します. ほとんどの実装では, 特定のサイトの一部であるスクリプトは、DOMが実行されるまで待機します. 非同期で読み込まれる画像は、バウンス率 —高負荷のためにサイトを離れるユーザーと閲覧を続けるユーザーの比率.
昨年、ネイティブ仕様は、デスクトップユーザーとモバイルユーザーの両方のすべての主要なWebブラウザーに実装されました. これは、Web開発者がタグを使用して画像のそのような仕様を実装できることを意味します. これはできます Webページの読み込み時間を大幅に短縮 画像は最もリクエストの多いアセットタイプであるため. これは、このアプローチのWebサイトを使用して画像が挿入された場合を意味します, 訪問者はページをはるかに速くロードできます. 同時に, Webサイトの運営者は、帯域幅の要求を大幅に削減します.
この方法はほとんどのWeb開発者に人気がありますが, 一部のソフトウェアは、タグを正しく読み取らず、状況によっては指定された動作に直面する場合があります. そのような場合, より良いアプローチを提供する他のソリューションがある可能性があります. 現代的なアプローチは、 Inersection Observer API. これは、変更の変更を非同期的に監視するWeb開発メカニズムです。 (交差点) 祖先要素またはトップレベルドキュメントのビューポートと比較した特定の要素の. 手短に, さまざまなタイプのWebコンテンツへの遅延読み込みを活用します, 画像を含む. このAPIで使用される一般的なシナリオは次のとおりです:
- 画像やその他のコンテンツは、訪問者が特定のページを下にスクロールしたときに読み込まれるようにプログラムできます。
- の実装 無限スクロール コンテンツの多いページ
- 広告収入計算のためのバナー追跡と広告レポート
- 訪問者への可視性に基づいたアニメーション化プロセスの決定
Web開発者が使用できるもう1つの方法は、 Lozad.jsJSライブラリ. これはパフォーマンスが最適化されています, ライト, 依存関係のない使いやすいレイジーローダー. これは、サイトに完全に実装するために追加のjQueryコードが必要ないことを意味します.
開発者は注意して、バグがないか複雑な状況でコードをテストする必要があります. 間違ったコードは、正しく表示されない休止状態のページにつながる可能性があります. Howtohosting.guideは、引き続きWeb開発の傾向を監視し、読者に役立つコンテンツを提供します。.