ページロード時間計測ツール

// PerformanceNavigationTimingを使用してページロード時間を計測するサンプルコード
function getPageLoadTiming() {
  // PerformanceNavigationTimingが利用可能か確認
  if (performance && 'getEntriesByType' in performance) {
    // ナビゲーションのタイミング情報を取得
    const navigationEntries = performance.getEntriesByType('navigation');
    
    if (navigationEntries.length > 0) {
      const navigationTiming = navigationEntries[0] as PerformanceNavigationTiming;
      
      // 各種タイミング指標を計算
      const timingMetrics = {
        // DNSルックアップ時間
        dnsLookup: navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart,
        
        // TCP接続時間
        tcpConnection: navigationTiming.connectEnd - navigationTiming.connectStart,
        
        // サーバーレスポンス時間（Time to First Byte）
        serverResponse: navigationTiming.responseStart - navigationTiming.requestStart,
        
        // コンテンツダウンロード時間
        contentDownload: navigationTiming.responseEnd - navigationTiming.responseStart,
        
        // DOM処理時間
        domProcessing: navigationTiming.domInteractive - navigationTiming.responseEnd,
        
        // DOMContentLoaded時間
        domContentLoaded: navigationTiming.domContentLoadedEventEnd - navigationTiming.domContentLoadedEventStart,
        
        // リソース読み込み時間
        resourceLoading: navigationTiming.loadEventStart - navigationTiming.domContentLoadedEventEnd,
        
        // ロードイベント処理時間
        loadEvent: navigationTiming.loadEventEnd - navigationTiming.loadEventStart,
        
        // 合計ページロード時間
        totalPageLoad: navigationTiming.loadEventEnd - navigationTiming.startTime,
        
        // インタラクティブになるまでの時間
        timeToInteractive: navigationTiming.domInteractive - navigationTiming.startTime,
        
        // 完全に読み込まれるまでの時間
        completePageLoad: navigationTiming.loadEventEnd - navigationTiming.startTime
      };
      
      return timingMetrics;
    }
  }
  
  // APIが利用できない場合はnullを返す
  return null;
}

// 使用例
const pageLoadTiming = getPageLoadTiming();
if (pageLoadTiming) {
  console.log('ページロード時間の詳細:', pageLoadTiming);
  console.log(`合計ページロード時間: ${pageLoadTiming.totalPageLoad.toFixed(2)}ms`);
}