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

0 Membres et 1 Invité sur ce sujet

vivien

  • Administrateur
  • *
  • Messages: 27 449
    • Twitter LaFibre.info
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 :


<!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

  • Client Bbox fibre FTTH
  • *
  • Messages: 8 393
  • Mougins (06)
Navigation Timing: mesure du temps de chargement de la page web
« 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

  • Client Orange Fibre
  • Modérateur
  • *
  • Messages: 4 752
  • FTTH 1Gb/s sur Paris (75)
Navigation Timing: mesure du temps de chargement de la page web
« Réponse #2 le: 14 mars 2016 à 18:18:05 »

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

  • Administrateur
  • *
  • Messages: 27 449
    • Twitter LaFibre.info
Navigation Timing: mesure du temps de chargement de la page web
« 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

  • Invité
Navigation Timing: mesure du temps de chargement de la page web
« Réponse #4 le: 15 mars 2016 à 17:23:07 »
"mode streaming"?

vivien

  • Administrateur
  • *
  • Messages: 27 449
    • Twitter LaFibre.info
Navigation Timing: mesure du temps de chargement de la page web
« Réponse #5 le: 15 mars 2016 à 18:44:31 »
Je n'ai pas compris ta remarque.

corrector

  • Invité
Navigation Timing: mesure du temps de chargement de la page web
« Réponse #6 le: 15 mars 2016 à 18:54:33 »
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

  • Administrateur
  • *
  • Messages: 27 449
    • Twitter LaFibre.info
Navigation Timing: mesure du temps de chargement de la page web
« 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

  • Client Orange Fibre
  • *
  • Messages: 402
  • FTTH 300 Mb/s sur Nantes (44)
Navigation Timing: mesure du temps de chargement de la page web
« Réponse #8 le: 29 mars 2016 à 20:33:36 »
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

  • Administrateur
  • *
  • Messages: 27 449
    • Twitter LaFibre.info
Navigation Timing: mesure du temps de chargement de la page web
« Réponse #9 le: 29 mars 2016 à 21:00:03 »
Merci, je vais tester.

 

Mobile View