プログレッシブ レンダリング: コンテンツ表示のパフォーマンスの向上

プログレッシブ レンダリング は、Web ページのパフォーマンス、特にコンテンツがユーザーに表示される速度を向上させるために使用される一連の技術です。ページ全体が一度に読み込まれるのではなく、ページの一部が徐々に表示および読み込まれます。目標は、コンテンツをできるだけ早く表示して、知覚的な読み込み時間、つまりページが読み込まれているとユーザーが認識する時間

を改善することです。

---

プログレッシブ レンダリングの利点

1. 表示時間の短縮 - ユーザーは最初のコンテンツをより速く表示できるため、特に低速ネットワークでのユーザー エクスペリエンスが向上します。

2. 性能の低いデバイス向けの最適化 - 性能の低いデバイスでも、遅延なく初期コンテンツをより簡単に表示できます。

3. SEO の使用法 - 検索エンジンは最初に読み込まれた要素にインデックスを付け、ページのランキングを向上させます。

---

プログレッシブ レンダリングのテクニック

プログレッシブ レンダリングに使用される技術には、画像やその他のリソースの遅延読み込み、サーバー側レンダリング (SSR)、およびクライアント側ハイドレーション コード SPA が含まれます。アプリケーション。

プログレッシブ レンダリングは、インターネットが低速だった時代には特に重要でしたが、信頼性の低いモバイル ネットワークが広く使用されているため、今日の開発でも依然として役立ちます。プログレッシブ レンダリングに使用されるテクニックをいくつか紹介します。

1. 画像の遅延読み込み (遅延読み込み)

この手法では、ページ上の画像が一度にすべて読み込まれるわけではありません。代わりに、ユーザーがページ内の画像が配置されている部分までスクロールした場合にのみ、画像が読み込まれます。この方法では、最も重要なコンテンツのみが最初に表示されるため、リソースがより経済的に使用され、ページの読み込みが速くなります。

• 最新の遅延読み込み: HTML は、 のloading="lazy" 属性をサポートするようになりました。この要素は、ユーザーが画像の近くをスクロールするまで、ページの表示部分の外側にある画像の読み込みを遅らせるようにブラウザーに指示します。例えば：

   <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" loading="lazy" alt="Opis slike">

• JavaScript スクロール追跡: JavaScript を使用してスクロール位置を追跡でき、画像が画面の表示部分に近づくと、その瞬間に画像の読み込みをトリガーできます (画像の座標を比較することによって)。画像と現在のスクロール位置)。

2. 表示コンテンツの優先順位 (オーバーレイの上にコンテンツをレンダリング)

「スクロールせずに見える範囲のコンテンツ」とは、スクロールせずにブラウザーにすぐに表示されるコンテンツを意味します。この重要なコンテンツをページにできるだけ早く表示するには、基本的な CSS や最初のページ レンダリング スクリプトなどの必要なリソースのみを読み込む必要があります。

リソースの最小化: ページを読み込むときは、ページの最初の部分をレンダリングするために必要な最小限の CSS、コンテンツ、およびスクリプトのみを含める必要があります。他のリソースは、遅延スクリプトを使用するか、DOMContentLoaded やload などのイベントを監視することによって遅延でき、最初の表示後に追加のリソースが読み込まれるようになります。

3. 非同期 HTML フラグメント

この技術を使用すると、サーバーは HTML の一部をブラウザーに送信して、ページをすぐにレンダリングできるようにし、残りの部分は連続してロードできます。このアプローチは、コンテンツがサーバーから取得される動的ページに特に役立ちます。ページの一部が最初に表示され、他の部分は後で追加されます。

4. リソースのプリロードとプリフェッチ

の使用または スタイル、スクリプト、フォントなどの重要なリソースを必要になる前にロードします。これにより、特にすぐには必要ではないがページの後半で使用されるリソースのコンテンツをより速く読み込むことができます。

5. コード分割と動的 JavaScript 読み込み

JavaScript コードを小さな部分 (チャンク) に分割し、必要な場合にのみロードすることで、ダウンロードされる最初のデータ量を削減します。

6. CSSクリティカルパス(クリティカルCSS)

最初のページ表示に最も重要な CSS のみを分離してロードし、残りは非同期でロードできます。これにより、ページの残りの部分がバックグラウンドで読み込まれている間、ビジュアル コンテンツをより高速にレンダリングできます。

7. サーバーサイド レンダリング (SSR) と静的サイト生成 (SSG)

ユーザーに送信される前にサーバー上でページの一部をレンダリングします。これにより、ユーザーは JavaScript のロードを待たずにコンテンツをすぐに表示できるようになり、パフォーマンスと SEO が向上します。

8. プログレッシブ ウェブ アプリ (PWA)

PWA テクノロジーを使用すると、ユーザーがオンラインでないときでもアプリケーションの読み込みとアクセスが可能になり、ネットワークの負荷が軽減され、インターネット接続が劣悪な状況でもコンテンツを高速に読み込むことができます。

---

結論

プログレッシブ レンダリングにより、コンテンツのレンダリングが高速化され、体感的な読み込み時間が短縮されます。インターネット接続の高速化に関係なく、モバイル デバイスの使用が増加し、モバイル ネットワークの品質が変化しているため、これらの技術は依然として役に立ちます。このようにして、ページ上の最も重要な情報に迅速にアクセスできるようになり、ユーザーのエクスペリエンスが向上します。

以上がプログレッシブ レンダリング: コンテンツ表示のパフォーマンスの向上の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。