Back to Portfolio
March 1, 2026

Vercel Speed Insightsを導入した

自分のサイトの健康状態をサクッと把握できるように、Vercel Speed Insightsを導入してみた。

Vercel Speed Insightsとは

Core Web Vitalsに基づいたサイトのパフォーマンス計測を可能にするサービス。

対象のVercel Projectのダッシュボードから確認が可能で、必要なライブラリをhead要素に埋め込むだけで導入ができる。

利用者のプライバシーに対する配慮もされていて、IPアドレスをはじめとした個人を特定できる情報は収集されないようになっている。

導入方法 with Astro

Vercel公式のGetting started with Speed Insightsを参考にするのが最も確実。
ここで書いていることはほぼ公式ドキュメントの写経なので、導入したい人はそっちを見た方がよいかも。

Vercel Project側での有効化

Speed Insightsは対象のVercel Projectの管理画面から有効化する必要があるので、使いたい場合はとりあえず有効化しておく。

@vercel/speed-insights のインストール

pnpm add @vercel/speed-insights

レイアウトへの埋め込み

---
import SpeedInsights from "@vercel/speed-insights/astro";
---

<html>
  <head>
    <SpeedInsights />
  </head>
</html>

本番環境へのデプロイ

上記の実装をVercelにデプロイした後、サイトの任意の画面を表示する。
だいたい30秒くらいでダッシュボードに反映される。

Speed Insightsを見てみる

Vercel Speed Insightsのダッシュボード

推移グラフにフォーカスをすることで該当する日付のコミット履歴が即座に確認できるところはちょっとおもしろいなと思った。
これによって「なんのコミットがスコアの悪化要因になってるんだろう」みたいな疑問をすぐ確認できるようになっている。

Vercel Speed Insightsの計測値の推移グラフ。

あとはエンドポイントごとのスコアとか、どの国からどれくらいアクセスされているかみたいなものも見れた。

Vercel Speed Insightsの国別アクセス数。

値段や制約など

Hobbyプラン（無料版）であれば、1つのプロジェクトで月あたり10,000件のデータまで収集できるらしい。
複数のプロジェクトで利用する場合は、プロジェクトごとに$10/月で利用できるとか、10,000件以上収集したい場合は10,000件ごとに$0.65追加で支払うことで収集する量を調整できるっぽい。

僕の個人サイトに月当たり10,000件もアクセスがあるわけがないのでとりあえずこれで十分そう。

参考: Limits and Pricing for Speed Insights

個人のノートがメインな静的サイトのデータ収集としては十分だな〜という印象でした。
Astroってやっぱ早いんだな〜。