新しいパフォーマンス指標、PageSpeed Insights と Chrome ユーザー エクスペリエンス レポート(CrUX)の更新など。
Chrome Developer Summit で、Paul Irish と私は Lighthouse の更新(Lighthouse CI、新しいパフォーマンス スコア式など)を発表しました。Lighthouse に関する大きなニュースに加え、新しいパフォーマンス指標、PageSpeed Insights と Chrome ユーザー エクスペリエンス レポート(CrUX)の更新、ウェブ エコシステムに関する Web Almanac の分析から得られた分析情報など、パフォーマンス ツールの開発に関する最新情報を発表しました。
新しいパフォーマンス指標
ユーザー エクスペリエンスの微妙な違いを測定することは、収益への影響を定量化し、改善と回帰を追跡するうえで重要です。時間の経過とともに、こうしたニュアンスを捉え、ユーザー エクスペリエンスの測定におけるギャップを埋める新しい指標が進化してきました。指標に新たに追加されたのは、W3C ウェブ パフォーマンス ワーキング グループで試験運用されている 2 つのフィールド指標(Largest Contentful Paint(LCP)と Cumulative Layout Shift(CLS))と、新しいラボ指標(Total Blocking Time(TBT))です。
Largest Contentful Paint(LCP)
Largest Contentful Paint(LCP)は、最大のコンテンツ要素がビューポートに表示されるまでの時間を示します。
Largest Contentful Paint の登場以前は、First Meaningful Paint(FMP)とSpeed Index(SI)が、最初のペイント後の読み込みエクスペリエンスをキャプチャしていましたが、これらの指標は複雑で、ページのメイン コンテンツが読み込まれたタイミングを特定できないことがよくありました。調査によると、ページ上の最大の要素がレンダリングされた時点のみに注目することで、ページのメイン コンテンツが読み込まれた時点をより正確に把握できます。
新しい Largest Contentful Paint 指標はまもなく Lighthouse レポートで利用可能になります。それまでは、JavaScript で LCP を測定できます。
合計ブロック時間(TBT)
Total Blocking Time(TBT)指標は、First Contentful Paint(FCP)からTime to Interactive(TTI)までの間でメインスレッドが入力に応答できないほど長くブロックされた合計時間を測定します。
メインスレッドで 50 ミリ秒以上実行されるタスクは長時間のタスクと見なされます。それを超えるミリ秒は、そのタスクのブロック時間にカウントされます。

ページの合計ブロック時間は、FCP と TTI の間に発生したすべての長いタスクのブロック時間の合計です。

インタラクティブになるまでの時間は、読み込みの後半でメインスレッドが落ち着くタイミングを特定するのに適していますが、合計ブロック時間は、読み込み全体でメインスレッドがどれだけ負荷がかかっているかを定量化することを目的としています。これにより、TTI と TBT が互いを補完し、バランスが取れます。
Cumulative Layout Shift(CLS)
Cumulative Layout Shift(CLS)は、ページの視覚的な安定性を測定し、ユーザーが予期しないレイアウトの変化を目にする頻度を定量化します。コンテンツが予期せず移動すると、ユーザーは非常に不満を感じます。この新しい指標は、ユーザーに発生する頻度を測定することで、この問題に対処するのに役立ちます。
計算方法と測定方法については、Cumulative Layout Shift の詳細ガイドをご覧ください。
新しい Lighthouse パフォーマンス スコアの計算式では、まもなく FMP と FCI の重要性が低下し、ページが使用可能かどうかをより適切に把握できる 3 つの新しい指標(LCP、TBT、CLS)が追加されます。

詳しくは、Lighthouse のパフォーマンス スコアリングと新しい web.dev 指標の収集をご覧ください。
PageSpeed Insights でフィールドデータ(CrUX)のしきい値が調整される
Google は過去 1 年間、Chrome ユーザー エクスペリエンス(CrUX)データを使用してフィールドのウェブ パフォーマンスを分析してきました。このデータから得られた分析情報に基づいて、フィールド パフォーマンスでウェブサイトを「遅い」、「中程度」、「速い」にラベル付けするために使用するしきい値を再評価しました。

PageSpeed Insights(PSI) では、サイトの全体的な評価を得るために、フィールドデータの合計分布の特定のパーセンタイルをそのサイトのゴールデン ナンバーとして使用します。以前のしきい値は、ファースト コンテンツフル ペイントで 90 パーセンタイル、ファースト インプット ディレイ(FID)で 95 パーセンタイルでした。
たとえば、あるサイトの FCP 分布が高速 50%、中速 30%、低速 20% の場合、90 パーセンタイルの FCP は低速セクションに含まれるため、サイトの全体的なフィールドスコアは低速になります。
これは、ウェブサイト全体でより良い分布になるように調整されました。新しい内訳は次のとおりです。
指標 | 全体のパーセンタイル | 高速(ミリ秒) | 中程度(ミリ秒) | 遅い(ミリ秒単位) |
FCP | 75 パーセンタイル | 1000 | 1000-3000 | 3,000 人以上 |
FID | 95 パーセンタイル | 100 | 100~300 人 | 300+ |
たとえば、あるサイトの FCP 分布が高速 50%、中程度 30%、低速 20% の場合、75 パーセンタイルの FCP は中程度のセクションに含まれるため、サイトの全体的なフィールドスコアは中程度になります。
PageSpeed Insights の正規 URL リダイレクト
ユーザー エクスペリエンスをできるだけ正確に測定できるように、PageSpeed Insights チームは PSI に再分析プロンプトを追加しました。新しい URL にリダイレクトされるサイトの場合は、実際のパフォーマンスをより詳細に把握するために、ランディング ページ URL でレポートを再実行するよう求められます。
![URL リダイレクトと [再分析] ボタンが表示された PSI ユーザー インターフェース](https://web.dev/static/articles/speed-tooling-evolutions-cds-2019/image/psi-user-interface-showin-f15072ccb89f.png?hl=ja)
新しい Search Console の速度レポートの CrUX
Search Console では、Chrome Dev Summit の 1 週間前に新しい速度レポートをリリースしました。Chrome ユーザー エクスペリエンス レポートのデータを使用して、サイト所有者がユーザー エクスペリエンスに関する潜在的な問題を特定できるようにします。速度レポートでは、類似した URL を自動的に「高速」、「中速」、「低速」にグループ化することで、特定の問題のパフォーマンス改善の優先順位付けに役立ちます。

ウェブ アルマナック

オープニング キーノートで、ウェブ アルマナックのリリースを発表しました。ウェブ アルマナックとは、ウェブの状態に関する統計情報とトレンドをウェブ コミュニティの専門知識と照らし合わせる年次プロジェクトです。Chrome デベロッパーとウェブ コミュニティからなる 85 人のコントリビューターが、このプロジェクトにボランティアとして参加しています。このプロジェクトでは、サイトの構築、配信、利用方法に関連するウェブの 20 の主要な側面を分析しています。ウェブ アルマナックを使って、ウェブのパフォーマンス、JavaScript、サードパーティ コードの状況について詳しく確認しましょう。
その他の情報
Chrome Developer Summit で発表されたパフォーマンス ツールのアップデートについて詳しくは、Speed tooling evolutions の動画をご覧ください。