はじめに
Webサイトのパフォーマンスは、ユーザー体験やSEOに大きな影響を与えます。CrUX (Chrome User Experience) APIは、Googleが提供するリアルタイムなユーザー体験データを取得するためのAPIで、ウェブサイトのパフォーマンスをより詳細に分析することができます。
症状・背景
このテーマが必要になる主な場面:
- ユーザーからの遅延に関するフィードバックが多い
- Google Lighthouseの評価が低く、改善策を見つけたい
- サイトのパフォーマンスを定量的に分析したい
- 他のサイトとのパフォーマンス比較を行うため
手順・設定方法
ステップ1: CrUX APIを使用してデータを取得する
# WordPressサイトのドメイン名を指定
curl -s https://chrome.googleapis.com/chromeux/report/v1/https://example.com | jq '.metrics'ステップ2: 取得したデータを解析する
# JSON形式で出力されたデータから必要な項目を抽出
jq '.metrics.first_contentful_paint.distribution' < crux_data.json
jq '.metrics.speed_index.distribution' < crux_data.jsonステップ3: データを定期的に収集し、グラフ化する
# cronジョブを使用して週に1回データを取得するスクリプトを作成
0 1 * * 6 /usr/local/bin/crux-collect.sh > /var/log/crux/weekly_report.log 2>&1ステップ4: パフォーマンスの改善状況を監視する
# 収集したデータからパフォーマンス指標が向上しているか確認
tail -n 50 /var/log/crux/weekly_report.log | grep 'speed_index' | awk '{print $3}' | sort -nr | head -1注意事項
- CrUX APIは非公式のため、将来的な変更や廃止に注意が必要です。
- パフォーマンス指標を改善するには、具体的な施策を講じる必要があります。
- セキュリティ上、curlコマンドからのデータ取得先が信頼できるサーバーであることを確認してください。
- 過度なAPIアクセスは制限される可能性があるため、適切にスケジューリングを行うこと。
まとめ
1. CrUX APIの理解: CrUX APIを用いてサイトパフォーマンスを定量的に把握できます。
2. データ収集: クロールジョブを設定して定期的にデータを集める。
3. 解析: 取得したデータから重要な指標を抽出し、分析を行う。
4. 改善: パフォーマンスの問題点に基づいて対策を講じる。
5. 監視: 改善状況を継続的にモニタリングしてPDCAサイクルを回す。
関連記事: