この Codelab について
1. 始める前に
この Codelab では、PageSpeed Insights（PSI）API と Chrome UX レポート（CrUX）API を使用してウェブページの中核的なウェブ指標を測定する方法を学びます。
どちらの API も同一のウェブに関する主な指標データを返しますが、各 API にはそれぞれのメリットがあります。PSI API は、現場からの CrUX データに加えて Lighthouse のデータも提供します。Lighthouse は Google の自動オープンソース ツールで、ウェブページを監査して、その改善方法を提案します。CrUX API は Lighthouse のデータを提供していないため、より高速に実行されます。
ウェブと主な指標については、モバイル デバイスとパソコンで測定することをおすすめします。ウェブに関する主な指標には、次の 3 つの指標が含まれます。これらの指標はすべてのウェブページに適用され、ユーザー エクスペリエンスに関する重要な情報を提供します。
- Largest Contentful Paint（LCP）。読み込みのパフォーマンスを測定します。ページの読み込み開始から 2.5 秒以内に行われる必要があります。
- 初回入力遅延（FID）。インタラクティビティを測定します。測定は 100 ミリ秒以内に行われます。
- Cumulative Layout Shift（CLS）視覚的安定性を測定します。値は 0.1 以内である必要があります。
Prerequisites
- ウェブに関する指標の記事
- ウェブに関する主な指標のしきい値の定義に関する記事をご覧ください。
- コマンドラインの使用方法に関する基礎知識。
演習内容
- PSI API を使用してウェブページの中核的なウェブ指標を測定する
- CrUX API を使用してウェブページの主なウェブ指標を測定する。
必要なもの
- Google アカウント
- コマンドラインへのアクセス
- 任意のテキスト エディタ
- 任意のウェブブラウザ
- 任意の URL（この Codelab では https://developers.google.com を使用します）
2. PSI API を使用してウェブに関する主な指標を測定する
- デスクトップ版 URL のパフォーマンス データが必要な場合は、次の
curlコマンドを実行して PageSpeed Insights API からデータをリクエストし、response.txtファイルに保存します。
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
YOUR_URL プレースホルダを実際の URL に置き換えます。
- モバイル版の URL のパフォーマンス データが必要な場合は、前の手順で提供したコマンドの
strategyクエリ パラメータを API 文字列の末尾のmobile値に設定します。
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
YOUR_URL プレースホルダを実際の URL に置き換えます。
- テキスト エディタで
response.txtファイルを開き、loadingExperienceプロパティを見つけます。
response.txt
"loadingExperience": {
"id": "https://developers.google.com/",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1714,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.49701860391159164
},
{
"min": 1000,
"max": 3000,
"proportion": 0.40071951025600261
},
{
"min": 3000,
"proportion": 0.10226188583240581
}
],
"category": "AVERAGE"
},
},
loadingExperience プロパティは、API リクエストで指定された URL とデバイスタイプに基づいて、ウェブに関する主な指標ごとにこの情報を報告します。
percentileプロパティは、各指標の 75 パーセンタイルを示します。distributionsプロパティは、各指標について、評価が良好、改善が必要、または不備のページビューの割合を示します。categoryプロパティは、各指標のパフォーマンスを「低速」、「平均」、「高速」に分類します。
loadingExperience プロパティの内容が空の場合、URL に十分な掲載結果データがありません。この問題は通常、トラフィックの少ないウェブページをテストしたときに発生します。
originLoadingExperienceプロパティを見つけます。
response.txt
"originLoadingExperience": {
"id": "https://developers.google.com",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1649,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.488838781075378
},
{
"min": 1000,
"max": 3000,
"proportion": 0.42709617576692827
},
{
"min": 3000,
"proportion": 0.084065043157693739
}
],
"category": "AVERAGE"
},
},
originLoadingExperience プロパティは、URL だけでなく、出発地全体の集計されたエクスペリエンスを報告します。個々のウェブに関する主な指標について、前のステップで説明したものと同じ情報が提供されます。
3. CrUX API を使用してウェブに関する主な指標を測定する
API キーを取得する
- Google Cloud Console で「
Chrome UX」を検索し、プルダウン メニューで [Chrome UX Report API] を選択します。 - [Chrome UX Report API] ページで [有効にする] をクリックし、[有効にする] ボタンが [管理] ボタンに変わるまで待ってから [管理] を選択します。
- ナビゲーション メニューで [Credentials] をクリックし、[Create Credentials > API key] を選択して、API キーをコピーします。
リクエストを作成する
- コマンドラインから CrUX API に URL のパフォーマンス データをリクエストし、
response.txtファイルに保存します。
curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'
YOUR_API_KEY プレースホルダを API キーに置き換え、YOUR_URL プレースホルダを URL に置き換えます。
- テキスト エディタで、
response.txtファイルを開きます。
response.txt
{
"record": {
"key": {
"url": "https://developers.google.com/"
},
"metrics": {
"cumulative_layout_shift": {
"histogram": [
{
"start": "0.00",
"end": "0.10",
"density": 0.47784335300590036
},
{
"start": "0.10",
"end": "0.25",
"density": 0.32379713914174157
},
{
"start": "0.25",
"density": 0.19835950785235579
}
],
"percentiles": {
"p75": "0.23"
}
},
}
},
}
CrUX API レスポンスは、ウェブに関する主な指標ごとに次の情報を提供します。
histogramプロパティは、特定の指標について、体験が低速、平均的、または高速であったユーザーの割合を示します。percentilesプロパティは、特定の指標に対する 75 パーセンタイルの観察を示します。
データが見つからないというエラー メッセージが表示された場合は、その URL のパフォーマンス データが十分にありません。この問題は通常、トラフィックの少ないウェブページをテストしたときに発生します。