423_html/css_WEB-ITnose

Web ページの高さを決定し、その高さに基づいて最初の画面行を取得します。最初の画面行より上のコンテンツは、時間内に表示できるかどうかによって決まります。ユーザーを維持することは非常に重要な要素です。調査によると、ユーザーは 2 秒以内に Web ページを開く速度に最も満足しています。

Fire Bird Studio

初回画面時間

Web ページの高さを決定し、その高さに基づいて最初の画面行を取得します。最初の画面行より上のコンテンツは、初めてユーザーに表示される必要があります。タイムリーに表示できないことは、ユーザーを維持する上で非常に重要な要素です。調査によると、ユーザーは 2 秒以内に Web ページを開く速度に最も満足しています。

• 初回画面時間: ユーザーが閲覧するコンテンツがレンダリングされ、ページをスクロールせずに操作できる時間を指します。
• 読み込み時間: ページ全体が一番下までスクロールし、レンダリングされてインタラクティブになるまでにかかる時間。

ユーザーがサイトにアクセスすると、ブラウザは HTML ドキュメントのリクエストを送信し、ドキュメントを受信すると、解析を開始してウィンドウ上に表示します。

このプロセスでは、2 つの非常に重要な時点があります:

• Time Of First Byte (最初のバイト時間)
• Start Render Time (レンダリング開始時間)

上記 2 つの時点が初回となります。スクリーンタイムは、以下に示すように 3 つの短い期間に分割されます:

最初のバイトの時間

最初のバイト時間が長いほど、ブラウザによるドキュメントの解析が遅くなり、最初のスクリーンタイムも長くなります。

このタイミングは HTML5 パフォーマンス API で提供されます。

最初のバイトまでの時間が長い場合、ボトルネックはネットワーク、バックエンド プログラムなどにあるはずです。

レンダリング開始時間

レンダリング開始時間とは、ユーザーの画面に最初にコンテンツの表示が開始される時間を指します。

ブラウザは最初は空白ですが、描画中にテキスト、背景、ロゴなどを含む内容が変化します。

head タグなどの非ビジュアル DOM はブラウザ ウィンドウに表示されません。つまり、ブラウザがレンダリングを開始する前に、少なくとも head タグ内のコンテンツを解析する必要があります。

通常の状況では、ドキュメント内の CSS ファイルの準備ができていれば描画を開始できます。CSS ファイルはすべて head タグに書き込まれています。したがって、bodyタグのレンダリングが開始される瞬間、またはheadタグが解析される瞬間がStart Render Timeであると考えることができます。

この機能によれば、body タグの先頭または head タグの末尾にスクリプトを埋め込んで、開始レンダリング時間を取得できます。

最初の画面の使用量を減らす方法

• 最初の画面にCSSを埋め込む
• Cssはheadに配置し、jsは