このページは Cloud Translation API によって翻訳されました。

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

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

Elizabeth Sweeny

Chrome Developer Summit で、Paul Irish と私は、Lighthouse の更新（Lighthouse CI、新しいパフォーマンススコア式など）を発表しました。Lighthouse の大きなニュースに加え、新しいパフォーマンス指標、PageSpeed Insights と Chrome ユーザーエクスペリエンスレポート（CrUX）の更新、Web Almanac のウェブエコシステム分析から得た分析情報など、優れたパフォーマンスツールの開発を紹介しました。

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

ユーザーエクスペリエンスの微妙な違いを測定することは、それが最終収益に与える影響を定量化し、改善と回帰を追跡するための鍵となります。時間の経過とともに、こうしたニュアンスを捉え、ユーザーエクスペリエンス測定におけるギャップを埋める新しい指標が進化してきました。指標に新しく加わったのは、Largest Contentful Paint（LCP）と Cumulative Layout Shift（CLS）という 2 つのフィールド指標です。これらは W3C Web Performance Working Group で開発中です。もう 1 つは、新しいラボ指標である合計ブロッキング時間（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 を測定できます。

Total Blocking Time（TBT）

Total Blocking Time（TBT）指標は、First Contentful Paint（FCP）から Time to Interactive（TTI）までの間に、入力の応答を妨げるのに十分な時間メインスレッドがブロックされた合計時間を測定します。

タスクは、メインスレッドで 50 ミリ秒を超えて実行された場合、長時間とみなされます。ミリ秒を超えた分は、そのタスクのブロック時間にカウントされます。

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

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

Time to Interactive は、負荷の後半でメインスレッドが落ち着くタイミングを特定するのに適していますが、Total Blocking Time は、負荷全体を通してメインスレッドの負荷を定量化することを目的としています。このようにして、TTI と TBT が互いに補完し合い、バランスを取っています。

Cumulative Layout Shift（CLS）

Cumulative Layout Shift（CLS）は、ページの視覚的な安定性を測定し、予期しないレイアウトシフトが発生する頻度を定量化します。コンテンツの予期せぬ移動はストレスを感じるものですが、この新しい指標では、ユーザーに対して発生している頻度を測定することで、その問題に対処できます。

レイアウトの不安定性がユーザーに悪影響を及ぼす可能性があることを示すスクリーンキャスト。

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

Lighthouse の新しいパフォーマンススコア式では、まもなく FMP と FCI を重視せず、3 つの新しい指標（LCP、TBT、CLS）を追加します。これらの指標により、ページが使用可能であると感じられるタイミングをより正確に把握できるようになります。

Lighthouse v6 では、主な負荷パフォーマンス指標は Speed Index、Largest Contentful Paint、Time To Interactive、First Input Delay、Max Potential First Input Delay、Total Blocking Time、Cumulative Layout Shift が予測可能性の主な指標です。

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

PageSpeed Insights でフィールドデータ（CrUX）のしきい値を調整

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

サイトの全体的な評価を行うために、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 週間前に新しい Speed レポートを公開しました。Chrome ユーザーエクスペリエンスレポートのデータを使用して、サイト所有者がユーザーエクスペリエンスの潜在的な問題を特定できるようにします。速度レポートでは、類似の URL のグループが「Fast」、「Moderate」、「Slow」のバケットに自動的に割り当てられ、特定の問題のパフォーマンス改善の優先順位付けに役立ちます。

ウェブの年鑑

オープニングの基調講演で、Google は Web Almanac の開始を発表しました。これは、ウェブの状況に関する統計情報とトレンドをウェブコミュニティの専門知識とマッチングする、年 1 回のプロジェクトです。Chrome デベロッパーとウェブコミュニティで構成された 85 人のコントリビューターが、このプロジェクトにボランティアとして参加しました。このプロジェクトでは、サイトの構築、配信、経験の方法に関する 20 の主要な側面を分析しています。ウェブのパフォーマンス、JavaScript、サードパーティコードの状態について詳しくは、ウェブアルゴリズムをご覧ください。

詳細

Chrome Developer Summit のパフォーマンスツールに関する最新情報については、Speed ツールの進化に関する以下の動画をご覧ください。