BlogWebsites

Waarom je website traag is, en wat je eraan doet

Een trage site kost bezoekers, aanvragen en posities in Google. Zo meet je de snelheid van je site, lees je de uitslag van PageSpeed en los je de zeven meest voorkomende oorzaken op.

Jurre Klein Nijenhuis24 oktober 20264 min lezen

Een trage website kost je bezoekers, aanvragen en posities in Google. Bezoekers op mobiel wachten niet, en Google weegt de laadervaring mee in de zoekresultaten. Toch weten de meeste ondernemers niet hoe snel hun site eigenlijk is, laat staan waar de vertraging vandaan komt.

In dit artikel lees je hoe je de snelheid van je site meet, hoe je de uitslag leest en wat de zeven meest voorkomende oorzaken zijn, met de oplossing erbij. Bij elke site die ik bouw is groen in PageSpeed het doel. Dit is hoe ik daar kom.

Meten: zo lees je PageSpeed

Het gratis hulpmiddel van Google heet PageSpeed Insights. Je vult een adres in en krijgt twee soorten uitslagen. Het verschil daartussen is belangrijk.

  • Velddata. Hoe echte bezoekers je site de afgelopen weken ervoeren. Dit is wat Google meeneemt. Je ziet het alleen als je site genoeg bezoekers heeft.
  • Labdata. Een gesimuleerde meting, met de bekende score van 0 tot 100. Handig om oorzaken te vinden en verbeteringen te testen, maar de score schommelt per meting een beetje.

Kijk altijd eerst naar mobiel. Daar is het verschil het grootst, en daar komen bij de meeste bedrijven de meeste bezoekers vandaan.

De drie cijfers waar het om draait, heten samen de Core Web Vitals:

MetingWat het meetGoed als
LCP, Largest Contentful PaintHoe snel het grootste zichtbare element verschijnt, meestal de hoofdafbeelding of de kop.Binnen 2,5 seconde
INP, Interaction to Next PaintHoe snel de pagina reageert als iemand klikt of typt.Binnen 200 milliseconden
CLS, Cumulative Layout ShiftHoeveel de pagina verspringt tijdens het laden.Onder 0,1

De zeven meest voorkomende oorzaken

1. Te grote afbeeldingen

De klassieker. Een foto van 4 megabyte, rechtstreeks van de camera, die op een telefoon op 400 pixels breed wordt getoond. De oplossing:

  • Afbeeldingen in WebP of AVIF, moderne formaten die veel kleiner zijn bij dezelfde kwaliteit.
  • Op de juiste maat, met meerdere formaten zodat een telefoon een kleine versie krijgt.
  • Lazy loading: afbeeldingen pas laden als ze in beeld komen. Behalve de hoofdafbeelding bovenaan, die juist zo snel mogelijk moet laden.

2. Te veel plugins en een zware paginabouwer

Elke plugin kan eigen scripts en stijlen toevoegen, vaak op elke pagina, ook waar ze niet gebruikt worden. Paginabouwers maken het beheer makkelijk, maar laden meer code dan een site in maatwerk. Ruim plugins op die je niet gebruikt, en kijk of een plugin alleen laadt waar hij nodig is.

3. Lettertypes van een externe server

Lettertypes die bij Google Fonts of een andere dienst worden opgehaald, kosten een extra verbinding en vertragen de tekst. Zet ze op je eigen server, laad alleen de gewichten die je echt gebruikt en laat het belangrijkste lettertype vooraf laden. Bijkomend voordeel: geen gegevens van bezoekers naar derden.

4. Scripts van derden

Chatwidgets, ingesloten video’s, trackingcodes, reviewwidgets, kaarten. Elk daarvan laadt code van een andere partij, en daar heb je geen controle over. Dit is vaak de grootste reden voor een slechte INP. Wat helpt:

  • Video’s en kaarten pas laden als iemand erop klikt. Tot die tijd toon je een afbeelding met een afspeelknop.
  • Kritisch kijken: welke scripts leveren echt iets op?
  • Tracking via één tagbeheerder in plaats van vijf losse codes.

5. Geen caching of trage hosting

Als de server lang nadenkt voordat hij de eerste byte terugstuurt, helpt geen enkele optimalisatie op de pagina. Caching zorgt dat pagina’s kant-en-klaar klaarstaan in plaats van bij elk bezoek opnieuw te worden opgebouwd. Goede hosting met een actuele PHP-versie en servercaching maakt hier het verschil.

6. Een slider of animatie bovenaan

Een carrousel met vijf grote foto’s bovenaan de homepage is slecht voor de LCP en zelden goed voor de conversie. Bezoekers zien vaak alleen de eerste dia. Eén sterke afbeelding met een duidelijke boodschap laadt sneller en werkt meestal beter.

7. Verspringende pagina’s

Je wilt op een knop tikken en net op dat moment schuift de pagina omlaag. Dat is CLS. Oorzaken: afbeeldingen zonder vaste afmetingen, een cookiebanner of melding die de inhoud omlaag duwt, lettertypes die laat wisselen. Geef afbeeldingen en blokken een vaste ruimte, en laat meldingen over de inhoud heen vallen in plaats van ertussen.

Overzicht: probleem, herkenning en oplossing

Wat PageSpeed zegtWaarschijnlijke oorzaakEerste stap
Afbeeldingen correct formaat geven / moderne indelingTe grote foto’sWebP of AVIF, juiste maten
Ongebruikte JavaScript of CSS verwijderenPlugins en paginabouwerPlugins opruimen, alleen laden waar nodig
Weergaveblokkerende bronnenStijlen en lettertypes die eerst moeten ladenLettertypes lokaal, kritische stijlen eerst
Impact van code van derden beperkenChat, video, trackingPas laden na een klik
Eerste reactietijd van serverHosting of cachingCaching aanzetten, hosting bekijken
Grote indelingsverschuivingen vermijdenAfbeeldingen zonder afmetingen, bannersVaste ruimte reserveren

In welke volgorde je het aanpakt

  1. Meet de belangrijkste pagina’s op mobiel. Niet alleen de homepage, ook je best bezochte dienst- of productpagina.
  2. Begin bij de grootste winst. Meestal afbeeldingen en scripts van derden. Die leveren het meeste op voor de minste moeite.
  3. Verander één ding tegelijk en meet opnieuw. Dan weet je wat werkte en wat niet.
  4. Houd het bij. Een snelle site wordt vanzelf trager door nieuwe plugins, foto’s en widgets. Meet een paar keer per jaar.

Wanneer opnieuw bouwen beter is dan oplappen

Soms kun je blijven schaven zonder groen te halen. Dat is meestal het geval als:

  • het thema of de paginabouwer zelf al het grootste deel van de code laadt;
  • er tientallen plugins zijn die van elkaar afhankelijk zijn;
  • de site ook qua opbouw en teksten niet meer past bij je bedrijf.

Dan is een nieuwe, lichte site vaak goedkoper dan blijven repareren. Lees ook hoe ik snelheid vanaf de eerste dag inbouw. Wat er op een site moet, zoals video of een chat, telt altijd mee in de score. Snelheid is een afweging, maar wel een die je bewust moet maken.

Lees ook