スピードツールの進化: Chrome Developer Summit 2019 のハイライト

新しいパフォーマンス指標、PageSpeed Insights と Chrome ユーザー エクスペリエンス レポート（CrUX）の更新など。

Elizabeth Sweeny

Chrome デベロッパー サミットで、Paul Irish と私は Lighthouse のアップデート（Lighthouse CI、新しいパフォーマンス スコア式など）を発表しました。Lighthouse のビッグニュースに加え、新しいパフォーマンス指標、PageSpeed Insights と Chrome ユーザー エクスペリエンス レポート（CrUX）のアップデート、Web Almanac によるウェブ エコシステムの分析から得られたインサイトなど、優れたパフォーマンス ツールの開発についてもご紹介しました。

新しいパフォーマンス指標

ユーザー エクスペリエンスの微妙な違いを測定することは、収益への影響を定量化し、改善と回帰を追跡するうえで重要です。時間の経過とともに、こうしたニュアンスを捉え、ユーザー エクスペリエンスの測定におけるギャップを埋める新しい指標が進化してきました。指標のストーリーに最近追加された 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）のしきい値が調整される

過去 1 年間、Google は Chrome ユーザー エクスペリエンス（CrUX）データを使用して、現場からのウェブ パフォーマンスを分析してきました。このデータから得られた分析情報に基づいて、フィールド パフォーマンスでウェブサイトを「遅い」、「中程度」、「速い」にラベル付けするために使用するしきい値を再評価しました。

サイトの全体的な評価を行うために、PageSpeed Insights（PSI）は、フィールド データの合計分布の一定のパーセンタイルをそのサイトのゴールデン ナンバーとして使用します。以前に使用したしきい値は、First Contentful Paint は 90 パーセンタイル、First Input Delay（FID）は 95 パーセンタイルです。

たとえば、あるサイトの FCP 分布が高速 50%、中速 30%、低速 20% の場合、90 パーセンタイルの FCP は低速セクションに含まれるため、サイトの全体的なフィールドスコアは低速になります。

これは、ウェブサイト全体でより良い分布になるように調整されました。新しい内訳は次のとおりです。

たとえば、あるサイトの FCP 分布が高速 50%、中程度 30%、低速 20% の場合、75 パーセンタイルの FCP は中程度のセクションに含まれるため、サイトの全体的なフィールドスコアは中程度になります。

PageSpeed Insights の正規 URL リダイレクト

ユーザー エクスペリエンスをできるだけ正確に測定できるように、PageSpeed Insights チームは PSI に再分析プロンプトを追加しました。新しい URL にリダイレクトされるサイトの場合は、実際のパフォーマンスをより詳細に把握するために、ランディング ページ URL でレポートを再実行するよう求められます。

新しい Search Console の速度レポートの CrUX

Search Console では、Chrome Dev Summit の 1 週間前に新しい速度レポートをリリースしました。Chrome ユーザー エクスペリエンス レポートのデータを使用して、サイト所有者がユーザー エクスペリエンスに関する潜在的な問題を特定できるようにします。速度レポートでは、類似した URL を自動的に「高速」、「中速」、「低速」にグループ化することで、特定の問題のパフォーマンス改善の優先順位付けに役立ちます。

ウェブ年表

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

その他の情報

Chrome Developer Summit で発表されたパフォーマンス ツールのアップデートについて詳しくは、Speed tooling evolutions の動画をご覧ください。