この記事は、Googleの公式ツールであるLighthouseと組み合わせて、最新のフロントエンドページのパフォーマンススコアリング基準を分析し、関連するフロントエンドプロジェクトを改善および最適化するために、さまざまなパフォーマンス指標を誰もがよりよく理解できるようにします。
1.フロントエンドページのパフォーマンスおよび分析ツール
ユーザー維持はページの読み込みパフォーマンスと密接に関連しているため、フロントエンドページのパフォーマンスは常に誰もが注目し続ける領域です。Googleの統計によると、ページへのアクセス時間は1秒から3秒に増加し、ユーザーのバウンス率は32％増加しました。
フロントエンドページのパフォーマンスの評価は、一般に2つの形式で行われます。1つはパフォーマンス分析ツールを使用してWebページのさまざまな指標をスコアリングおよび評価する方法、もう1つはパフォーマンスモニタリングを使用してパフォーマンスAPIまたはカスタム埋め込みポイントを介してユーザーネットワークにレポートする方法です。実際の訪問状況、そして統計分析を続けます。
ユーザーの統計はより現実的ですが、ページパフォーマンスの統一された定量的基準を設定するために、標準のスコアリングツールを使用してページパフォーマンスを評価することを選択することがよくあります。
パフォーマンス分析の初期段階では、ロードイベントとDOMContentLoadedイベントがトリガーされた時刻の確認など、クロム開発者ツールからWebページを分析します。その後、Webページアナライザー、WebPageTest、Yslowなどの一連のパフォーマンス分析ツールがありました。
googleが開発したLighthouseを開発者ツールのタブに正式に組み込んだので、Lighthouseを標準の評価ツールと見なします。
Lighthouseは、オープンソースのWebページのパフォーマンス分析ツールであり、ページのベストプラクティスに関するいくつかの関連する推奨事項を提供します。chrome DevToolsで直接使用されることに加えて、ブラウザプラグイン（chromeおよびFirefox）またはnpmパッケージ（node apiまたはCLI）の使用もサポートします。
GoogleのWebページ測定やPageSpeedInsightなどのツールはすべて、ページを分析するためにLighthouseと呼ばれます。
次に、ページのパフォーマンスをスコアリングする方法
1.灯台の反復とパフォーマンスインデックスの変更
Lighthouseの最初のオープンソースバージョンは2016年までさかのぼることができます。現在（2020年10月）最新バージョンは6.4.1であり、89バージョンが繰り返されています。過去数年間、Lighthouseはパフォーマンス指標の選択を更新しています。
Googleの最新の6.Xバージョンでは、5.Xバージョンと比較して、3つの新しいパフォーマンスインジケーターが更新されました。FMP（最初の意味のあるペイント）、FCI（最初のCPUアイドル）、およびmpFID（最大の潜在的な最初の入力遅延）が削除されました。 ）;
TBT（Total Blocking Time）、LCP（Largest Contentful Paint）、CLS（Cumulative Layout Shift）を追加しました。これらの指標については、後で詳しく説明します。
Lighthouseの以前の5.Xバージョン
現在の灯台（バージョン6.X）
2.ページパフォーマンススコアの計算方法
次の図に示すように、ページパフォーマンスセクションで、Lighthouseは6つの主要なインジケーターの現在のパフォーマンスを統合して、ページパフォーマンススコアを計算します。
最新の6.X計算方法によると、各パフォーマンスインデックスの値は、そのインデックスのスコアに対応します。たとえば、上の図のFCP、SI、LCP、TTI、TBT、CLS、およびその他の値では、対応する個々のスコアは順番に78、62、37、5、99、92ポイントです。一般的に、値が小さいほど、インデックススコアは高くなります。
これら6つの指標の対応する重みは15％、15％、25％、15％、25％、5％であり、合計パフォーマンススコアは図の60ポイントの加重平均によって計算されます。
各指標値の具体的な計算方法とそれに対応するスコアを知りたい場合は、記事の最後にある資料5と6を参照してください。
3.主要なパフォーマンス指標
Lighthouseの6.0バージョンでは、削除された主要なパフォーマンスインジケーターは、FMP（最初の意味のあるレンダリングフレーム）、FCI（最初のCPUアイドル）、およびユーザーmpFID（潜在的な最大最初の入力遅延）です。
現在のバージョンでインジケーターを選択するための基礎をよりよく理解するために、これら3つの廃止されたインジケーターの定義から始めましょう。
1. FMPとは何ですか、FCPとの違いは何ですか
FMPについて説明する前に、まずFirst Contentful Paint（FCP）を紹介する必要があります。これは最初のコンテンツレンダリング時間です。
名前が示すように、ブラウザのFirst Page Paintイベントが初めてトリガーされる限り、その瞬間はFCPです。ただし、この時点でレンダリングされるものは必ずしも重要なページ情報ではありません。たとえば、頭のあるアクションバーのみが描画されるか、表示されている要素でさえレンダリングされない場合があります。Lighthouse 6.0でも保持されていましたが、パフォーマンススコアの重みが23％から15％に減少しました。
したがって、FCPを指標として使用して、ユーザーの観点からページのパフォーマンスを正確に測定することはできません。
これに関連して、FMP（First Meaningful Paint：最初の意味のあるレンダリングフレーム）が誕生しました。公式の定義によれば、FMPとは、ページが読み込まれてから、ほとんどまたはメインのコンテンツが最初の画面に表示されるまでの時点を指します。
それでは、FMPの時点を確認する方法として、最初に最も基本的な計算方法を見てみましょう。
まず、レイアウトオブジェクトの数を計算します（LayoutAnalyzerテスト計算を使用します。詳細については、資料17を参照してください）。
下の図からわかるように、ページの読み込みプロセスは、実際には、レイアウトオブジェクトが徐々にレイアウトツリーに入り、レンダリングされるプロセスです。
layoutAnalyzerはレイアウトオブジェクトの数を収集します。と呼ばれるカウンターがあります
LayoutObjectsThatHadNeverHadLayout、初めて追加されたレイアウトオブジェクトの数。
テストの結果、他のカウンターと比較して、最も変化する瞬間は、ページの最も重要な要素がレンダリングされる瞬間であることがよくあります。
したがって、FMPインジケーターの計算方法は次のとおりです。LayoutObjectsThatHadNeverHadLayout（最大のレイアウト変更に続くペイント）。
もちろん、上記が当てはまらないシナリオがいくつかあります。
a）ページが長い場合、最初の画面の表示オブジェクトの数よりも非表示のレイアウトオブジェクトの数が増える場合があります。現時点では、FMPは不正確です。
b）Webフォントをロードする場合、テキストは劣化したフォントでレイアウトされますが、デフォルトでは、ロード開始の開始から3秒以内に描画が実行されないため、FMPの計算にも影響します。
シナリオ1では、FMPはこの問題を解決するためにレイアウトの重要性（レイアウトの重要性）の概念を導入しました。シナリオ2では、FMPは統計時間を遅らせて、インジケーターがページの状況をより合理的に反映するようにしました。より詳細な解決策については、資料18を参照してください。
また、Googleは、上記のFMPのさまざまなシナリオで200ページ近くをテストし、ページのスクリーンショットを手動で表示して、ユーザーが感じるFMPの精度と比較しました。結果は次のとおりです。
ただし、FMPは、主に次の2つの理由により、最終的に6.0で廃止されました。
- 実稼働環境では、FMPはページの微妙な変更に敏感すぎるため、結果に一貫性がなくなる可能性があります。
- このインジケーターの定義は、ブラウザーの特定の実装の詳細にさらに依存しており、参照用の標準がありません。
2.FMPに代わるLCPはこちら
FCPとFMPの欠点については前の章で説明しました。そのため、W3Cパフォーマンスチームは、ユーザーがページのメインコンテンツを表示する時間をより正確に反映する適切な指標を探していました。
ページのパフォーマンスに関する多くの議論によると、ページのメインコンテンツが読み込まれているかどうかを測定するためのより正確な方法、つまりLCP（Largest Contentful Paint）がついに見つかりました。
LCPは、最大のコンテンツ要素がウィンドウにレンダリングされる時間を指します。この指標はLighthouse6.0で正式に追加され、最終的なパフォーマンススコアでは、最大25％の重みがあります。
LCPは、FCP以外に定義するのが最も簡単な指標である必要があります。定義から、比較のために選択される要素と要素のサイズを決定する方法の2つの重要なポイントしかないことがわかります。
公式文書によると、最大のコンテンツフル要素の考慮には、次の要素が含まれます。
- <img>
- <svg>の<image>
- <ビデオ>
- url（）関数を使用して背景画像の要素をロードします
- テキストノードのブロックレベル要素またはインラインテキストの子要素が含まれます
要素のサイズをどのように決定しますか？主に次の4つのルール：
- ビューポートに表示されている要素のサイズ。表示領域を超えているか、クリップされている、隠されているなどの場合、要素のサイズには含まれません。
- 画像要素の場合、サイズは画像の実際のサイズと元のサイズの小さい方の値、つまり最小（実際のサイズ、元のサイズ）です。
- テキスト要素の場合、テキストをカバーできる最小の長方形領域のみを使用します
- すべての要素について、マージン、パディング、ボーダーなどはカウントされません
この指標に対するGoogleの評価は次のとおりです。LCPは非常に重要でユーザー中心の指標です。知覚レベルでのページの読み込み速度を反映します。ページのメインコンテンツの最大のコンテンツ要素が読み込まれる時点を示します。LCPページが短いと、ユーザーはページがより早く利用可能であると感じることができます。
3.放棄されたFCIとは何ですか。また、なぜTTIと密接に関連しているのですか。
FCI（First Cpu Idle：First Cpu Idle）、このインジケーターは、ページが最小インタラクティブ（最小インタラクティブ）標準に達するまでにかかる時間を測定するために使用されます。
最小限のインタラクティブな確認は、次の2つの条件を満たす必要があります。
a）画面上のほとんどのUI要素はインタラクティブです
b）ページはほとんどのユーザーの入力に応答し、平均時間は妥当な範囲内です
TTI（Time To Interactive：ページインタラクティブ時間）は、ページが完全にインタラクティブな状態に達するのに必要な時間を指します。
完全にインタラクティブとは、次の3つの条件が同時に満たされることを意味します。
a）FCPの後、ページは有用なコンテンツを提示しました
b）ほとんどの表示ページ要素について、イベントコールバックが登録されています
c）ユーザーの操作に対するページの応答は50ミリ秒以内です
2017年に、FirstInteractiveインジケーターはFirstInteractiveとConstantlyInteractiveの2つのインジケーターに分割されました。翌年の7月に、First InteractiveインジケーターはFCIに名前が変更され、ConstantlyInteractiveはTTIに名前が変更されました。FCIとTTIの2つのインジケーターは、ユーザーの操作の応答を反映するインジケーターのペアであることがわかります。
では、最小で完全にインタラクティブな計算はどのように計算されますか？特定の計算方法を導入する前に、これら2つの指標があいまいであり、さまざまな状況下で継続的に最適化および改善できることを知っておく必要があります。
- FCIの最小インタラクティブ時間
メインスレッドのタイムラインで、FMPから開始し、特定のタスクが終了した後、長さf（t）の時間ウィンドウWを見つけます。Wが、どの期間でも250msを超える長さの連続タスクセットがなく、前後1秒以内に長いタスクがないことを満たしている場合（jsの実行時間が50msを超えるタスクは長いタスクです）、タスクが終了する時間は、私たちによって定義されます。 FCI。ここで、f（t）= 4 e ^（-0.045 t）+1。
下図の赤いボックス内の時点はFCIです
具体的な導出プロセスについては、資料11を参照して、FCIがあいまいな概念である理由をより深く理解してください。
- TTIの完全にインタラクティブな時間
ネットワークとメインスレッドのタイムラインから、最初の5秒のウィンドウ期間Wを見つけます。これは、W期間中に満たされます。2つ以下の同時ネットワーク要求と、常に50ミリ秒を超える長いタスクはありません。そして、Wの前の最後の長い任務の終わりは、私たちがTTIと呼ぶものです。
下の図の赤いボックスに示されている時点はTTIです。
ある時点でFCIはTTIよりも意味があると指摘する人もいますが、それらの違いは、Lighthouseが2つの同様の指標を保持するにはまだ十分ではありません。
したがって、Lighthouse 6.0では、最終的な選択はFCIの代わりにTTIを使用することです。
4.mpFIDと新しいTBTインジケーター
mpFID（最大潜在的な最初の入力遅延）は、ユーザー入力からページが実際にイベントコールバックの処理を開始するまでの潜在的な（可能な）最大遅延時間を指します。
mpFIDの具体的な計算方法は、FCPの開始からTTIの終了までの期間にjsの実行時間が最も長いタスクを選択し、消費時間から50msを差し引くことです。
ただし、mpFIDは最大遅延時間を表すだけであり、ユーザーが入力した実際の遅延時間とは異なります。ユーザーの入力によって異なる時間に取得されたFIDも異なるため、mpFIDはユーザー入力に対するページの応答時間を実際には反映しません。
5.Xバージョンでパフォーマンススコアを計算する場合、mpFIDの重みは0であり、スコアには関与しません。このインジケーターはレポートに表示されなくなりましたが、実際にはJSONデータに保持されており、mpFIDは、引き続き公式に認識されている主要なユーザーエクスペリエンスインジケーターでもあります。
では、TBT（Total Blocking Time）とは何ですか？また、パフォーマンスレポートでFIDの代わりにTBTを使用する必要があるのはなぜですか？
定義を最初に見てください。TBTは、ユーザー入力に応答するときにページがブロックされた合計時間を指します。
具体的な計算方法は比較的明確で、FCPからTTIまでのすべての長いタスクをカウントし、ブロックされたパートタイム（TBT）を合計します。ブロッキング時間とは、ロングタスクの実行時間が50msを超える部分を指します。たとえば、ロングタスクを70ms実行した場合、ブロッキング時間は20msになります。
TBTはmpFIDよりも安定した指標であり、ユーザー入力に対するページ応答の平均遅延をより正確に反映できることがわかります。
5.新しいCLS
CLS（累積レイアウトシフト：累積レイアウトシフト）は、ビジュアルインターフェイスの安定性を測定するために使用されるインジケーターです。
このデータの取得は、Layout Instability API（詳細はリファレンス14を参照）によって提供され、計算方法は次のとおりです。
レイアウトシフトスコア=影響の割合*距離の割合
影響率とは、ウィンドウ全体への影響を指します。たとえば、次の図のテキストはウィンドウ全体の50％を占め、次のフレームは前のフレームから25％下に移動するため、ページ全体の75％に影響するため、影響の割合は0.75になります。
距離の割合がわかりやすくなります。ウィンドウ全体に対する変更された距離の比率です。たとえば、上記の例では、距離の割合が25％移動すると0.25になります。
要約すると、図に示されているデモのCLS値は0.75 * 0.25 = 0.1875です。詳細な計算方法については、資料13および14を参照してください。
CLSが実際にユーザーエクスペリエンスに与える影響の例を見てみましょう。次の図に示すように、ユーザーはキャンセルボタンをクリックしたいのですが、ページレイアウトが突然変更され、確認ボタンが以前にキャンセルされた位置に表示されます...
CLSは、ユーザーエクスペリエンスに基づく新しいパフォーマンス評価インデックスであることがわかります。
現在、新しい指標としてのCLSの重量は大きくなく、わずか5％ですが、Lighthouseは、次のメジャーバージョンで重量を増やすことをすでに検討しています。
6.常に存在しているスピードインデックス
Speed Index（SI）は、ページに表示されているコンテンツの塗りつぶし速度を測定するために使用されるインデックスです。計算プロセスでは、オープンソースツールのスピードライン（データ16）を使用します。
Speedlineは、ページにビデオを録画し、最初のフレームと最後のフレームの間の時間差をカウントすることによって、速度インデックスの値を計算します。
SIの最終スコアは、データベース内の実際のWebサイトのSIを比較することによって計算されることに注意してください。現在のSIスコアとスコアリング基準を次の表に示します。
第四に、要約と展望
上記の指標の交換プロセスを振り返ると、FMPからLCP、FCIからTTI、FIDからTBTのいずれであっても、パフォーマンス指標の選択は現在、より安定した方向に進んでいることがわかります。指標の定義はますます増えています。簡潔で明確であり、計算方法は標準化される傾向があります。
ただし、ここには特効薬はなく、すべての指標には制限があることも知っておく必要があります。多くのシナリオでは、スコアが低いとは見なされません。これは、必然的にページエクスペリエンスが悪いことを意味します。これらの指標の背後にある原則を理解した場合にのみ、パフォーマンススコアと組み合わせてページをより科学的に評価できます。
パフォーマンス関連のテクノロジーはより迅速に更新されるため、記事に欠落がある場合は、修正についてお問い合わせください。
5、参考資料
- モバイルページの速度に関する新しい業界ベンチマークをどのように積み上げるかをご覧ください
- Performance.timing Api
- Lighthouse6.0の新機能
- Webバイタル
- 灯台スコア計算機
- 灯台のパフォーマンススコア
- WebPageTestデモ
- 最初の意味のあるペイントまでの時間
- 最初のインタラクティブで一貫してインタラクティブ
- 最大のコンテンツフルペイント（LCP）
- 最初のインタラクティブで一貫してインタラクティブ
- MercadoLibreがWebVitals（TBT / FID）向けに最適化した方法
- 累積レイアウトシフト（CLS）
- レイアウトの不安定性
- スピードインデックス
- スピードライン
- レイアウトアナライザー
- 最初の意味のあるペイントまでの時間
著者：黄文家