ページとサイトの品質をより適切に測定して最適化するための PageSpeed Insights の最新情報をご紹介します。
長年にわたり、PageSpeed Insights（PSI）はフィールドとラボデータの両方に関するワンストップ ソースへと進化を遂げてきました。Chrome UX レポート（CrUX）と Lighthouse の診断情報を統合して、ウェブサイトのパフォーマンス向上に役立つ分析情報を提供します。
このたび、PSI の最新版がリリースされましたのでお知らせいたします。これは Google のスピード ツール スイートの重要な要素ですが、PSI コードベースは 10 年前に開発されたもので、多くのレガシーコードを含み、再設計が予定されていました。これは、PSI のインターフェース関連の問題（ユーザーがレポートを操作するのを困難にすることがあった問題）に対処するための機会と捉えています。主な目標は次のとおりです。
- 合成環境から派生したデータと現場のユーザーから収集したデータを明確に区別することで、UI をより直感的にできるようにします。
- Core Web Vitals の評価の計算方法を UI で明確に伝える。
- マテリアル デザインを活用して、PSI のデザインをモダナイズする。
この投稿では、今年後半にリリースされる PSI の新機能を紹介します。
最新情報
PSI UI の再設計は、レポートデータを見やすく表示し、レポートで利用できるデータの明瞭さと粒度を高めることを目的としています。新しい UI はより直感的に操作できるようになっており、デベロッパーはページでラボとフィールドのパフォーマンス分析情報をすばやく見つけることができます。UI の基本的な変更点は次のとおりです。
フィールド データとラボデータが明確に分離されています。
フィールド データとラボデータを明確に区別するように UI を変更しました。「フィールド データ」と「ラボデータ」のラベルは、データの意味と活用方法を示すテキストに置き換えられました。また [フィールドデータ]セクションを 一番上に表示しました現在上部に表示されている従来のラボベースのパフォーマンス スコアは、スコアの提供元のあいまいさを避けるために、ラボデータのセクションに移動しました。
Core Web Vitals の評価
以前は、フィールド データでは「合格」または「不合格」の 1 つの単語として表示されていた Core Web Vitals の評価結果が、個別のアイコンで別のサブセクションとして目立たせるようになりました。
Core Web Vitals の評価プロセスに変更はありません。Core Web Vitals の指標の FID、LCP、CLS は、ページレベルまたはオリジンレベルで集計されます。3 つの指標すべてに十分なデータがある集計では、3 つの指標の 75 パーセンタイルが「良好」であれば、Core Web Vitals の評価に合格します。それ以外の場合、集計は評価に合格しません。集計の FID データが不十分な場合、LCP と CLS の 75 パーセンタイルの両方が「良好」であれば、評価に合格します。LCP または CLS のデータが不十分な場合、ページまたはオリジン レベルの集計は評価できません。
モバイルとパソコンのパフォーマンスを示すラベル
上部のナビゲーション メニューを変更し、レポートページの一元的にモバイルとパソコン用のリンクを追加しました。リンクが見やすくなり、データが表示されているプラットフォームが明確に示されるようになりました。これにより、ナビゲーション バーも見やすくなります。
オリジンの概要
現在、チェックボックスをクリックすると、オリジンの概要が表示されます。これは、オリジンのすべてのページの CrUX スコアを集計したものです。このレポート セクションは、[フィールド データ] セクションの新しいタブ [Origin] に移動しました。
その他の参考情報
レポートには、各フィールドとラボカードの下部に新しい情報セクションが追加され、サンプリング データに関する次の詳細が記載されるようになりました。
- データ収集期間
- 訪問時間
- デバイス
- ネットワーク接続
- サンプル数
- Chrome のバージョン
この情報により、ラボデータとフィールド データの区別が明確になり、2 つのデータソース（ラボとフィールド）の違いがわからなかったユーザーに役立ちます。
ビューを開く
フィールド データ セクションにドリルダウン機能を追加し、Core Web Vitals の指標の詳細な詳細を表示できるようにする新しい「展開ビュー」機能を追加しました。
ページの画像
フィールド データのすぐ隣に表示される、読み込まれたページの画像を削除しました。読み込みシーケンスを表示するページの画像とサムネイルはどちらも、ラボのデータ セクションに表示されます。
最新のプロダクト ドキュメントについては、https://developers.google.com/speed/docs/insights/. をご覧ください。
web.dev/measure のアップデート
パフォーマンス ツールボックス内の異なるツール間の不整合を減らすために、web.dev/measure も更新し、PageSpeed Insights API を直接活用できるようにします。
以前は、PSI ツールと /measure の両方を使用してレポートを実行すると、表示される Lighthouse の数値が異なっていました。違いの主な理由の 1 つは、/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 に感謝します。