Zo maak je je website sneller (en zo vind je wat hem traag maakt)

Website-bouwen Zo maak je je website sneller (en zo vind je wat hem traag maakt) Een trage website kost bezoekers, klanten en posities in Google. Met de gratis tool PageSpeed Insights zie je binnen een minuut waar het knelt. In dit artikel lees je hoe je zo'n scan uitvoert, hoe je de resultaten leest en welke ingrepen het meeste opleveren. Afbeelding: Mimiliz via Wikimedia Commons, CC BY-SA 3.0 Waarom snelheid zo zwaar telt Bezoekers zijn ongeduldig. Onderzoek van Google laat al jaren hetzelfde beeld zien: hoe langer een pagina laadt, hoe groter de kans dat iemand afhaakt voordat er ook maar iets op het scherm staat. Op mobiel, waar de meeste bezoekers vandaan komen, is dat effect nog sterker. En sinds Google de zogeheten Core Web Vitals meeneemt als rankingfactor, heeft snelheid ook direct invloed op je vindbaarheid. Die Core Web Vitals zijn drie meetwaarden die samen beschrijven hoe snel en stabiel een pagina aanvoelt voor een echte bezoeker: ≤ 2,5 sLCP: het grootste element (foto, kop) staat binnen 2,5 seconden op het scherm ≤ 200 msINP: de pagina reageert binnen 200 milliseconden op klikken en typen ≤ 0,1CLS: de opmaak verspringt vrijwel niet tijdens het laden LCP staat voor Largest Contentful Paint (hoe snel het belangrijkste zichtbaar is), INP voor Interaction to Next Paint (hoe vlot de pagina reageert op interactie) en CLS voor Cumulative Layout Shift (hoeveel de inhoud verspringt, denk aan die knop die net wegschuift als je erop wilt tikken). Haal je op alle drie de groene grens, dan zit je goed. Stap 1: scan je site met PageSpeed Insights De makkelijkste manier om te ontdekken wat jouw site vertraagt is PageSpeed Insights, een gratis tool van Google. Je typt je adres in, drukt op Analyseren en krijgt na een seconde of dertig een compleet rapport. Geen account nodig, geen installatie. Het rapport bestaat uit twee delen, en dat onderscheid is belangrijk: Twee soorten metingen in één rapport Velddata (bovenin): echte metingen van Chrome-gebruikers die jouw site de afgelopen 28 dagen bezochten. Dit is wat Google gebruikt voor de zoekresultaten. Kleine sites hebben soms te weinig bezoekers voor deze data. Labdata (onderin): een testrun met Lighthouse op een gesimuleerde, bewust trage telefoon en verbinding. Hier komt de bekende score van 0 tot 100 vandaan, plus de concrete verbeterpunten. Kijk altijd naar beide tabbladen: mobiel en desktop. De mobiele score is vrijwel altijd lager, omdat de test daar uitgaat van een langzaam toestel op een matige verbinding. Schrik dus niet van een mobiele score van 60 terwijl desktop op 95 staat, dat is heel normaal. Boven de 90 is groen, tussen 50 en 89 oranje, daaronder rood. Tip: test niet alleen je homepage. Een productpagina, blogartikel of contactpagina heeft vaak heel andere knelpunten. Scan de drie of vier belangrijkste paginatypes van je site apart. Stap 2: lees de diagnose Onder de score staat het waardevolste deel van het rapport: de secties Diagnostiek en Mogelijkheden. Daar vertelt de tool per onderdeel hoeveel seconden je kunt winnen en waarmee. De meldingen die je in de praktijk het vaakst tegenkomt: "Afbeeldingen in de juiste grootte weergeven" en "Afbeeldingen in moderne indelingen aanbieden": je foto's zijn te groot of staan in een verouderd formaat. "Bronnen verwijderen die de weergave blokkeren": CSS- en JavaScript-bestanden houden het tekenen van de pagina op. "Ongebruikte JavaScript verminderen": er wordt code geladen die de pagina helemaal niet nodig heeft, vaak van plugins of trackingscripts. "Reactietijd van de server verkorten" (TTFB): de server zelf doet er te lang over om de pagina op te bouwen. "Grote verschuivingen in de lay-out vermijden": afbeeldingen zonder vaste afmetingen of laat inladende banners duwen de inhoud omlaag. Begin bovenaan: PageSpeed Insights sorteert de verbeterpunten op geschatte tijdwinst. De bovenste twee of drie punten leveren meestal meer op dan alle andere samen. Stap 3: de ingrepen die het meeste opleveren 1. Verklein en moderniseer je afbeeldingen Afbeeldingen zijn op de meeste sites veruit de grootste vertrager. Drie regels: maak ze niet breder dan ze ooit getoond worden, sla ze op als WebP of AVIF in plaats van JPG of PNG (vaak 30 tot 70 procent kleiner bij gelijke kwaliteit), en geef afbeeldingen onder de vouw het attribuut loading="lazy" zodat ze pas laden als de bezoeker ernaartoe scrolt. Geef elke afbeelding daarnaast een vaste width en height, dan reserveert de browser alvast de ruimte en verspringt er niets (goed voor je CLS). 2. Ruim JavaScript en plugins op Elke plugin, elk trackingscript en elke embed (chatwidgets, socialmediafeeds, video's) laadt extra code mee. Loop je plugins en scripts eens per halfjaar na en gooi weg wat je niet meer gebruikt. Wat overblijft laad je waar mogelijk met defer, zodat het de eerste weergave van de pagina niet blokkeert. Zware embeds zoals YouTube-video's kun je vervangen door een stilstaande voorvertoning die pas bij een klik de echte speler laadt. 3. Zet caching en compressie aan Met browsercaching hoeven terugkerende bezoekers je logo, stylesheets en scripts niet opnieuw te downloaden. Met servercaching hoeft je server niet voor elke bezoeker opnieuw dezelfde pagina op te bouwen, wat direct je serverreactietijd verbetert. Zet daarnaast tekstcompressie aan (gzip of het modernere Brotli); dat maakt HTML, CSS en JavaScript onderweg zomaar 70 procent kleiner. Op WordPress regelt een cacheplugin dit grotendeels voor je, op eigen hosting doe je het in de server-configuratie. 4. Gebruik een CDN Een content delivery network zoals Cloudflare zet kopieën van je site op servers over de hele wereld, zodat elke bezoeker vanaf een locatie dichtbij bedient wordt. Het gratis instapniveau van Cloudflare levert voor veel sites al merkbare winst op en geeft je HTTP/3, Brotli en caching er in één keer bij. 5. Let op je lettertypen Webfonts kunnen tekst seconden onzichtbaar houden. Beperk je tot één of twee lettertypen, host ze op je eigen domein en zet in de CSS font-display: swap, zodat de tekst direct in een systeemlettertype verschijnt en pas daarna wisselt. 6. Kijk kritisch naar je hosting Is je serverreactietijd (TTFB) structureel boven de 800 milliseconden en helpt caching onvoldoende, dan zit het probleem vaak bij goedkope gedeelde hosting. Een overstap naar een snellere host of een eigen VPS is dan effectiever dan nog een plugin erbij. Meer meetgereedschap PageSpeed Insights is de beste start, maar niet de enige optie. In Chrome zit dezelfde motor ingebouwd: open de ontwikkelaarstools met F12 en kijk onder het tabblad Lighthouse; handig omdat je er ook pagina's achter een login mee kunt testen. WebPageTest gaat dieper en laat per bestand op een tijdlijn zien wat wanneer laadt. En in Google Search Console vind je onder Core Web Vitals hoe al je pagina's er volgens echte bezoekers voorstaan, niet alleen de pagina die je toevallig test. Tot slot: jaag niet blind op een score van 100. Het verschil tussen 92 en 98 merkt geen bezoeker. Het verschil tussen 45 en 85 wel. Richt je op de grote klappers hierboven, meet opnieuw, en controleer een maand later in de velddata of echte bezoekers de verbetering ook zien. Bronnen PageSpeed Insights, Google: pagespeed.web.dev Web Vitals, uitleg van LCP, INP en CLS, web.dev: web.dev/articles/vitals Lighthouse-documentatie, Chrome for Developers: developer.chrome.com/docs/lighthouse WebPageTest: webpagetest.org

Zo maak je je website sneller (en zo vind je wat hem traag maakt)

Reacties 0

Meer tech artikelen

Switch 2 haalt de achterstand in: VRR komt eindelijk naar de tv

Apple vouwt open: de iPhone Duo en een lineup zonder instapmodel

Het genoom als opzoekboek: DeepMind kaart 9 miljard DNA-mutaties