Core Web Vitals を測定するツール

おなじみのデベロッパー ツールで Core Web Vitals を測定できるようになりました。

最近発表されたウェブに関する指標イニシアチブでは、すべてのサイトで優れたユーザー エクスペリエンスを提供するために不可欠な品質シグナルに関する統一的なガイダンスが提供されます。このたび、ウェブ デベロッパー向けに Google の人気ツールがすべてサポートされ、ウェブに関する主な指標の測定がサポートされるようになりました。これにより、ユーザー エクスペリエンスの問題を簡単に診断して修正できます。これには、Lighthouse、PageSpeed Insights、Chrome DevTools、Search Console、web.dev の測定ツール、Chrome 拡張機能の Web Vitals、新しい Chrome UX Report API が含まれます。

Google 検索では、ページ エクスペリエンスを評価するための基盤として Core Web Vitals を導入しました。そのため、これらの指標をできるだけ利用しやすく実用的なものにすることが重要です。

Core Web Vitals を使用してユーザー エクスペリエンスを最適化する取り組みを開始するには、次のワークフローをお試しください。

• Search Console の新しい Core Web Vitals レポートを使用すると、（フィールド データに基づいて）注意が必要なページのグループを特定できます。
• 修正が必要なページを特定したら、PageSpeed Insights（Lighthouse と Chrome UX レポートを活用）を使用して、ページ上のラボやフィールドの問題を診断します。PageSpeed Insights（PSI）は Search Console から利用できます。また、PSI に URL を直接入力することもできます。
• ラボでサイトをローカルで最適化する準備ができたら、Lighthouse と Chrome DevTools を使用して Core Web Vitals を測定し、何を修正するかに関する実用的なガイダンスを取得します。Chrome 拡張機能の Web Vitals を使用すると、パソコンで指標をリアルタイムで確認できます。
• Core Web Vitals のカスタム ダッシュボードが必要な場合は、フィールド データには最新の CrUX ダッシュボードまたは新しい Chrome UX Report API を、ラボデータには PageSpeed Insights API を使用します。
• ガイダンスをお探しの場合は、web.dev/measure を使用してページを測定し、PSI データを使用して、最適化のために優先的なガイドと Codelab のセットを表示できます。
• 最後に、pull リクエストに対して Lighthouse CI を使用して、変更を本番環境にデプロイする前に Core Web Vitals に回帰がないことを確認します。

それでは、各ツールの具体的な更新内容を詳しく見ていきましょう。

灯台

Lighthouse は自動化されたウェブサイト監査ツールです。デベロッパーが問題を診断し、サイトのユーザー エクスペリエンスを改善する機会を特定するのに役立ちます。パフォーマンスやアクセシビリティなど、ラボ環境でのユーザー エクスペリエンスの質のさまざまな側面を測定します。Lighthouse の最新バージョン（2020 年 5 月中旬にリリースされた 6.0）には、追加の監査、新しい指標、新たに構成されたパフォーマンス スコアが含まれています。

Lighthouse 6.0 では、レポートに 3 つの新しい指標が導入されています。これらの新しい指標のうち、Largest Contentful Paint（LCP）と Cumulative Layout Shift（CLS）の 2 つは Core Web Vitals のラボでの実装であり、ユーザー エクスペリエンスを最適化するための重要な診断情報を提供します。ユーザー エクスペリエンスの評価における重要性を考慮すると、この新しい指標は測定されてレポートに追加されるだけでなく、パフォーマンス スコアの計算にも考慮されます。

Lighthouse に含まれる 3 つ目の新しい指標である Total Blocking Time（TBT）は、別の Core Web Vitals の指標である First Input Delay（FID）のフィールド指標とよく相関しています。Lighthouse レポートに記載されている推奨事項に沿ってスコアを最適化することで、最適なユーザー エクスペリエンスを提供できるようになります。

Lighthouse CI をはじめ、Lighthouse で提供されるサービスはすべて最新バージョンに更新されており、統合とデプロイの前に、pull リクエストに関する Core Web Vitals を簡単に測定できます。

Lighthouse の最新の更新内容について詳しくは、Lighthouse 6.0 の新機能に関するブログ投稿をご覧ください。

PageSpeed Insights

PageSpeed Insights（PSI）は、モバイルとデスクトップ デバイスの両方で、ページのラボとフィールドのパフォーマンスをレポートします。このツールは、実際のユーザーによるページ エクスペリエンスの概要（Chrome UX レポートを利用）と、サイト所有者がページ エクスペリエンスを改善する方法に関する実用的な推奨事項（Lighthouse で提供）を提供します。

PageSpeed Insights と PageSpeed Insights API も、Lighthouse 6.0 を使用するようにアップグレードされ、レポートのラボセクションとフィールド セクションの両方で Core Web Vitals を測定できるようになりました。ウェブに関する主な指標には、以下に示すように青いリボンのアノテーションが付けられます。

サイト所有者は Search Console を使用して、注意が必要なページグループの概要を把握できますが、PSI はページごとの改善機会を特定して、ページ エクスペリエンスを改善するのに役立ちます。PSI では、レポートの上部で、Core Web Vitals のすべての項目について良好なエクスペリエンスのしきい値を満たしているかどうか（Core Web Vitals の評価に合格しているか、Core Web Vitals の評価に合格していないか）を明確に確認できます。

CrUX

Chrome UX レポート（CrUX）は、何百万ものウェブサイトにおける実際のユーザー エクスペリエンス データの一般公開データセットです。すべての Core Web Vitals のフィールド バージョンを測定します。ラボデータとは異なり、CrUX のデータは現場のオプトイン ユーザーから取得されます。デベロッパーはこのデータを使用して、自社または競合他社のウェブサイトにおける実際のユーザー エクスペリエンスの分布を把握できます。サイトに RUM がない場合でも、CrUX を使用すれば Core Web Vitals をすばやく簡単に評価できます。BigQuery の CrUX データセットには、すべての Core Web Vitals の詳細なパフォーマンス データが含まれており、オリジン レベルの月次スナップショットとして利用できます。

ユーザーに対するサイトのパフォーマンスを正確に知る唯一の方法は、ユーザーがサイトを読み込んで操作する中でのパフォーマンスを実際に測定することです。この種の測定は、一般的にリアルユーザー モニタリング（RUM）と呼ばれます。サイトに RUM がない場合でも、CrUX を使用すれば Core Web Vitals をすばやく簡単に評価できます。

CrUX API の紹介

本日、CrUX API についてお知らせできることを嬉しく思います。CrUX API は、開発ワークフローと以下のフィールド指標の品質測定をオリジンおよび URL レベルで簡単に統合できる、高速で無料のツールです。

• Largest Contentful Paint
• Cumulative Layout Shift
• First Input Delay
• First Contentful Paint

デベロッパーは、オリジンまたは URL をクエリし、さまざまなフォーム ファクタで結果をセグメント化できます。この API は毎日更新され、過去 28 日分のデータを要約します（毎月集計される BigQuery データセットとは異なります）。また、他の API である PageSpeed Insights API（1 日あたり 25,000 リクエスト）と同じ緩和された公開 API 割り当てもあります。

以下のデモでは、CrUX API を使用して、Core Web Vitals の指標を「良好」、「改善が必要」、「低速」の分布で可視化します。

今後のリリースでは、API を拡張して、より多くの CrUX データセットのディメンションと指標を利用できるようにします。

刷新された CrUX ダッシュボード

デザインが一新された CrUX ダッシュボードでは、オリジンのパフォーマンスの推移を簡単に追跡でき、Core Web Vitals のすべての指標の分布をモニタリングできるようになりました。ダッシュボードの使用を開始するには、web.dev のチュートリアルをご覧ください。

このたび、ウェブに関する主な指標のランディング ページが新たに導入され、サイトのパフォーマンスをひと目で把握しやすくなりました。すべての CrUX ツールに関するフィードバックをお待ちしております。ご意見やご質問は、Twitter アカウント @ChromeUXReport または Google グループまでお寄せください。

Chrome DevTools の [Performance] パネル

エクスペリエンス セクションで Layout Shift イベントをデバッグする

Chrome DevTools の [パフォーマンス] パネルに、予期しないレイアウト シフトの検出に役立つ新しい [エクスペリエンス] セクションが追加されました。これは、Cumulative Layout Shift の原因となっている、ページの視覚的な不安定性の問題を見つけて修正する際に役立ちます。

レイアウト シフトを選択すると、その詳細が [概要] タブに表示されます。移動自体が発生した場所を可視化するには、[移動元] フィールドと [移動] フィールドにカーソルを合わせます。

フッターに Total Blocking Time を表示してインタラクションの準備状況をデバッグする

Total Blocking Time（TBT）指標はラボツールで測定でき、First Input Delay の優れた代用となります。TBT は、First Contentful Paint（FCP）から Time to Interactive（TTI）までの、入力の応答を妨げるのに十分な時間メインスレッドがブロックされた合計時間を測定します。ラボでの TBT を改善するパフォーマンスの最適化により、現場の FID が改善されます。

ページ パフォーマンスを測定する際に、Chrome DevTools の [パフォーマンス] パネルのフッターに TBT が表示されるようになりました。

1. Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
2. [パフォーマンス] タブをクリックします。
3. [Record] をクリックします。
4. 手動でページを再読み込みします。
5. ページが読み込まれるのを待ってから、記録を停止します。

詳細については、DevTools の新機能（Chrome 84）をご覧ください。

Search Console

Search Console の新しい Core Web Vitals レポートを使用すると、CrUX の実際の（フィールド）データに基づいて、サイト全体で注意が必要なページのグループを特定できます。URL の掲載結果は、ステータス、指標タイプ、URL グループ（類似したウェブページのグループ）別にグループ化されています。

このレポートは、Core Web Vitals の 3 つの指標（LCP、FID、CLS）に基づいています。これらの指標のレポートデータが一定量に達していない URL はレポートから除外されます。新しいレポートを試して、元のパフォーマンスの全体像を把握しましょう。

Core Web Vitals に関連する問題があるページの種類を特定したら、PageSpeed Insights を使用して、代表的なページに対する具体的な最適化の推奨事項を確認できます。

web.dev

https://pagespeed.web.dev/ では、ページのパフォーマンスの推移を測定し、改善方法に関するガイドと Codelab の優先順位リストを確認できます。PageSpeed Insights を利用して測定しています。測定ツールは、以下に示す Core Web Vitals 指標もサポートするようになりました。

Web Vitals 拡張機能

Web Vitals 拡張機能は、（パソコン）Google Chrome の Core Web Vitals の 3 つの指標をリアルタイムで測定するものです。これは、開発ワークフローの早い段階で問題を見つけるのに便利です。また、ウェブをブラウジングするときに Core Web Vitals のパフォーマンスを評価するための診断ツールとしても役立ちます。

この拡張機能は、Chrome ウェブストアからインストールできるようになりました。この情報がお役に立てば幸いです。品質向上へのコントリビューションや、プロジェクトの GitHub リポジトリへのフィードバックをお待ちしています。

概要

トレーニング完了次のステップ:

• DevTools の Lighthouse を使用してユーザー エクスペリエンスを最適化し、Core Web Vitals を実際に活用して成功するための準備を整えます。
• PageSpeed Insights を使用して、ラボと現場での Core Web Vitals のパフォーマンスを比較します。
• 新しい Chrome User Experience Report API をお試しください。過去 28 日間の Core Web Vitals に対するオリジンと URL のパフォーマンスを簡単に確認できます。
• 特定の Core Web Vitals の詳細を確認してデバッグするには、DevTools の [パフォーマンス] パネルの [エクスペリエンス] セクションとフッターを使用します。
• Search Console の Core Web Vitals レポートを使用して、オリジンでの実際のパフォーマンスの概要を確認します。
• Web Vitals 拡張機能を使用すると、Core Web Vitals に対するページのパフォーマンスをリアルタイムで追跡できます。

Core Web Vitals ツールについては、6 月の web.dev Live で詳しく説明します。登録して、イベントの最新情報を入手しましょう。

~ Elizabeth と Addy、WebPerf Janitors