なぜVercel CLIでWeb Vitalsを直接取得するのか？
Webパフォーマンスの最適化は、もはや選択肢ではなく必須です。特にCore Web Vitals（LCP, INP, CLS）はSEOやユーザー体験に直接影響を与えます。しかし、毎回ダッシュボードにアクセスしてデータを確認するのは手間がかかります。ましてや障害対応やデプロイ後の回帰分析には、即座のデータが必要です。
Vercelが公開した新しいCLIコマンド vercel metrics は、このニーズを正確に満たします。ターミナルから直接Speed Insightsデータをクエリできるため、開発ワークフロー内でパフォーマンスデータを確認・分析できます。特にAIコーディングエージェントと連携するとさらに強力です。エージェントに「先週と比べてINPが悪化したページを教えて」と質問すれば、CLI経由でデータを取得して即座に回答してくれます。
この記事では、vercel metrics コマンドの基本的な使い方から、実際の運用環境で活用できる高度なクエリパターンまで詳しく解説します。
根拠資料: Vercel公式チェンジログ
vercel metrics コマンドの基本
まず、Vercel CLIが最新バージョンであることを確認してコマンドを実行します。
# Vercel CLI の最新バージョンを確認・更新
npm i -g vercel@latest
# 特定プロジェクトの Speed Insights データを取得
vercel metrics --project=my-project-name
# 特定期間のデータだけ見たい場合
vercel metrics --project=my-project-name --from=2024-01-01 --to=2024-01-31
デフォルトの出力は、全ページの平均LCP、INP、CLS、FCP、TTFB値を表示します。しかし、より詳細な分析のために フィルター（dimensions） と クエリオプション を使用できます。
主なクエリ例
# 1. 特定ページの先週比INP回帰を確認
vercel metrics --project=my-project \
--path=/dashboard \
--metric=INP \
--from=$(date -d '7 days ago' +%Y-%m-%d) \
--to=$(date +%Y-%m-%d)
# 2. アジア地域のホームページ速度を確認
vercel metrics --project=my-project \
--path=/ \
--dimension=country \
--filter=country:JP,KR,CN
# 3. モバイル vs デスクトップのCLS比較
vercel metrics --project=my-project \
--metric=CLS \
--dimension=device \
--filter=device:mobile,desktop
ヒント: --filter オプションは key:value 形式で複数組み合わせ可能です。サポートされているdimensionの一覧は公式ドキュメントをご確認ください。
AIコーディングエージェントとの連携
この機能の真価は、AIエージェント（Claude、GPT-4など）と組み合わせたときに発揮されます。エージェントがターミナルコマンドを実行できる場合、以下のような対話が可能になります。
# エージェントへの質問：「先週比でINPが10%以上増加したページを教えて」
# エージェントが内部で実行するコマンド：
vercel metrics --project=my-project \
--metric=INP \
--from=2024-10-01 \
--to=2024-10-08 \
--format=json \
--order=asc
エージェントはJSON出力をパースし、特定の閾値を超えるページを特定し、原因分析のための追加措置（例：該当ページのLighthouseレポート要求）を提案できます。これが 対話型オブザーバビリティ（Conversational Observability） の始まりです。
高度な活用：デプロイパイプラインへのパフォーマンスゲート追加
CI/CDパイプラインで vercel metrics を活用すれば、パフォーマンス回帰を自動検出できます。例えば、デプロイ前に現在のプロダクションデータとプレビューデータを比較するスクリプトを作成できます。
#!/bin/bash
# デプロイ前パフォーマンスチェックスクリプト
# 現在のプロダクションの平均LCPを取得
PROD_LCP=$(vercel metrics --project=my-project \
--metric=LCP \
--from=$(date -d '1 day ago' +%Y-%m-%d) \
--to=$(date +%Y-%m-%d) \
--format=json | jq '.data[0].value')
# プレビューデプロイのLCPを取得（プレビューURLが必要）
PREVIEW_LCP=$(vercel metrics --project=my-project \
--url=https://preview-url.vercel.app \
--metric=LCP \
--format=json | jq '.data[0].value')
# 閾値比較（10%以上増加で失敗）
THRESHOLD=$(echo "$PROD_LCP * 1.1" | bc)
if (( $(echo "$PREVIEW_LCP > $THRESHOLD" | bc -l) )); then
echo "❌ LCPがプロダクション比10%以上増加。デプロイを中止します。"
exit 1
else
echo "✅ LCPは正常範囲内です。"
fi
このスクリプトをGitHub Actions、GitLab CI、Jenkinsなどに統合すれば、パフォーマンスが悪化するデプロイを事前にブロックできます。
注意点と制限
- データ遅延: Speed Insightsは実際のユーザーデータに基づくため、トラフィックが少ないページではデータがないか遅延する可能性があります。
- フィルターの精度:
countryやdeviceなどのdimensionはブラウザから収集された情報に依存するため、一部のデータが欠落することがあります。 - コスト: Vercel Proプラン以上でのみSpeed Insights機能を利用できます。Hobbyプランでは使用が制限されます。
まとめ：CLIが開く対話型オブザーバビリティの未来
vercel metrics コマンドは、単なる便利機能を超えて、開発者体験（DX）を根本的に変えるツールです。ダッシュボードに依存していたパフォーマンスモニタリングを開発ワークフロー内に取り込むことで、より迅速で正確な意思決定が可能になります。
特にAIエージェントとのシナジーは今後ますます重要になるでしょう。「デプロイ前にパフォーマンスチェックして」という一言で、パイプライン全体が自動化される日も遠くありません。
次のステップとしての学習方向:
- Vercel Speed Insightsの公式ドキュメントを熟読し、サポートされているすべてのdimensionとmetricを把握しましょう。
- GitHub Actionsと連携して、実際のCI/CDパイプラインにパフォーマンスゲートを構築してみてください。
- AIエージェント（Claude、GPT-4など）とVercel CLIを連携する方法を研究してみましょう。
合わせて読みたい記事
