De laadtijd van een pagina meten

Je hebt van die websites, waar het een eeuwigheid lijkt te duren voordat er een pagina is geladen. Dat ligt vaak aan de snelheid van de internet-verbinding. Daar heb je maar gedeeltelijk invloed op. Een snelle verbinding met internet helpt niet tegen een trage webserver.

Voor je eigen website geldt: zorg dat hij snel is. Zeker als je grote HTML-bestanden hebt met veel informatie, foto's en video's, is het goed om te weten hoe snel die pagina wordt geladen. Dat wil zeggen:

• Hoe lang het duurt totdat de pagina interactief wordt (en de gebruiker er mee aan de slag kan).
• Hoe lang het duurt totdat de hele DOM is geladen (en de scripts gaan werken).
• Hoe lang het duurt totdat het hele document is geladen (met alle plaatjes, video's, animaties, enz.).

De laadsnelheid zal voor elke combinatie anders zijn. Voor dit document, in deze browser, op deze computer, met deze internet verbinding, op dit moment, geldt:

• Tijd totdat de gebruiker met de pagina kan werken: Geen data beschikbaar ms.
• Tijd voor laden van de DOM: Geen data beschikbaar ms.
• Tijd voor het laden van het hele document: Geen data beschikbaar ms.

Op deze bladzijde wordt een manier getoond om de laadsnelheid van een webpagina te meten met behulp van window.performance.

• Er worden twee items besproken:
  1. De interface window.performance.
  2. De werking van het script.
   
• De interface window.performance
• De bespreking is bewust summier gehouden. Voor gedetailleerde informatie wordt verwezen naar hoofdstuk 4 van de betreffende specificatie op de site van W3C.
• Het window-object bevat allerlei gegevens over een open browser-venster. Er bestaat geen specificatie voor, maar alle grote browsers ondersteunen het.
• Een deel van die gegevens gaat over de manier van navigeren en over de tijdstippen waarop dingen gebeuren. Dit laatste wordt gebruikt bij het berekenen van de laadsnelheid van een pagina.
• window.performance heeft twee attributen: navigation en timing. Je gebruikt ze via de interfaces performanceNavigation resp. performanceTiming.
  JavaScript: window.performance.navigation resp. window.performance.timing.
   
• De interface performanceNavigation heeft twee attributen:
  
  • type. Hierin staat op welke manier de navigatie is uitgevoerd: via een URL, de vooruit- / achteruit-knop, enz.
  • redirectCount. Geeft aan hoeveel redirects er zijn geweest alvorens het huidige document te bereiken.
• De interface performanceTiming heeft 21 attributen, waarvan de meeste alleen worden genoemd. Een paar worden besproken:
  
  • navigationStart.
  • unloadEventStart.
  • unloadEventEnd.
  • redirectStart.
  • redirectEnd.
  • fetchStart.
  • domainLookupStart.
  • domainLookupEnd.
  • connectStart.
  • connectEnd.
  • secureConnectionStart.
  • requestStart.
  • responseStart.
  • responseEnd.
  • domloading. Moment net vóór dat het laden van het document begint.
  • domInteractive. Moment net vóór dat het document kan worden gebruikt.
  • domContentLoadedEventStart. Moment net vóór dat de event
      DomContentLoaded optreedt.
  • domContentLoadedEventEnd. Moment net ná dat de event
      DomContentLoaded optreedt.
  • domComplete. Moment net ná dat de DOM geheel is geladen.
  • loadEventStart.
  • loadEventEnd.
• Bovenstaande tijdmetingen worden bepaald in milliseconden, gerekend vanaf de start van de JavaScript tijdrekening, dat is op 1 januari 1970 om 00:00:00 uur.
   
• De werking van het script
• Het script van het voorbeeld bestaat uit HTML (om de resultaten op het scherm te kunnen tonen) en JavaScript (Voor het ophalen van de meetwaarden en de berekeningen).
• Voor het berekenen van de verschillende tijden is er de function criticalRenderPath(). Deze function gebruikt vier van de 21 eigenschappen van windows.performance.timing om gegevens op te halen. Door begin- en eindtijden van elkaar af te trekken wordt bekend hoelang iets duurt.
• De resultaten worden als een blok van drie waarden geretourneerd.
   
• De berekende tijden kun je verder verwerken, zoals bijvoorbeeld Google Analytics dat doet. Het script van het voorbeeld toont de gegevens op het scherm (door innerHTML aan te passen) en zet ze op het console (met console.log()).
• In de praktijk zul je alleen het console gebruiken om laadsnelheden te meten. De mogelijkheid om het op het scherm te tonen is alleen bedoeld als demo.
• De resultaten van criticalRenderPath() worden verwerkt door init(). Deze function zet de resultaten op het scherm en/of stuurt ze naar het console.
• De function init() wordt uitgevoerd zodra de pagina is geladen. Dat wordt geregeld met window.onload.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<script>
function criticalRenderPath() {
  var t =  window.performance.timing;
  return {
      interactiveAt: (t.domInteractive - t.domLoading),
      domContentLoaded: (t.domContentLoadedEventStart - t.domLoading),
      complete: (t.domComplete - t.domLoading)
  }
}
function init() {
  // Meldingen op het scherm
  document.getElementById('laadtijd1').innerHTML =
      criticalRenderPath().interactiveAt;
  document.getElementById('laadtijd2').innerHTML =
      criticalRenderPath().domContentLoaded;
  document.getElementById('laadtijd3').innerHTML =
      criticalRenderPath().complete;
  // Meldingen naar het console
  console.log("Tijd totdat de gebruiker met de pagina kan werken:,
      criticalRenderPath().interactiveAt, " ms.")
  console.log("Tijd voor laden van de DOM: ",
      criticalRenderPath().domContentLoaded, " ms.")
  console.log("Tijd voor het laden van het hele document: ",
      criticalRenderPath().complete, " ms.")
}
window.onload = init;
</script>
N.B. De JavaScript-opdrachten moeten elk op één regel staan. Hier is dat niet gedaan, om het leesbaar te houden.

(Zet dit in de <BODY> op de plaats waar de meldingen op het scherm moeten verschijnen).

<p>Voor dit document geldt:</p>
<ul>
<li>Tijd totdat de gebruiker met de pagina kan werken:
    <span id="laadtijd1"><u>Geen data beschikbaar</u></span>
    ms.</li>
<li>Tijd voor laden van de DOM:
    <span id="laadtijd2"><u>Geen data beschikbaar</u></span>
    ms.</li>
<li>Tijd voor het laden van het hele document:
    <span id="laadtijd3"><u>Geen data beschikbaar</u></span>
    ms.</li>
</ul>

Downloaden:
 
Druk op de knop:  File: voorb500.zip, 664 bytes.

Opmerking:
 
Dit is voor alles een ontwikkelgereedschap, dat je alleen gebruikt om trage web-pagina's te onderzoeken. Nadat de nodige aanpassingen zijn gedaan wordt de code weer verwijderd.