Chrome 64 で chrome.loadTimes() API のサポートを終了

chrome.loadTimes() は、実際のサイトのパフォーマンスをより深く理解できるように、読み込みの指標とネットワーク情報をデベロッパーに提供する非標準の API です。

この API は 2009 年に実装されて以来、レポートされる有用な情報はすべて、次のような標準化された API で確認できます。

この標準化された API は、複数のブラウザ ベンダーによって実装されています。そのため、Chrome 64 では chrome.loadTimes() のサポートが終了します。

サポートが終了した API

chrome.loadTimes() 関数は、読み込み情報とネットワーク情報をすべて含む単一のオブジェクトを返します。たとえば、次のオブジェクトは www.google.comchrome.loadTimes() を呼び出した結果です。

{
  "requestTime": 1513186741.847,
  "startLoadTime": 1513186741.847,
  "commitLoadTime": 1513186742.637,
  "finishDocumentLoadTime": 1513186742.842,
  "finishLoadTime": 1513186743.582,
  "firstPaintTime": 1513186742.829,
  "firstPaintAfterLoadTime": 0,
  "navigationType": "Reload",
  "wasFetchedViaSpdy": true,
  "wasNpnNegotiated": true,
  "npnNegotiatedProtocol": "h2",
  "wasAlternateProtocolAvailable": false,
  "connectionInfo": "h2"
}

標準化された交換

標準化された API を使用して、上記の各値を見つけることができます。以下の表では、各値を標準化された API と照合しています。以下のセクションでは、古い API の各値を最新の同等の値で取得する方法のコードサンプルを示しています。

chrome.loadTimes() の機能 標準化された API の置き換え
requestTime ナビゲーションのタイミング 2
startLoadTime ナビゲーションのタイミング 2
commitLoadTime ナビゲーションのタイミング 2
finishDocumentLoadTime ナビゲーションのタイミング 2
finishLoadTime ナビゲーションのタイミング 2
firstPaintTime ペイントのタイミング
firstPaintAfterLoadTime なし
navigationType ナビゲーションのタイミング 2
wasFetchedViaSpdy ナビゲーションのタイミング 2
wasNpnNegotiated ナビゲーションのタイミング 2
npnNegotiatedProtocol ナビゲーションのタイミング 2
wasAlternateProtocolAvailable なし
connectionInfo ナビゲーションのタイミング 2

以下のコードサンプルは、chrome.loadTimes() が返す値と同等の値を返します。ただし、新しいコードの場合、これらのコードサンプルは推奨されません。その理由は、chrome.loadTimes() は時間の値を秒単位で提供するエポックタイムです。一方、新しいパフォーマンス API は通常、ページのタイムオリジンを基準としてミリ秒単位で値を報告します。パフォーマンス分析により有用になりがちです。

また、パフォーマンス タイムライン 2 API(performance.getEntriesByType() など)を好む例もいくつかありますが、ブラウザのサポートが広範であるため、古い Navigation Timing 1 API のフォールバックが提供されます。今後はパフォーマンス タイムライン API が推奨され、通常はより高い精度で報告されます。

requestTime

function requestTime() {
  // If the browser supports the Navigation Timing 2 and HR Time APIs, use
  // them, otherwise fall back to the Navigation Timing 1 API.
  if (window.PerformanceNavigationTiming && performance.timeOrigin) {
    const ntEntry = performance.getEntriesByType('navigation')[0];
    return (ntEntry.startTime + performance.timeOrigin) / 1000;
  } else {
    return performance.timing.navigationStart / 1000;
  }
}

startLoadTime

function startLoadTime() {
  // If the browser supports the Navigation Timing 2 and HR Time APIs, use
  // them, otherwise fall back to the Navigation Timing 1 API.
  if (window.PerformanceNavigationTiming && performance.timeOrigin) {
    const ntEntry = performance.getEntriesByType('navigation')[0];
    return (ntEntry.startTime + performance.timeOrigin) / 1000;
  } else {
    return performance.timing.navigationStart / 1000;
  }
}

commitLoadTime

function commitLoadTime() {
  // If the browser supports the Navigation Timing 2 and HR Time APIs, use
  // them, otherwise fall back to the Navigation Timing 1 API.
  if (window.PerformanceNavigationTiming && performance.timeOrigin) {
    const ntEntry = performance.getEntriesByType('navigation')[0];
    return (ntEntry.responseStart + performance.timeOrigin) / 1000;
  } else {
    return performance.timing.responseStart / 1000;
  }
}

finishDocumentLoadTime

function finishDocumentLoadTime() {
  // If the browser supports the Navigation Timing 2 and HR Time APIs, use
  // them, otherwise fall back to the Navigation Timing 1 API.
  if (window.PerformanceNavigationTiming && performance.timeOrigin) {
    const ntEntry = performance.getEntriesByType('navigation')[0];
    return (ntEntry.domContentLoadedEventEnd + performance.timeOrigin) / 1000;
  } else {
    return performance.timing.domContentLoadedEventEnd / 1000;
  }
}

finishLoadTime

function finishLoadTime() {
  // If the browser supports the Navigation Timing 2 and HR Time APIs, use
  // them, otherwise fall back to the Navigation Timing 1 API.
  if (window.PerformanceNavigationTiming && performance.timeOrigin) {
    const ntEntry = performance.getEntriesByType('navigation')[0];
    return (ntEntry.loadEventEnd + performance.timeOrigin) / 1000;
  } else {
    return performance.timing.loadEventEnd / 1000;
  }
}

firstPaintTime

function firstPaintTime() {
  if (window.PerformancePaintTiming) {
    const fpEntry = performance.getEntriesByType('paint')[0];
    return (fpEntry.startTime + performance.timeOrigin) / 1000;
  }
}

firstPaintAfterLoadTime

function firstPaintTimeAfterLoad() {
  // This was never actually implemented and always returns 0.
  return 0;
}
function navigationType() {
  if (window.PerformanceNavigationTiming) {
    const ntEntry = performance.getEntriesByType('navigation')[0];
    return ntEntry.type;
  }
}

wasFetchedViaSpdy

function wasFetchedViaSpdy() {
  // SPDY is deprecated in favor of HTTP/2, but this implementation returns
  // true for HTTP/2 or HTTP2+QUIC/39 as well.
  if (window.PerformanceNavigationTiming) {
    const ntEntry = performance.getEntriesByType('navigation')[0];
    return ['h2', 'hq'].includes(ntEntry.nextHopProtocol);
  }
}

wasNpnNegotiated

function wasNpnNegotiated() {
  // NPN is deprecated in favor of ALPN, but this implementation returns true
  // for HTTP/2 or HTTP2+QUIC/39 requests negotiated via ALPN.
  if (window.PerformanceNavigationTiming) {
    const ntEntry = performance.getEntriesByType('navigation')[0];
    return ['h2', 'hq'].includes(ntEntry.nextHopProtocol);
  }
}

npnNegotiatedProtocol

function npnNegotiatedProtocol() {
  // NPN is deprecated in favor of ALPN, but this implementation returns the
  // HTTP/2 or HTTP2+QUIC/39 requests negotiated via ALPN.
  if (window.PerformanceNavigationTiming) {
    const ntEntry = performance.getEntriesByType('navigation')[0];
    return ['h2', 'hq'].includes(ntEntry.nextHopProtocol) ?
        ntEntry.nextHopProtocol : 'unknown';
  }
}

wasAlternateProtocolAvailable

function wasAlternateProtocolAvailable() {
  // The Alternate-Protocol header is deprecated in favor of Alt-Svc
  // (https://www.mnot.net/blog/2016/03/09/alt-svc), so technically this
  // should always return false.
  return false;
}

connectionInfo

function connectionInfo() {
  if (window.PerformanceNavigationTiming) {
    const ntEntry = performance.getEntriesByType('navigation')[0];
    return ntEntry.nextHopProtocol;
  }
}

削除プラン

chrome.loadTimes() API は Chrome 64 でサポートが終了し、2018 年後半に削除される予定です。デベロッパーは、データの損失を防ぐため、できるだけ早くコードを移行する必要があります。

サポート終了の予告 | Chromestatus Tracker | Chromium のバグ