ページとサイトの品質をより効果的に測定して最適化するための、PageSpeed Insights の最新情報について学びましょう。
長年にわたり、PageSpeed Insights（PSI）は、フィールドデータとラボデータの両方をワンストップで提供できるサービスへと進化してきました。Chrome UX レポート（CrUX）と Lighthouse 診断情報から情報を統合し、ウェブサイトのパフォーマンス向上に役立つ分析情報を提供します。
本日、PSI の最新バージョンをリリースいたします。PSI は スピード ツールセットの重要な要素ですが、PSI コードベースは 10 年前のものであり、多くのレガシー コードが含まれているため、再設計が必要でした。この機会に、PSI のインターフェース関連の問題に対処しました。この問題により、ユーザーがレポートを操作しづらいことが時々ありました。主な目標は次のとおりです。
- 合成環境から得られたデータと現場のユーザーから収集されたデータを明確に区別することで、UI をより直感的にします。
- UI で Core Web Vitals の評価がどのように計算されるかを明確に伝えます。
- マテリアル デザインを活用して、PSI の外観をモダン化しました。
この記事では、今年後半にリリースされる PSI の新機能について説明します。
最新情報
PSI UI の再設計は、レポートデータの表示を改善し、レポートで利用可能なデータの明確さと粒度を高めることを目的としています。新しい UI は、より直感的で、デベロッパーがページのラボとフィールドのパフォーマンス分析情報をすばやく見つけられるようにすることを目的としています。UI の基本的な変更点は次のとおりです。
フィールド データとラボデータの明確な分離
フィールドデータとラボデータが明確に区別されるように UI を変更しました。[フィールドデータ] と [ラボデータ] のラベルは、データの意味とその有用性を示すテキストに置き換えられました。また、[フィールドデータ] セクションを一番上に移動しました。スコアの出所が不明にならないよう、従来のラボベースのパフォーマンス スコア（現在は上部に表示されています）は、[ラボデータ] セクションに移動されました。
Core Web Vitals 評価
以前はフィールドデータで「合格」または「不合格」という単一の単語として表示されていた Core Web Vitals の評価結果が、個別のサブセクションとして、独自のアイコンとともに表示されるようになります。
Core Web Vitals の評価プロセスに変更はありません。ウェブに関する主な指標の FID、LCP、CLS は、ページレベルまたはオリジン レベルで集計できます。3 つの指標すべてで十分なデータがある集計の場合、3 つの指標の 75 パーセンタイルが [良好] であれば、その集計はウェブに関する主な指標の評価に合格します。そうでない場合、集計は評価に合格しません。集計に FID データが不足している場合、LCP と CLS の両方の 75 パーセンタイルが「良好」であれば、評価は合格となります。LCP または CLS のいずれかのデータが不足している場合、ページレベルまたはオリジンレベルの集計は評価できません。
モバイルとパソコンのパフォーマンスのラベル
上部のナビゲーション メニューを変更し、レポート ページの中央にモバイルとパソコンのリンクを追加しました。リンクが簡単に表示されるようになり、データが表示されているプラットフォームが明確に示されるようになりました。これにより、ナビゲーション バーもすっきりしました。
オリジンの概要
現在、送信元のすべてのページの CrUX スコアの集計値を示す送信元の概要は、チェックボックスをクリックすると表示されます。このレポート セクションは、[フィールドデータ] セクションの新しいタブ [オリジン] に移動されました。
その他の役立つ情報
レポートの各フィールドとラボカードの下部に、サンプリングされたデータに関する次の詳細情報を共有する新しい情報セクションが追加されました。
- データ収集期間
- 訪問時間
- デバイス
- ネットワーク接続
- サンプル数
- Chrome のバージョン
この情報により、ラボデータとフィールド データの違いを明確にし、これまで 2 つのデータソース（ラボとフィールド）の違いが不明確だったユーザーをサポートできます。
ビューを開く
フィールドデータ セクションにドリルダウン機能を追加し、Core Web Vitals 指標の詳細を表示できる「表示を拡張」機能が新しく追加されました。
ページ画像
フィールドデータのすぐ横に表示されていた、読み込まれたページの画像を削除しました。読み込みシーケンスを表示するページの画像とサムネイルは、ラボデータ セクションで確認できます。
プロダクトの最新のドキュメントについては、https://developers.google.com/speed/docs/insights/. をご覧ください。
web.dev/measure の更新
パフォーマンス ツールボックス内のさまざまなツール間の不整合を減らすため、web.dev/measure を更新し、PageSpeed Insights API を直接使用できるようにしました。
以前は、デベロッパーが PSI ツールと /measure の両方からレポートを実行すると、Lighthouse の数値が異なっていました。差異の主な理由の一つは、/measure がすべてのテストを米国から開始していたことです（以前は米国に拠点を置くクラウド バックエンドがあったため）。
/measure が PSI UI と同じ API を直接呼び出すため、デベロッパーは PSI と /measure の使用時により一貫したエクスペリエンスを得ることができます。また、ユーザーによるツールの使用方法に基づいて、/measure をいくつか調整しました。つまり、/measure のログイン エクスペリエンスは廃止されますが、最も使用されている機能（複数のカテゴリを表示する機能）は引き続き使用できます。
PSI の今日
では、現在の PageSpeed Insights レポートで提供されている内容を見てみましょう。PSI レポートには、モバイルとパソコンの両方のデバイスのパフォーマンス データが個別のタブに表示され、ページを改善する方法が提案されます。各ケースのレポートの主要コンポーネントは類似しており、次の要素で構成されています。
パフォーマンス スコア: パフォーマンス スコアは PSI レポートの上部に表示され、ページの全体的なパフォーマンスの概要を示します。このスコアは、Lighthouse を実行してページに関するラボデータを収集し、分析することで決定されます。スコアが 90 以上は「良」、50 ～ 90 は「要改善」、50 未満は「低」と見なされます。
フィールド データ: CrUX レポート データセットから取得されたフィールド データは、実際のユーザー エクスペリエンスに関する分析情報を提供します。このデータには、First Contentful Paint（FCP）などの指標が含まれ、Core Web Vitals（First Input Delay（FID）、Largest Contentful Paint（LCP）、Cumulative Layout Shift（CLS））を測定します。指標の値とともに、特定の指標の値が「良好」、「改善が必要」、「低速」のページの分布も確認できます。これらの値は、それぞれ緑色、黄色、赤色の棒で示されます。分布とスコアは、CrUX データセット内のユーザーのページ読み込みに基づいて表示されます。スコアは過去 28 日間のデータに基づいて計算されます。十分な実際のユーザーデータが利用できない新しいページではスコアは利用できません。
オリジンの概要: [オリジンの概要を表示] チェックボックスをオンにすると、過去 28 日間に同じオリジンから配信されたすべてのページの指標の集計スコアが表示されます。
ラボデータ: Lighthouse を使用して計算されるラボのパフォーマンス スコアは、制御された環境で収集されるため、パフォーマンスの問題のデバッグに役立ちます。このレポートには、First Contentful Paint、Largest Contentful Paint、Speed Index、Cumulative Layout Shift、Time to Interactive、Total Blocking Time などの指標を使用してパフォーマンスが表示されます。各指標はスコアが付けられ、「良好」、「改善が必要」、「不良」のいずれかを示すアイコンが付けられます。このセクションでは、リリース前のパフォーマンスのボトルネックを把握し、問題の診断に役立ちますが、実際の問題をキャプチャできない場合があります。
監査: Lighthouse によって実行されたすべての監査と、合格した監査、改善の余地、その他の診断情報が一覧表示されます。
現在の PSI 設計の課題
上のスクリーンショットに示すように、ラボデータとフィールドデータの異なるデータポイントは明確に分離されていません。PSI を初めて使用するデベロッパーは、データのコンテキストと次に何をすべきかを簡単に理解できない可能性があります。この混乱により、PSI レポートの解読に関する多くの「方法」のブログ投稿が作成されています。
この再設計により、デベロッパーが PSI レポートの生成から、レポートに含まれる分析情報に基づく対応に迅速に移行できるように、レポートの解釈が容易になることを期待しています。
その他の情報
パフォーマンス ツールの更新について詳しくは、Chrome Dev Summit 2021 の基調講演をご覧ください。PSI のリリース日と web.dev/measure の変更については、最新情報をお知らせします。
この記事に関するフィードバックを提供してくれた Milica Mihajlija、Philip Walton、Brendan Kenny、Ewa Gasperowicz に感謝します