Auteur Sujet: Navigation Timing: mesure du temps de chargement de la page web (Lu 4893 fois)

vivien · « **le:** 14 mars 2016 à 18:05:26 »

Mesure du temps de chargement de la page avec Navigation Timing

Navigation Timing est une recommandation du W3C du 17 décembre 2012 pour mesurer le temps de chargement de la page web.
(Un draft existe pour Navigation Timing 2, daté du 25 février 2016, donc l'évolution devrait arriver en 2017 dans nos navigateurs)

J'ai intégré ce petit script (proposé par Google Developers) sur toutes les pages de https://ip.lafibre.info :

Code: [Sélectionner]

<!DOCTYPE html>
<html lang="fr" class="no-js">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <meta name="author" content="Vivien GUEANT" />
    <link rel="shortcut icon" href="favicon.ico" />
    <script>
      function measureCRP() {
        var t = window.performance.timing,
          complete = t.domComplete - t.domLoading;
        var stats = document.createElement('p');
        stats.textContent = 'Temps de chargement de la page: ' + complete + 'ms';
        document.body.appendChild(stats);
      }
    </script>
    <link rel="stylesheet" type="text/css" href="css/default.css" />
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <script src="js/modernizr.custom.js"></script>
  </head>

  <body onload="measureCRP()">

J'utilise le "domComplete", qui comme son nom l’implique, mesure la totalité du temps de téléchargement et traitement de la page.

J'ai fait quelques tests de chargement en comparant avec les données "Réseau" données par Firefox qui comme leur nom l'indique ne prennent en compte que les temps réseau et non le temps de traitement du navigateur.

Voici un exemple où Navigation Timing "domComplete" est bien inférieur au temps réseau, donc j'ai un peu de mal à comprendre ce qui est inclus et exclut dans les données Navigation Timing. J'avais compris qu'il était capable de chronométrer le temps depuis la requête du client et non depuis le chargement du script (qui nécessite d'avoir déjà fait la résolution DNS, la connexion http et donc la non révocation du certificat en http et le chargement de la page html mère qui contient le script)

buddy · « **Réponse #1 le:** 14 mars 2016 à 18:17:23 »

Firefox prendre le temps total alors que ton script tout sauf l'index (puisqu'il faut charger l'index pour exécuter ton script non ? )

kgersen · « **Réponse #2 le:** 14 mars 2016 à 18:18:05 »

Citation de: vivien le 14 mars 2016 à 18:05:26

J'utilise le "domComplete", qui comme son nom l’implique, mesure la totalité du temps de téléchargement et traitement de la page.

d'apres le site:

Citer

domLoading: this is the starting timestamp of the entire process, the browser is about to start parsing the first received bytes of the HTML document.

Ca n'inclut pas le temps de téléchargement: c'est le début du parsing du 1er octet du document HTML. Je ne pense que le document soit chargé en mode streaming octet par octet mais en général c'est soit tout d'un coup ou soit par morceaux (taille buffer I/O).

Pour vérifier fait le test avec un très gros document HTML par exemple.

vivien · « **Réponse #3 le:** 14 mars 2016 à 18:48:35 »

Bonne idée, je vais faire une page html de 1 Mo (via un gros commentaire, pour ne pas prendre du temps de traitement ensuite)

Voici un autre exemple, réalisé en https, en 4G, cache vidé, sur une machine puissante (i5-5300U @2.30GHz), donc le temps de process de la page dois être négligeable :

Firefox affiche un temps de chargement réseau de 1,57 seconde.
=> pourquoi Firefox ne prend pas en compte le temps de chargement des polices de caractères, qui rajoute 837ms à cause d'une connexion lente au serveur (probablement une nouvelle connexion https avec un SYN et tout ce qui nécessaire)

Navigation Timing affiche 1198ms : Il semble ignorer la réception de /, mais par il va prendre le temps de chargement des polices de caractères ignorées par Firefox.

Autre test montrant bien que le temps pour récupérer / n'est pas utilisé par Navigation Timing :

corrector · « **Réponse #4 le:** 15 mars 2016 à 17:23:07 »

"mode streaming"?

vivien · « **Réponse #5 le:** 15 mars 2016 à 18:44:31 »

Je n'ai pas compris ta remarque.

corrector · « **Réponse #6 le:** 15 mars 2016 à 18:54:33 »

Citation de: kgersen le 14 mars 2016 à 18:18:05

Je ne pense que le document soit chargé en mode streaming octet par octet mais en général c'est soit tout d'un coup ou soit par morceaux (taille buffer I/O).

Je ne comprends pas cette phrase.

Qu'est-ce que le "mode streaming"?

vivien · « **Réponse #7 le:** 29 mars 2016 à 09:44:05 »

Avec Chrome (enfin Chromium), le temps de chargement en rouge (Load) correspond bien (à 10ms près) au temps affiché par Navigation Timing + le temps pour recevoir la page /

Sans vider le cache : Ce qui est étonnant, c'est que le temps DOMCOntentLoaded en bleu, est supérieur au temps total en rouge.

Sous Firefox, j'ai du mal à comprendre le temps de chargement total < au temps de chargement de l'image :

minidou · « **Réponse #8 le:** 29 mars 2016 à 20:33:36 »

Citation de: vivien le 29 mars 2016 à 09:44:05

Sous Firefox, j'ai du mal à comprendre le temps de chargement total < au temps de chargement de l'image :

Citer

the blue line marks the point at which the page's DOMContentLoaded event is triggered
the red line marks the point at which the page's load event is triggered

https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor

as-tu testé ces extensions?
https://addons.mozilla.org/en-US/firefox/addon/apptelemetry/
https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig

vivien · « **Réponse #9 le:** 29 mars 2016 à 21:00:03 »

Merci, je vais tester.

Auteur Sujet: Navigation Timing: mesure du temps de chargement de la page web (Lu 4893 fois)

corrector

corrector