Pagespeed optimalisatie: wat komt er allemaal bij kijken?
Je hebt vast weleens een interessante website bezocht en gemerkt dat het erg lang duurde voordat de pagina volledig geladen was. Dat kan behoorlijk frustrerend zijn. Maar heb je je ooit afgevraagd hoe het zit met jouw eigen website? Hoe lang duurt het voordat die volledig is geladen? In deze blogpost zullen Jan (de man, de mythe, de legende) en ik uitleggen hoe je succesvol de pagespeed van je website kunt verbeteren.
Waarom is de snelheid van een website zo belangrijk?
Zoals eerder genoemd, is de snelheid van een website essentieel voor de gebruikerservaring. Een website die traag laadt leidt tot frustratie bij bezoekers en kan ervoor zorgen dat bezoekers afhaken. Bovendien kan een trage website leiden tot verminderde conversie, omdat het laden van formulieren of het voltooien van aankopen te lang duurt. De snelheid van je website heeft ook invloed op je SEO (zoekmachineoptimalisatie). Als de crawlers niet snel door je website kunnen navigeren, gaan zoekmachines ervan uit dat gebruikers dezelfde trage ervaring hebben. Dit kan negatieve gevolgen hebben voor je rangschikking in zoekresultaten.
Waaruit bestaan de metrics van PageSpeed Insights?
Google’s PageSpeed Insights biedt inzicht in welke aspecten van je website verbeterd kunnen worden. Het is een waardevolle indicator, met een focus op de mobiele versie van je website, omdat Google hier veel waarde aan hecht. De belangrijkste metrics waar wij en Google naar kijken zijn:
-
- LCP (Largest Contentful Paint): FID meet de laadtijd van het grootste zichtbare element op de pagina, zoals afbeeldingen en tekstblokken. Een goede LCP-score zorgt ervoor dat gebruikers snel de inhoud kunnen zien.
- FID (First Input Delay): FID meet de tijd tussen het moment waarop een gebruiker interactie probeert te hebben met de pagina (bijvoorbeeld door te klikken op een knop) en het moment waarop de pagina daadwerkelijk reageert op die interactie. Een korte FID is essentieel voor een goede gebruikerservaring. (Volgend jaar wordt deze metrics vervangen door INP (Interaction to Next Paint)
- CLS (Cumulative Layout Shift): CLS meet de visuele stabiliteit van een pagina door te kijken naar onverwachte lay-outverschuivingen tijdens het laden. Een hoge CLS kan frustratie veroorzaken, vooral als gebruikers per ongeluk op verkeerde elementen klikken door plotselinge verschuivingen.
Waar moet je bij pagespeed optimalisatie aan denken?
De hosting
Pagespeed Insight is een goede tool die je op weg brengt voor het verbeteren van je website snelheid. Maar het is niet 100% accuraat, het is namelijk een momentopname. De hosting van je website is net zo belangrijk. Hoe sneller de hosting, hoe sneller de bezoeker de pagina te zien krijgt.
De opbouw van de website (hoe is de HTML opgebouwd)
Zorg dat de belangrijkste inhoud van de website “boven de vouw” staat. Hiermee bedoelen we dat de bezoeker niet naar beneden hoeft te scrollen om de inhoud te kunnen zien of lezen. Google wil dat bezoekers direct aan de slag kunnen, daarom is het belangrijk om voorrang te geven aan content boven de vouw.
Houd dus rekening met de opbouw van je website, met name de HTML. Zorg ervoor dat de data die boven de vouw wordt ingeladen niet al te groot is. Eerst moet de content ingeladen worden en daarna pas de andere elementen.
Minimaliseer het gebruik van JavaScript
Verminder onnodige JavaScript-code, omdat minder code betekent dat je website gebruiksvriendelijker wordt en sneller laadt. Kijk eens een keer door de JavaScript van je website heen. Vervang bijvoorbeeld Recaptcha, dit bestand is zeer groot en er zijn vaak betere oplossingen (disclaimer, kijk wel eerst of andere oplossingen mogelijk zijn voor je website).
Gebruik caching
Server caching zorgt ervoor dat je website sneller laadt, omdat de server eerder bezochte pagina’s en bijbehorende bronnen opslaat. Dit betekent dat bij herhaalde bezoeken aan je website sommige elementen al zijn opgeslagen en niet opnieuw hoeven te worden geladen. Als je een WordPress-website hebt, kun je bijvoorbeeld de WP Rocket-plugin installeren voor caching.
Voorkom te grote afbeeldingen en bestanden
Te grote afbeeldingen zijn vaak een boosdoener als het gaat om het vertragen van de websitesnelheid. Controleer de grootte van afbeeldingen en optimaliseer ze indien mogelijk. Upload afbeeldingen in hetzelfde formaat als waarin ze worden weergegeven op de website om onnodige pixels te voorkomen. Je kunt online tools gebruiken om afbeeldingen te verkleinen, zoals iloveimg.com, tinypng.com, en bulkresizephotos.com.
