プログレッシブ レンダリングとは何ですか?

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃導入＃＃＃

Web サイトの読み込み速度を測定しましたか? 「いいえ」の場合は、Web サイトの速度をテストするためのツールがインターネット上に多数あります。誰かを見つけて測定してください。 Google によると、ウェブサイトの読み込みが 3 秒よりも速い場合は、訪問者の合計 32% を失っていることを意味します。

したがって、Web サイトの読み込み速度を遅くする措置を講じると効果的です。そこで、開発者が Web サイトの読み込み速度を向上できるプログレッシブ レンダリングが登場します。

プログレッシブ レンダリングとは何ですか?

プログレッシブ レンダリング テクノロジについて説明する前に、まずプログレッシブ レンダリングという用語を理解しましょう。したがって、プログレッシブとは、通常の進行状況と同じように段階的に表示されることを意味し、ファイルをダウンロードまたはアップロードしたり、携帯電話のアプリを更新したりするときにも表示される可能性があります。

レンダリングの意味は、Web ページ上にコンテンツを表示することです。したがって、プログレッシブ レンダリングという用語の完全な意味は、コンテンツ全体を一度に表示するのではなく、Web ページのさまざまなコンポーネントを 1 つずつ表示することです。

これはプログレッシブ レンダリングの定義です。

プログレッシブ レンダリング

は、Web 開発者が Web ページのコードをより小さく管理しやすいチャンクに分割し、すべてのチャンクを 1 つずつ表示して Web ページのパフォーマンスを向上させる手法です。

プログレッシブ レンダリングはどのように機能しますか?

それでは、プログレッシブ レンダリングがどのように機能するかを理解しましょう。 ブラウザ上で通常の Web ページをレンダリングすると、HTML、CSS、JavaScript を含む Web ページのすべてのコンテンツが一緒に読み込まれます。ただし、プログレッシブ レンダリングでは、前のセクションで説明したように、開発者はコードをプログレッシブ レンダリング用の小さな部分に分割する必要があります。

レンダリングの最初の部分では、Web サイトはヘッダー、本文の背景、Web ページの主要な扱いにくい部分などのコンポーネントを読み込む必要があります。その後、Web サイトはコンポーネントのスタイルを設定するための CSS の読み込みを開始する必要があります。これにより、訪問者は Web ページとの対話を開始できるようになります。

その後、残りの HTML コンポーネントをロードし、CSS と JavaScript を使用してコードに動作を追加する必要があります。さらに、JavaScript を非同期でロードする必要があります。

API からデータをダウンロードまたは取得した後に画像などを表示する必要がある場合は、必ず最後に表示する必要があります。

プログレッシブ レンダリングを実現するためのさまざまなテクノロジー

次に、Web サイトにプログレッシブ レンダリングを実装するさまざまな方法を学びます。

遅延読み込み

名前が示すように、Web コンテンツの読み込みが遅れます。遅延読み込みテクノロジでは、必要な場合にのみ Web コンテンツを読み込みます。たとえば、1 つの Web ページに 100 個の画像を表示する必要があります。最初はユーザーは 10 個の画像しか表示できず、他の画像を表示するにはスクロールする必要があります。この場合、ユーザーが Web ページをスクロールすると、最初の 10 個の画像と他の画像を最初にロードできます。

このようにして、遅延読み込みテクノロジーを使用して Web ページのパフォーマンスを向上させることができます。

Webコンテンツに優先順位を付ける

プログレッシブ レンダリングのもう 1 つのアプローチは、必要なコンテンツを最初にロードすることです。たとえば、Web ページを読み込むときに、最初にインタラクティブな部分のコンテンツを表示し、次に他のコンテンツを読み込むことができます。

さらに、最初は必要な CSS のみをレンダリングできます。たとえば、API からデータを取得してから、そのデータをレンダリングする必要があります。したがって、すべての CSS を一緒にレンダリングすると、データなしの CSS もレンダリングされ、データを取得した後にレンダリングできます。

つまり、このようにして、優先度の高いコンテンツを最初に表示し、次に他のコンテンツをページに表示することができます。

なぜ開発者はプログレッシブ レンダリングを使用する必要があるのでしょうか?

ここではプログレッシブ レンダリングの利点のいくつかを説明します。

Webページの高速読み込み

プログレッシブ レンダリングの主な利点は、Web ページの速度が向上することです。 Web ページのコンテンツをチャンクに分けてロードするため、ユーザーは Web ページを開いてすぐに操作を開始できます。

ユーザーエクスペリエンスの向上

プログレッシブ レンダリングにより Web サイトの読み込み速度が向上するため、ユーザーは Web サイトをより多く操作できるようになります。ウェブサイトへの訪問者数も増加します。

Web サイトの検索エンジンの最適化を改善する

SEO では、Web ページの速度は重要な特性の 1 つです。 Google のクローラー ロボットはすべてのページをクロールし、Web サイトのコンテンツを評価します。読み込み速度が遅い場合、クローラー ボットはページをスキップし、ページ速度が 1 秒未満の場合、Web サイトを競合他社の中でランク付けします。

＃＃＃結論は＃＃＃

プログレッシブ レンダリングは、HTML、CSS、JavaScript コンテンツを小さなチャンクで、または必要なときにレンダリングすることにより、Web ページのパフォーマンスを向上させるテクノロジーです。また、プログレッシブ レンダリングを実装する 2 つの方法と、プログレッシブ レンダリングを使用する利点についても説明しました。

以上がプログレッシブ レンダリングとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。