speed insights

ヴァーセルスピードの洞察

Web サイトのパフォーマンスに関する洞察

ウェブサイト·ドキュメント· Twitter

概要

@vercel/speed-insights Web バイタルや Web サイトのその他のパフォーマンス指標を自動的に追跡します。

このパッケージは開発モードではデータを追跡しません。

以下との第一級の統合があります。

フレームワーク	パッケージ
Next.js	@vercel/speed-insights/next
ナクスト	@vercel/speed-insights/nuxt
スヴェルテキット	@vercel/speed-insights/sveltekit
リミックス	@vercel/speed-insights/remix
反応する	@vercel/speed-insights/react
アストロ	@vercel/speed-insights/astro
ヴュー	@vercel/speed-insights/vue

他のフレームワーク、バニラ JS、静的 Web サイトもサポートしています。

クイックスタート

1. Vercel ダッシュボードでプロジェクトの Vercel Speed Insights を有効にします。

2. @vercel/speed-insightsパッケージをプロジェクトに追加します

3. Speed Insights をアプリに注入する

   • Next.js 、 React 、 Nuxt 、またはVue を使用している場合は、フレームワーク固有の<SpeedInsights />コンポーネントを使用してアプリにスクリプトを挿入できます。
   • Sveltekit を使用している場合は、トップレベルの+layout.js/tsファイルでinjectSpeedInsights()関数@vercel/speed-insights/sveltekitを使用できます。
   • 他のフレームワークの場合は、 inject関数を使用して追跡スクリプトをアプリに追加できます。
   • npm を使用せずに静的サイトで Vercel Speed Insights を使用する場合は、ドキュメントの指示に従ってください。

4. アプリを Vercel にデプロイし、データが流入することを確認します。

ドキュメント

このパッケージの詳細については、ドキュメントを参照してください。