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

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

Elizabeth Sweeny
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 ミリ秒以上実行されるタスクは長時間のタスクと見なされます。それを超えるミリ秒は、そのタスクのブロック時間にカウントされます。

ブロッキング時間が 100 ミリ秒の 150 ミリ秒のタスクを表す図。

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

メインスレッド時間 270 ミリ秒のうち、ブロック時間の合計が 60 ミリ秒の 5 つのタスクを表す図。

インタラクティブになるまでの時間は、読み込みの後半でメインスレッドが落ち着くタイミングを特定するのに適していますが、合計ブロック時間は、読み込み全体でメインスレッドがどれだけ負荷がかかっているかを定量化することを目的としています。これにより、TTI と TBT が互いを補完し、バランスが取れます。

Cumulative Layout Shift(CLS)

Cumulative Layout Shift(CLS)は、ページの視覚的な安定性を測定し、ユーザーが予期しないレイアウト移動に遭遇する頻度を定量化します。コンテンツが予期せず移動されると、大きなストレスを感じる場合があります。この新しい指標では、その問題がユーザーで発生する頻度を測定することで、この問題に対処できます。

レイアウトの不安定性がどのようにユーザーに悪影響を及ぼすかを示すスクリーンキャスト。

計算方法と測定方法については、Cumulative Layout Shift の詳細ガイドをご覧ください。

新しい Lighthouse パフォーマンス スコアの計算式では、まもなく FMP と FCI の重要性が低下し、ページが使用可能かどうかをより適切に把握できる 3 つの新しい指標(LCP、TBT、CLS)が含まれるようになります。

Lighthouse v6 では、読み込みパフォーマンスの主要な指標として First Contentful Paint、Speed Index、Largest Contentful Paint が使用されます。操作可能になるまでの時間、初回入力遅延、初回入力遅延の最大推定時間、合計ブロック時間は、インタラクティビティの主要な指標です。Cumulative Layout Shift は、予測可能性の主要な指標です。

詳しくは、Lighthouse のパフォーマンス スコアリングと新しい web.dev 指標の収集をご覧ください。

PageSpeed Insights でフィールドデータ(CrUX)のしきい値が調整される

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

FCP と FID の「遅い」、「速い」、「中程度」の速度の分布を示す 2 つの棒グラフ。

サイトの全体的な評価を行うために、PageSpeed Insights(PSI)は、フィールド データの合計分布の一定のパーセンタイルをそのサイトのゴールデン ナンバーとして使用します。以前に使用したしきい値は、First Contentful Paint は 90 パーセンタイル、First Input Delay(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 ユーザー インターフェース

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

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

Search Console の速度レポート。

ウェブ年表

CDS 2019 で Web Almanac を発表する Dion Almaer。

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

その他の情報

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