Je websitesnelheid zelf meten en verbeteren: een stappenplan met gratis tools

Je opent je eigen website op je telefoon, onderweg, op een matige verbinding. Het scherm blijft wit terwijl je wacht. Dat wachten kost je bezoekers, en je kunt het zelf meten en oplossen zonder één regel code te schrijven.

Key takeaways

• Meet eerst, sleutel daarna. Zonder nulmeting weet je nooit of een aanpassing echt hielp.
• Afbeeldingen leveren bijna altijd de grootste winst voor de minste moeite.
• De watervalgrafiek wijst het probleem aan. Je hoeft hem niet te begrijpen, alleen de langste balken te lezen.
• Scripts van tools die je niet meer gebruikt blijven laden tot je ze zelf weghaalt.
• Elke stap hieronder kun je uitvoeren met gratis tools, zonder abonnement en zonder ontwikkelaar.

Stap 1: leg je nulmeting vast

Open Google PageSpeed Insights, vul de URL van je drukste pagina in en start de analyse. Je krijgt twee uitslagen: één voor mobiel en één voor desktop. Kijk naar de mobiele uitslag. Dat is de zwaarste test en meestal ook de manier waarop je bezoekers binnenkomen. De tool kleurt de score zelf: rood onder de vijftig, oranje tot negentig, groen daarboven.

Draai dezelfde pagina daarna door GTmetrix. Die geeft je de totale laadtijd en een watervalgrafiek waarin elk bestand een eigen balk krijgt.

Zet beide uitkomsten in een tekstbestand met de datum erbij. Resultaat: je hebt één regel met de mobiele score en de laadtijd van vandaag. Zonder die regel is elke verbetering later een gevoel in plaats van een feit.

Stap 2: wijs de zwaarste bestanden aan

Ga terug naar de watervalgrafiek in GTmetrix. Je hoeft niet te snappen wat elke kolom betekent. Zoek de langste balken en lees af welk bestand erbij hoort.

Meestal zie je één van drie patronen. Lange balken met bestandsnamen die eindigen op jpg, png of webp: je afbeeldingen zijn te zwaar. Lange balken van een ander domein dan dat van jou: een extern script, bijvoorbeeld een chatvenster, een cookiebanner of een statistiekentool. Veel korte balken achter elkaar in plaats van naast elkaar: je pagina wacht steeds op het vorige onderdeel.

Resultaat: je hebt een lijstje van drie tot vijf bestandsnamen die het langst duren. Dat lijstje bepaalt waar je begint, niet je onderbuik.

Stap 3: maak je afbeeldingen lichter

Begin bij de afbeeldingen uit je lijstje. Open Squoosh in je browser en sleep er een afbeelding in. Links zie je het origineel, rechts het resultaat. Kies rechts het formaat WebP en schuif de kwaliteit omlaag tot je op je scherm verschil begint te zien. Ga dan één stap terug en download het bestand.

Let ook op de afmetingen. Een foto die vierduizend pixels breed is terwijl je website hem op achthonderd pixels toont, laat de browser vierduizend pixels downloaden voor niets. Schaal hem bij naar de breedte waarop hij echt getoond wordt. Dat kan in Squoosh zelf, of in GIMP of Photopea als je meer wilt bijsnijden.

Vervang daarna de oude afbeelding op je site door de nieuwe. Gebruik je WordPress, dan kun je bestaande afbeeldingen ook laten comprimeren door een plugin, maar controleer altijd zelf hoe het resultaat eruitziet.

Resultaat: elk bestand uit je lijstje is merkbaar kleiner en ziet er op je site nog steeds goed uit. Herlaad de pagina en kijk of er niets vervaagd of uitgerekt is.

Stap 4: ruim scripts op en stel uit wat kan wachten

Externe scripts zijn de stilste vertragers. Ze staan er vaak nog van een proef, een campagne of een tool waar je allang mee gestopt bent.

Open je pagina, klik met de rechtermuisknop en kies de optie om de paginabron te bekijken. Zoek in die tekst op het woord script en loop de regels langs. Herken je een naam niet, zoek hem dan op. Hoort hij bij iets wat je niet meer gebruikt, haal hem weg via de plek waar je hem ooit toevoegde: je thema-instellingen, je tagbeheer of de kop van je pagina.

Wat je wel nodig hebt, hoeft meestal niet als eerste te laden. Statistieken en een chatvenster mogen wachten tot de bezoeker de tekst ziet. In HTML doe je dat door defer of async aan de scripttag toe te voegen. In WordPress kan een gratis plugin zoals Autoptimize dit voor je instellen.

Resultaat: de bron van je pagina bevat geen enkel script meer waarvan je niet kunt uitleggen waarom het er staat.

Stap 5: zet caching aan

Caching betekent dat de browser onderdelen van je site bewaart. Komt iemand terug, dan hoeft niet alles opnieuw over de lijn. Zonder caching is elk bezoek even traag als het eerste.

Werk je met WordPress, dan installeer je een gratis cachingplugin zoals WP Super Cache of W3 Total Cache en zet je caching aan in de instellingen. De standaardwaarden zijn voor de meeste sites een prima startpunt.

Werk je met een ander systeem, kijk dan in het controlepaneel van je hosting of er een cachingoptie bestaat. Vind je niets, stuur je hostingpartij dan de vraag of ze browsercaching kunnen aanzetten. Dat is een standaardverzoek en kost meestal niets.

Resultaat: je draait de test opnieuw in GTmetrix en de aanbeveling over caching staat er niet meer bij. Zolang die melding blijft staan, is de instelling niet actief geworden.

Stap 6: meet opnieuw en leg het verschil vast

Draai dezelfde twee tests op dezelfde pagina en zet de nieuwe cijfers onder je nulmeting uit stap 1. Test op hetzelfde moment van de dag, want serverdrukte beïnvloedt de uitslag.

Kijk daarna welke aanbevelingen overblijven. PageSpeed Insights zet bij elke aanbeveling hoeveel tijd die zou schelen. Pak de bovenste, niet de makkelijkste.

Resultaat: je hebt twee regels onder elkaar met een datum, een score en een laadtijd. Dat is je bewijs, en meteen je vertrekpunt voor de volgende ronde.

Gratis tools die je hiervoor nodig hebt

Tips en tricks

• Test altijd een echte pagina, niet je homepage alleen. Je productpagina of je contactpagina is vaak zwaarder en verdient de aandacht meer.
• Verander één ding tegelijk en meet ertussendoor. Pas je drie dingen tegelijk aan en gaat de score omlaag, dan weet je niet welke het deed.
• Zet je nieuwe afbeeldingen klaar voordat je de oude weghaalt. Anders staat je site even met lege plekken online.
• Een cachingplugin toont oude pagina's aan je bezoekers. Leeg de cache nadat je iets aanpast, anders test je jezelf blind op een bewaarde versie.
• Vraag je hostingpartij welke PHP-versie je draait. Een verouderde versie remt alles af en bijwerken is meestal een kwestie van één instelling.
• Kijk of je lettertypen van een extern domein komen. Ze meeleveren vanaf je eigen site scheelt een extra verbinding en helpt ook je privacyverklaring.
• Zet een herinnering over drie maanden om opnieuw te meten. Websites worden vanzelf weer zwaarder, want er komt altijd iets bij.

Zelfscan: waar sta jij?

Je volgende stap

Doe vandaag alleen stap 1. Meet je drukste pagina in PageSpeed Insights en GTmetrix en schrijf de twee cijfers met de datum erbij op. Dat kost je een kwartier en het maakt de rest van dit stappenplan concreet in plaats van theoretisch.

Loop je daarna vast, bijvoorbeeld omdat je niet bij de juiste instellingen kunt of omdat de score blijft hangen terwijl je alles hebt geprobeerd, dan kijkt HisarWeb vrijblijvend met je mee. Stuur je URL en je twee metingen, dan krijg je terug waar het knelt en wat de eerstvolgende ingreep zou moeten zijn.