ウェブに関する主な指標（LCP, FID, CLS）について
2020年5月末にPageSpeed Insightsの表示が更新されて「最大コンテンツの描画（LCP）」「初回入力遅延（FID）」「累積レイアウト変更（CLS）」をウェブに関する主な指標として表示するようになりました。勉強がてらに他の関連の指標も含めてユーザーエクスペリエンス関連の指標についてまとめます。
主な指標
| 名称 | 略称 | 緑 | 橙 | 赤 | 単位 |
|---|---|---|---|---|---|
| Lighthouse score | 100-90 | 89-50 | 49-0 | - | |
| First Paint | FP | ||||
| First Contentful Paint | FCP | 0-2 | 2-4 | 4- | s |
| First Meaningful Paint | FMP | 0-2 | 2-4 | 4- | s |
| Largest Contentful Paint | LCP | 0-2 | 2-4 | 4- | s |
| Speed Index | 0-4.3 | 4.4-5.8 | 5.8- | s | |
| Time to Interactive | TTI | 0-5.2 | 5.3-7.3 | 7.3- | s |
| First CPU Idle | 0-4.7 | 4.8-6.5 | 6.5- | s | |
| Total Blocking Time | TBT | 0-300 | 300-600 | 600- | ms |
| First Input Delay | FID | 0-100 | 100-300 | 300- | ms |
| Max Potential First Input Delay | 0-130 | 130-250 | 250- | ms | |
| Cumulative Layout Shift | CLS | 0-0.1 | 0.1-0.25 | 0.25- | - |
| DOMContentLoaded Event | DCL | ||||
| Onload Event |
Lighthouse score
Lighthouseスコアは、メトリックス（FCP/LCP/TBTなどの各種指標）を加重平均による一定の重み付けで算出されています。具体的な重み付けは、下記の数値となっています。
| 指標 | v5 | v6 |
|---|---|---|
| First Contentful Paint | 20% | 15% |
| Speed Index | 27% | 15% |
| Largest Contentful Paint | - | 25% |
| First Meaningful Paint | 7% | - |
| Time to Interactive | 33% | 15% |
| First CPU Idle | - | - |
| Total Blocking Time | - | 25% |
| Cumulative Layout Shift | - | 5% |
※スコアは、上記の指標のみから算出されます。そのため、PageSpeedInsightsで指摘される他の問題を解決してもスコアへの直接の影響はありません。ただし、指摘される問題を解決すれば上記の指標が改善される可能性が高いです。
※上記表のv5/v6は、次のサイトで公開されている数値を記載しています。
Lighthouse performance scoring
100点満点をとる方法
次の表の各指標で、指定値以下とすればLighthouseスコアは、必ず100点満点になります。
| 指標 | v5 | v6 |
|---|---|---|
| First Contentful Paint | 1,350ms | 1,350ms |
| Speed Index | 1,960ms | 1,960ms |
| Largest Contentful Paint | - | 1,550ms |
| First Meaningful Paint | 1,350ms | - |
| Time to Interactive | 1,940ms | 1,940ms |
| First CPU Idle | 1,950ms | - |
| Total Blocking Time | - | 130ms |
| Cumulative Layout Shift | - | 0.03 |
※Lighthouse Scoring Calculatorを利用して算出した数値です。
Metric Scoreが100となる最大の数値を記載しています。
参考
FP / FCP / FMP
FPは、ページを最初に描画するまでの経過時間です。
FCPは、ページのコンテンツを最初に描画するまでの経過時間です。
FMPは、ページをスクロールせずに見えるコンテンツを表示するまでの経過時間です。
FMPは、Lighthouse 6.0では非推奨です。ブラウザ固有の実装によって一貫性のある結果とならないことが非推奨の要因です。
FP と FCP の違い
FCPの「コンテンツ」とは、「画像」「白以外の要素」「SVG」のことを指します。そのため、背景色が白色のみの空ページを表示した場合、FCPは計測できません。（白以外の要素がないくコンテンツを描画しないため、FCPを計算できません）
具体的には、次のようなHTMLファイルをPageSpeedInsightsで計測した場合、「Lighthouse returned error: NO_FCP. ページを読み込む際のトレースの記録中にエラーが発生しました。もう一度 Lighthouse を実行してください。（NO_FCP）」エラーを出力して計測は失敗します。
<html><head></head><body></body></html>このため、FCPは、「ページのコンテンツを最初に描画するまでの経過時間」であり、FPの「ページを最初に描画するまでの経過時間」とは異なります。
参考
Largest Contentful Paint（LCP）
LCPは、最大コンテンツの描画までの経過時間です。
LCPの「最大コンテンツ」とは、スクロールせずに見える「画像」「動画」「末端のテキスト要素の子を含むブロック要素」で最大サイズの要素です。スクロールせずに見える範囲から対象要素がはみ出している場合、見えている範囲のサイズで判定します。
LCPを高速化するためには、ページの「最大コンテンツ」を理解して、最大コンテンツを素早く表示する必要があります。最大コンテンツは、PageSpeed Insightsの「Largest Contentful Paint element」項目として確認できます。
参考
Speed Index
Speed Indexは、ページのコンテンツが視覚的に表示される速度を測定します。
具体的には、ページの最終表示と現在の表示を比較して、ページ表示の視覚的進行状態を数値として計算します。
※Lighthouseは、speedlineを使用してSpeed Indexスコアを生成しています。
※Speed Indexは、元々WebpageTest.orgによって導入された指標です。
参考
First CPU Idle
First CPU Idleは、ページが最小限のインタラクティブになるまでの経過時間です。
First CPU Idleの「最小限のインタラクティブ」とは、次の要件を満たした時です。
- 画面上のほとんどのUI要素がインタラクティブである
- ほとんどのユーザー入力が平均して妥当な時間で応答する
参考
Time to Interactive（TTI）
TTIは、ページが完全にインタラクティブになるまでの経過時間です。
TTIの「インタラクティブ」とは、次の要件を満たした時です。
- 有用なコンテンツが表示されている（FCPのコンテンツ）
- イベントハンドラーがほとんどの可視ページ要素に登録される
- ページが50ms以内にユーザー操作に応答する
※ここでの「インタラクティブ」は、document.readystateがinteractiveになるまでの経過時間とは異なります。
参考
Total Blocking Time（TBT）
TBTは、FCPからTTIまでの長いタスク（50ms以上実行されるタスク）のブロッキング部分（50ms後の時間）の合計時間です。
例としてFCPとTTIの間で25ms/50ms/75ms/100msの4つのタスクが動作した場合、TBTは(75-50)+(100-50)=75msとなります。（25msと50msのタスクは、50ms以下であるため、長いタスクとして扱われない）
TBTは、「長いタスクを減らす」「長いタスクをFCP前に実施する」「長いタスクをTTI後に実施する」「長いタスクを分割する（ことで複数の短いタスクにする）」などの方法で改善が期待できます。
参考
First Input Delay（FID）
FIDは、ユーザーが最初にページを操作した時から、ブラウザーが実際にイベントハンドラーの処理を開始できるまでの時間です。
ここでの「ページを操作」とは、「クリック」「タップ（スクロール等を除く）」などです。「マウス移動」「スクロール」「ピンチ操作（拡大縮小）」などは含みません。
FIDは、主に長いタスクによって数値が悪化します。長いタスクを処理する間ブラウザがユーザー操作に応答できないことが主な原因です。
※2020年5月末の変更以前、FIDは95パーセンタイルが基準でした。
2020年5月末の変更以降、FIDは75パーセンタイルが基準になりました。
参考
Max Potential First Input Delay
Max Potential FIDは、FCPの後で最も長いタスクの時間です。潜在的に発生しうる最大の入力遅延です。
Max Potential FIDは、「長いタスクを減らす」「長いタスクをFCP前に実施する」「長いタスクを分割する（ことで複数の短いタスクにする）」などで改善が期待できます。
※2020年5月末の変更以降表示されなくなりました。
参考
Cumulative Layout Shift（CLS）
CLSは、ページの全寿命中の予期しないレイアウトシフトのすべてのレイアウトシフトスコアの合計を測定します。
レイアウトシフトは、既存の要素が開始位置を変更したときにのみ発生します。新しい要素がDOMに追加や既存の要素の変更だけでは発生しません。ただし、変更によって他の表示要素の開始位置が変更されると発生します。
CLSは、ページの全寿命中に発生します。これは、ページ読み込み後のレイアウトシフトも含まれます。
CLSの発生要因として、次のようなものがあります。
- ユーザ操作
- ユーザ体験はとして問題なし（ただし、CLSの数値は悪化する）
- 遅延読み込み
- 事前に領域確保しておけば回避可能
- 他のページ動的変更
GoogleAdSense
広告の追加処理によりCLSが悪化することが考えられます。事前の確保領域とことなるサイズの広告が配信された場合、影響があります。自動広告による追加も例外ではありません。