ウェブに関する主な指標(LCP, FID, CLS)について

2020年5月末にPageSpeed Insightsの表示が更新されて「最大コンテンツの描画(LCP)」「初回入力遅延(FID)」「累積レイアウト変更(CLS)」をウェブに関する主な指標として表示するようになりました。勉強がてらに他の関連の指標も含めてユーザーエクスペリエンス関連の指標についてまとめます。

主な指標

名称略称単位概要
Lighthouse score100-9089-5049-0-スコア
First PaintFP最初の描画
First Contentful PaintFCP0-22-44-s最初のコンテンツ描画
First Meaningful PaintFMP0-22-44-s最初の意味のある描画
Largest Contentful PaintLCP0-22-44-s最大コンテンツの描画
Speed Index0-4.34.4-5.85.8-s速度インデックス
Time to InteractiveTTI0-5.25.3-7.37.3-sインタラクティブになるまでの時間
Total Blocking TimeTBT0-300300-600600-ms合計ブロック時間
First Input DelayFID0-100100-300300-ms初回入力遅延
Max Potential First Input Delay0-130130-250250-ms初回入力遅延の最大推定時間
Cumulative Layout ShiftCLS0-0.10.1-0.250.25--累積レイアウトシフト
DOMContentLoaded EventDCL最初のHTML文書の読み込みと解析が完了した時
Onload Eventページ全体が読み込まれた時

Lighthouse score

Lighthouseスコアは、メトリックス(FCP/LCP/TBTなどの各種指標)を加重平均による一定の重み付けで算出されています。具体的な重み付けは、下記の数値となっています。

指標v5v6API
First Contentful Paint20%15%15%
Speed Index27%15%15%
Largest Contentful Paint-25%25%
First Meaningful Paint7%-0%
Time to Interactive33%15%15%
First CPU Idle--0%
Total Blocking Time-25%25%
Cumulative Layout Shift-5%5%

※スコアは、APIのlighthouseResult.categories.performance.scoreの値です。
※スコアは、上記の指標のみから算出されます。そのため、PageSpeedInsightsで指摘される他の問題を解決してもスコアへの直接の影響はありません。ただし、指摘される問題を解決すれば上記の指標が改善される可能性が高いです。
※上記表のv5/v6は、次のサイトで公開されている数値を記載しています。
 Lighthouse performance scoring
※上記表のAPIは、lighthouseResult.categories.performance.auditRefsの値です。(2020/05/31確認)
 lighthouseResult.lighthouseVersionは、6.0.0でした。
 既にv6の計算式でスコアが計測されているようです。

100点満点をとる方法

次の表の各指標で、指定値以下とすればLighthouseスコアは、必ず100点満点になります。

指標v5v6
First Contentful Paint1,350ms1,350ms
Speed Index1,960ms1,960ms
Largest Contentful Paint-1,550ms
First Meaningful Paint1,350ms-
Time to Interactive1,940ms1,940ms
First CPU Idle1,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を高速化するためには、ページの「最大コンテンツ」を理解して、最大コンテンツを素早く表示する必要があります。最大コンテンツは、PageSpeed Insightsの「Largest Contentful Paint element」項目として確認できます。

参考

Speed Index

Speed Indexは、ページのコンテンツが視覚的に表示される速度を測定します。

具体的には、ページの最終表示と現在の表示を比較して、ページ表示の視覚的進行状態を数値として計算します。

※Lighthouseは、speedlineを使用してSpeed Indexスコアを生成しています。
※Speed Indexは、元々WebpageTest.orgによって導入された指標です。

参考

Time to Interactive

TTIは、ページが完全にインタラクティブになるまでの経過時間です。

TTIの「インタラクティブ」とは、次の要件を満たした時です。

  • 有用なコンテンツが表示されている(FCPのコンテンツ)
  • イベントハンドラーがほとんどの可視ページ要素に登録される
  • ページが50ms以内にユーザー操作に応答する

※ここでの「インタラクティブ」は、document.readystateinteractiveになるまでの経過時間とは異なります。

参考

Total Blocking Time

TBTは、FCPからTTIまでの長いタスク(50ms以上実行されるタスク)のブロッキング部分(50ms後の時間)の合計時間です。

例としてFCPとTTIの間で25ms/50ms/75ms/100msの4つのタスクが動作した場合、TBTは(75-50)+(100-50)=75msとなります。(25msと50msのタスクは、50ms以下であるため、長いタスクとして扱われない)

TBTは、「長いタスクを減らす」「長いタスクをFCP前に実施する」「長いタスクを分割する(ことで複数の短いタスクにする)」などで改善が期待できます。

参考

First Input Delay

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月末の変更以降表示されなくなりました。

参考

Max Potential First Input Delay

Cumulative Layout Shift

CLSは、ページの全寿命中の予期しないレイアウトシフトのすべてのレイアウトシフトスコアの合計を測定します。

レイアウトシフトは、既存の要素が開始位置を変更したときにのみ発生します。新しい要素がDOMに追加や既存の要素の変更だけでは発生しません。ただし、変更によって他の表示要素の開始位置が変更されると発生します。

CLSは、ページの全寿命中に発生します。これは、ページ読み込み後のレイアウトシフトも含まれます。

CLSの発生要因として、次のようなものがあります。

  • ユーザ操作
    • ユーザ体験はとして問題なし(ただし、CLSの数値は悪化する)
  • 遅延読み込み
    • 事前に領域確保しておけば回避可能
  • 他のページ動的変更

GoogleAdSense

広告の追加処理によりCLSが悪化することが考えられます。事前の確保領域とことなるサイズの広告が配信された場合、影響があります。自動広告による追加も例外ではありません。

参考

コメント