Chrome 64 abandonne l'API chrome.loadTimes()

chrome.loadTimes() est une API non standard qui expose aux développeurs des métriques de chargement et des informations sur le réseau afin de les aider à mieux comprendre les performances de leur site dans le monde réel.

Depuis l'implémentation de cette API en 2009, toutes les informations utiles qu'elle fournit peuvent être trouvées dans des API standardisées telles que:

Ces API standardisées sont implémentées par plusieurs fournisseurs de navigateurs. Par conséquent, chrome.loadTimes() est abandonné dans Chrome 64.

L'API obsolète

La fonction chrome.loadTimes() renvoie un seul objet contenant toutes ses informations de chargement et de réseau. Par exemple, l'objet suivant est le résultat de l'appel de chrome.loadTimes() sur www.google.com:

{
  "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"
}

Remplacements standardisés

Vous pouvez désormais trouver chacune des valeurs ci-dessus à l'aide d'API standardisées. Le tableau suivant fait correspondre chaque valeur à son API standardisée, et les sections ci-dessous présentent des exemples de code pour obtenir chaque valeur de l'ancienne API avec des équivalents modernes.

chrome.loadTimes() caractéristique Remplacement d'API standardisé
requestTime Navigation Timing 2
startLoadTime Navigation Timing 2
commitLoadTime Navigation Timing 2
finishDocumentLoadTime Navigation Timing 2
finishLoadTime Navigation Timing 2
firstPaintTime Calendrier de peinture
firstPaintAfterLoadTime N/A
navigationType Navigation Timing 2
wasFetchedViaSpdy Navigation Timing 2
wasNpnNegotiated Navigation Timing 2
npnNegotiatedProtocol Navigation Timing 2
wasAlternateProtocolAvailable N/A
connectionInfo Navigation Timing 2

Les exemples de code ci-dessous renvoient des valeurs équivalentes à celles renvoyées par chrome.loadTimes(). Toutefois, pour le nouveau code, ces exemples de code ne sont pas recommandés. En effet, chrome.loadTimes() fournit des valeurs de temps en temps d'épok en secondes, tandis que les nouvelles API de performances indiquent généralement des valeurs en millisecondes par rapport à l'origine temporelle d'une page, ce qui est généralement plus utile pour l'analyse des performances.

Plusieurs des exemples privilégient également les API Performance Timeline 2 (par exemple, performance.getEntriesByType()), mais fournissent des solutions de remplacement pour l'ancienne API Navigation Timing 1, car elle est plus compatible avec les navigateurs. À l'avenir, les API Performance Timeline seront privilégiées et seront généralement enregistrées avec une précision plus élevée.

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;
  }
}

Plan de suppression

L'API chrome.loadTimes() sera abandonnée dans Chrome 64 et devrait être supprimée fin 2018. Les développeurs doivent migrer leur code dès que possible pour éviter toute perte de données.

Intent to Deprecate | Chromestatus Tracker | Bug Chromium