Hoe meet je de laadsnelheid van een website?

De laadsnelheid van een website kan op verschillende manieren worden gemeten:

1. Ontwikkelaarstools in de browser:

   • Open het tabblad "Network" (Netwerk) in de ontwikkelaarstools (F12).
   • Ververs de pagina.
   • Analyseer de tijdsindicatoren voor elke resource (HTML, CSS, JS, afbeeldingen):
     • Waiting (TTFB): Tijd tot het eerste byte van de server wordt ontvangen.
     • Content Download: Tijd om de inhoud te downloaden.
     • Total: Totale laadtijd van de resource.
   • Let op het Waterfall-diagram om de volgorde van het laden van resources te visualiseren.
   • Analyseer de samenvatting (Summary) onderaan het tabblad voor de totale laadtijd en het aantal verzoeken.

2. Online services voor het meten van snelheid:

   • Google PageSpeed Insights: Analyseert de prestaties op mobiele en desktopapparaten, biedt optimalisatie-aanbevelingen.
   • GTmetrix: Biedt metrics zoals PageSpeed en YSlow, gedetailleerd rapport over laden, prestaties en aanbevelingen.
   • Pingdom Website Speed Test: Meet de snelheid vanuit verschillende locaties, biedt een gedetailleerde prestatie-analyse.
   • WebPageTest: Maakt testen mogelijk vanuit verschillende locaties en browsers, biedt veel metrics en visualisaties.

3. Metrics om op te letten:

   • Time to First Byte (TTFB): Tijd tot het eerste byte van de server wordt ontvangen.
   • Largest Contentful Paint (LCP): Tijd totdat het grootste inhoudselement verschijnt in het zichtbare deel van het scherm.
   • First Input Delay (FID): Tijd vanaf de eerste interactie van de gebruiker tot de reactie van de browser.
   • Cumulative Layout Shift (CLS): Totale score voor verschuiving van de lay-out tijdens het laden.
   • DOMContentLoaded: Tijd waarop de browser het HTML-document volledig heeft geladen en geparseerd.
   • Load: Tijd waarop alle resources van de pagina volledig zijn geladen.

4. Automatisering met frameworks:

   • Lighthouse (Google’s tool): Kan worden gebruikt als CLI-tool of geïntegreerd in CI/CD-pijplijnen.

   # Voorbeeld van gebruik van Lighthouse CLI
   lighthouse https://www.voorbeeld.com --output json,html --output-path ./rapport.json
   

   • Selenium/WebDriver: Kan worden gebruikt om de pagina te laden en de laadtijd te verkrijgen via de Performance API van JavaScript.

   # Voorbeeld van het verkrijgen van laadtijd met Selenium en Performance API
   from selenium import webdriver
   import time
   
   driver = webdriver.Chrome() # Of een andere browser
   driver.get("https://www.voorbeeld.com")
   
   # Wacht tot de pagina volledig is geladen
   time.sleep(5) # Betrouwbaardere wachttijden kunnen worden gebruikt
   
   # Verkrijg het PerformanceTiming-object
   performance_timing = driver.execute_script("return window.performance.timing")
   
   # Bereken de laadtijd
   load_time = performance_timing['loadEventEnd'] - performance_timing['navigationStart']
   print(f"Laadtijd: {load_time} ms")
   
   driver.quit()
   

   • Cypress: Biedt ook toegang tot de Performance API.

5. Real User Monitoring (RUM) systemen:

   • Tools die prestatiegegevens verzamelen van echte gebruikers op de site. Voorbeelden: Sentry, New Relic Browser.

De keuze van de methode hangt af van de doelen: voor snelle beoordeling zijn online services geschikt; voor gedetailleerde analyse en debugging, ontwikkelaarstools; en voor regelmatig toezicht en integratie in ontwikkelprocessen, automatisering en RUM-systemen.