無料 PerformanceObserverスニペットジェネレーター

PerformanceObserverスニペットジェネレーターとは

PerformanceObserverは、開発者がパフォーマンス測定イベントをリアルタイムで監視できるブラウザAPIです。パフォーマンスタイムラインをポーリングしたり手動のタイミング測定に依存したりする代わりに、PerformanceObserverは特定のエントリタイプ（largest-contentful-paint、layout-shift、first-input、paint、navigationなど）をサブスクライブし、記録された時点でエントリを受信します。これはWebパフォーマンスワーキンググループがCore Web Vitalsの測定に推奨する標準的なアプローチです。このAPIはバッファリングフラグをサポートしており、登録時に履歴エントリを即座に返すため、オブザーバーがセットアップされる前に発火したメトリクスを見逃しません。Baseline 2025、Chrome 73+、Edge 73+、Safari 14.1+、Firefox 84+でサポートされています。

Last updated: 2026-06-02

制限事項

• PerformanceObserverのエントリはページ遷移間で保持されません。各ページ読み込みは新しいタイムラインで始まります。SPAのルート変更では、新しいルートでのメトリクス追跡を継続するためにオブザーバーを手動で再接続する必要があります。
• 一部のパフォーマンスエントリタイプはブラウザ固有の可用性や動作があります。たとえば、layout-shiftエントリはすべてのブラウザで利用できるわけではなく（Firefoxはバージョン134でサポートを追加）、INPの監視にはChrome 121+またはSafari 18+が必要です。オブザーバーを登録する前に必ずサポートを確認してください。
• PerformanceObserverにはエントリタイプごとに限られたバッファがあります。オブザーバーが登録される前にバッファがいっぱいになり、buffered: trueが設定されていない場合、古いエントリが破棄される可能性があります。ページ読み込みライフサイクルの早い段階でオブザーバーを登録し、buffered: trueを使用してクリティカルレンダリングパス中に発火したエントリをキャプチャしてください。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

1. 監視するパフォーマンスメトリクスを選択します。Core Web Vitals（LCP、INP、CLS、FID、FCP、TTFB）または個別のエントリタイプ（paint、layout-shift、largest-contentful-paint、first-input、navigationなど）。
2. しきい値分類を設定します。各メトリクスはGoogle Web Vitalsのしきい値に基づいて自動的に良好、改善必要、不良に分類されます。特定の要件に合わせてしきい値をオプションでカスタマイズできます。
3. レポート方法を選択します。結果をコンソールにログ、analyticsエンドポイントにnavigator.sendBeaconでデータを送信、または既存の監視と統合するためのカスタムコールバック関数を提供。
4. 生成されたJavaScriptスニペットをコピーします。出力には、複数のオブザーバー、バッファリングされたエントリサポート、しきい値分類、オプションのsendBeaconレポーティングを備えた完全なPerformanceObserverセットアップが含まれます。

主な用途

• 本番環境でCore Web Vitalsを追跡し、信頼性が高くノンブロッキングなデータ送信のためにsendBeaconを使用してanalyticsエンドポイントにレポートします。ページのアンロード時でも機能します。
• 開発中にLCPをリアルタイムで監視し、パフォーマンス最適化（画像圧縮、フォント読み込み、遅延読み込み）が実際にLCP時間を削減していることを確認します。
• 各レイアウトシフトエントリをシフトスコアと影響を受けたノードとともにログ記録することで、ライブサイトで予期しないレイアウトシフト（CLS）を検出し、累積レイアウトシフトの原因を特定します。