著者：Jingdong Technology Hao Liang
序文: C エンド フロント エンドの研究開発として、ビジネス上の困難を克服することに加えて、パフォーマンスの最適化というより深い自己目標も必要です。この問題は大きくも小さくもありませんが、その難しさは間違いなく普通ではなく、関連する最適化の範囲は各セルの詳細なエンジニアリングです。フロントエンドのパフォーマンスを最適化するのは決して簡単なことではありません。この記事の主な内容は、フロントエンドのパフォーマンス評価指標と最適化スキームを紹介しています。
1. フロントエンドのパフォーマンス指標とは?
chrome Lighthouse の最新のルールによると、フロントエンドのパフォーマンス指標には、主に FCP (First Contenful Paint)、SI (Speed Index)、LCP (Largest Contentful Paint)、TBT (Total Blocking Time)、CLS (Cumulative Layout) が含まれます。シフト）、プロポーションは次のとおりです。
2.FCPとは？
FCP: First Contentful Paint 最初のコンテンツの描画とは、ページの読み込みの開始から、ページ コンテンツの任意の部分 (テキスト、画像、背景画像、SVG 要素、またはこれは、重要な指標の 1 つである読み込み速度認識の尺度です。
例：
上の図から、ページの読み込みの開始からページのレンダリングの完了までのタイムラインで、FCP が 2 番目のフレームで発生し、テキストと画像の最初のバッチが画面にレンダリングされていることがわかります。
ページのコンテンツの一部はレンダリングされていますが、ページのすべてのコンテンツがレンダリングされているわけではありません; これが First Content Paint (FCP) と Largest Content Paint (LCP) の最も重要な違いです。
FCP パフォーマンス値: 最初のコンテンツ描画のレンダリング時間は 1.8 秒以内に制御する必要があります。
次の方向から FCP を最適化できます。
3.スピードインデックスとは？
SI: Speed Index は、ページの読み込み中にコンテンツが視覚的に表示される速さを測定します。Lighthouse は、最初にブラウザでページをロードするビデオをキャプチャし、フレーム間の視覚速度を計算します。簡単に言えば、何かを持っている状態からコンテンツを完全に表示するまでの Web ページの目に見える充填速度です。
速度指数指標値:
次の方向から Speed Index メソッドを最適化できます。
4. LCP とは何ですか? （強調）
LCP: Largest Contentful Paint 最大の (最も意味のある) コンテンツ ペインティングは、ページが最初にロードを開始する時点に基づいて、表示領域に表示される最大の画像またはテキスト ブロックが報告されたときの相対時間を指します。
LCP 指標値:
1. LCP が考慮している要素は何ですか?
次の関連要素が主に考慮されます。
2. LCP 要素のサイズはどのように定義されますか?
最大コンテンツ描画 (LCP) の要素サイズは、可視領域でユーザーに見えるサイズを参照するため、要素が可視領域を超えて拡張されている場合、または要素がクリップまたは含まれている場合は、可視領域に基づいて考慮されます。目に見えないオーバーフロー。これらの部分は要素サイズにカウントされません。
画像要素のサイズについては、インジケーターは表示サイズと元のサイズを比較し、小さい方のサイズを採用します。たとえば、表示サイズは二重画像に使用され、元のサイズは引き伸ばされて拡大された画像に使用されます。画像;
テキスト要素の場合、要素のサイズはテキスト ノード (すべてのテキスト ノードを含む最小の四角形) のサイズです。
警告: CSS を介してすべての要素に設定されたマージン、パディング、または境界線は考慮されません。また、全画面の背景画像を設定しても、画面の可視領域に占める割合が比較的大きい要素（背景画像に浮いている要素）がある場合、背景の可視領域が小さくなります。画像の露出の場合、最大のコンテンツが の可視領域の最大の要素を選択します。
また、要素は、レンダリング後にユーザーに表示される場合にのみ、最大のコンテンツ要素と見なされます。
3. LCP 描画時間レポート
ネットワークまたは技術的な理由により、Web ページは通常セグメントで読み込まれるため、最大の要素も変化します。
この変更に対応して、ブラウザーは識別用の最初のフレームを描画した直後に、最大のコンテンツ ペイント タイプの PerformanceEntry (パフォーマンス時間リスト内の単一のメトリック データを表す; performance.getEntries() は時間リスト データを取得します) を配布します。エレメント。後続のフレームをレンダリングした後、最大のコンテンツ要素が変更されると、ブラウザーは別の PerformanceEntry をディスパッチします。
ページの要素 (要素) は、レンダリングされてユーザーに表示される場合にのみ、最大のコンテンツ要素と見なされます。ロードされていない画像はレンダリングされたとは見なされないため、最大のコンテンツ要素とは見なされません。フォント ブロック中にフォントを使用するテキストについても同様です。このような場合、小さい方の要素が最大の要素として報告されますが、大きい方の要素がレンダリングされると、別の PerformanceEntry オブジェクトが報告されます。
遅延ロードされた画像とフォントに加えて、新しいコンテンツ (インターフェース要求など) が利用可能になると、ページは新しい要素コンテンツを DOM に追加する場合があります。新しい要素が以前の最大のコンテンツ要素よりも大きい場合、ブラウザーは新しい PerformanceEntry オブジェクトも報告します。
現在最大のコンテンツ要素が表示可能領域から削除された (または DOM から削除された) 場合、より大きな要素のレンダリングが完了するまで、その要素は最大のコンテンツ要素のままであり、 performanceEntry オブジェクトは変更されません。
ユーザーがページを (タップ、スクロール、またはキーを押すことによって) 操作すると、通常、ユーザーの操作によってページの元のコンテンツが変更されるため、ブラウザーは PerformanceEntry オブジェクトの報告をすぐに停止します。
セキュリティ上の理由から、ブラウザーは、Timing-Allow-Origin ヘッダーがないクロスオリジン オブジェクトの画像レンダリング タイムスタンプを取得できず、画像読み込みタイムスタンプのみを取得できます。Timing-Allow-Origin ヘッダーを正しく設定すると、より正確なインジケーター値を取得できます。
4. 要素のレイアウトと要素のサイズが変更されると、LCP に影響を与えるもの
ケース 1: 要素のサイズまたは位置を変更しても、新しい LCP 候補は生成されません。表示領域内の要素の初期サイズと位置のみが考慮されます。
ケース 2: 最初に表示可能領域内にレンダリングされ、その後表示可能領域外に削除された要素は、依然として表示可能領域内の初期サイズを報告します。
ケース 3: 画面の可視範囲外でレンダリングが完了している間、画面に遷移する要素は報告されません。
例: コンテンツの読み込み時の要素の最大変更数
最初の例では、新しいコンテンツがレンダリングされるため、最大の要素が変更されます。
2 番目の例では、レイアウトの変更により、以前は最大だったコンテンツが表示可能領域から削除されました。
遅延コンテンツが初期最大要素ほど大きくない場合、LCP は初期値を取ります。
5. 最大の要素は重要ではない
ページで最も重要な要素は最大の要素ではなく、現時点では開発者評価指数が最も重要な要素です。
6. メイン コンテンツのレンダリングの高速化、LCP 値の低下
ページレンダリングのパフォーマンスに影響を与える主な理由は次のとおりであり、それらを最適化することで、LCP 指標の値を下げることができます。
(1) サーバーの応答速度:
これは、ブラウザがサーバーからコンテンツを受信するのに時間がかかるほど、ユーザーが画面にコンテンツをレンダリングするのに時間がかかることを意味します。より高速なサーバーは、LCP を含むさまざまな指標の負荷値に直接影響します。
最適化できる方向:
(2) レンダリングをブロックする JS および CSS:
The browser needs to parse the DOM tree before render the content. 解析プロセス中に、外部スタイル シート (<link rel="stylesheet">) または同期 JavaScript タグ (<script src="main.js">) が遭遇した場合、解析を一時停止します。
したがって、スクリプトとスタイルはレンダリングをブロックするリソースであり、FCP の遅延を引き起こし、それが LCP の遅延を引き起こします。したがって、重要でない JS と CSS の読み込みを遅らせることで、Web ページのメイン コンテンツの読み込み速度が向上します。
CSS のブロック時間を短縮する方法:
レンダリングをブロックする JavaScript の量を減らすと、レンダリングが高速になり、LCP 値が低くなる可能性があります
JS のブロック時間を短縮する方法:
(3) リソースの読み込み速度が遅い:
CSS または JavaScript のブロック時間の増加はパフォーマンスの低下に直接影響しますが、他の多くの種類のリソースの読み込みにかかる時間も描画時間に影響を与える可能性があります。
LCP に影響を与える要素は次のとおりです。
最適化：
(4) クライアントのレンダリング:
React、Vue、Angular などのフレームワークで構築されたシングルページ アプリケーションは、クライアントでロジックを完全に処理します。
最適化：
5. TBT とは何ですか?
TBT: 合計ブロック時間 合計ブロック時間は、ユーザー インタラクションに応答してページがブロックされた合計時間です。TBT = LCP (最初の最大コンテンツ ペイント) と対話可能時間の間のすべての長時間実行タスクのブロック部分の合計。ページ読み込みの応答性を測定するための重要な指標です。
50 ミリ秒を超えるタスクは長いタスクです。50 ミリ秒を超える時間は、ブロック部分です。
例: 90 ミリ秒のタスクが検出され、ブロッキング部分が 40 ミリ秒 (90 - 50 = 40)
TBT 指標:
最適化：
6.CLSとは？
CLS: Cumulative Layout Shift (CLS) は視覚的な安定性の重要な尺度です。ページの存続期間中に発生するすべての予期しないレイアウト シフトの中で最大のレイアウト シフト部分のシーケンスです。
ページ コンテンツの予期しないオフセットは、ほとんどの場合、非同期のリソースの読み込み、またはページ上の既存のコンテンツの上に DOM 要素を動的に追加することによって発生します。犯人は、未知のサイズの画像またはビデオ、実際にレンダリングされたフォントがフォールバック フォントよりも大きくまたは小さくなっている可能性があります。
CLS 指標:
注: レイアウト オフセットは、既存の要素の開始位置が変更された場合にのみカウントされます。DOM に新しい要素が追加された場合、または既存の要素のサイズが変更された場合は、レイアウト シフトとしてカウントされません。要素の変更によって他の可視要素の開始位置が変更される場合にのみ、オフセットと呼ばれます。
計算式：レイアウトオフセットスコア＝インパクトスコア×距離スコア
影響スコア: 前のフレームと現在のフレームのすべての不安定な要素のコースウェア領域セット (総可視領域の一部を占める) は、現在のフレームの影響スコアです。
距離スコア: 1 フレーム内で不安定な要素が移動する最大距離 (水平または垂直) を表示可能領域の最大サイズ寸法 (幅または高さのいずれか大きい方) で割った値を指します。
CLSの一般的な原因:
最適化：
上記の5つの指標は、現在のフロントエンドのパフォーマンス指標の考慮点であり、問題の原因と最適化方法です。各最適化ポイントは多くの知識と学習ポイントを拡張できるため、フロントエンドの最適化作業リンクは依然として非常に長く、1 つのポイントの最適化効果は明らかではないかもしれませんが、5 つのポイントすべてが最適化されている場合、確実に質的な飛躍。
実際のプロジェクトでは、まずフロントエンド自体から始めて、それ自体を最適化した後にコラボレーション項目を最適化します。
さらに, フロントエンドの最適化は持続可能で長期的なものです. ツール技術のアップグレードを繰り返すことで、プロジェクトのパフォーマンスも向上します. 最適化の作業は、一度だけ行うのではなく、継続する必要があります.
フロントエンドのパフォーマンス最適化の道のりは長く険しいですが、その道のりは近づいており、特別な研究が進んでおり、最終的に目標は確実に達成されるでしょう。
参照記事：https://web.dev/ https://developer.chrome.com/