Waarom de laadsnelheid van je website belangrijk is
De laadsnelheid van je website is belangrijk omdat mensen afhaken wanneer het laden te lang duurt.
In dit artikel vertellen we je waarom het belangrijk is, hoe laadsnelheid wordt gemeten en wat je kunt doen om de website snel te laten laden
Waarom is de laadsnelheid van je website belangrijk?
Een slecht werkende site is frustrerend voor de bezoeker. Mensen haken af en gaan naar je concurrent. Aan de andere kant is een goed werkende website juist een versterking van je bedrijf. Je hebt je zaakjes duidelijk op orde.
Concurrentie
Je bent waarschijnlijk niet de enige in je branche. Wanneer je website snel laad en werkt, heb je een voorsprong op de collega in de markt die dit niet op orde heeft. Potentiële klanten kiezen eerder voor een bedrijf met website met die werkt, ze hebben jou dan immers nog nooit gezien of gesproken.
Informatie
De mensen die je website bezoeken, blijven langer wanneer de website snel laad en werkt. Ze klikken door je website heen en zien meer informatie over wat je te bieden hebt. Bij een trage website vertrekken ze snel naar een wel werkende website. Dit noemen we: User Experience (UX). Ze zullen je website dan ook eerder aanbevelen aan anderen.
Conversie
Een snelle, goedwerkende website zorgt ook voor een betere conversie. Conversie is het percentage mensen wat je website bezoekt en vervolgens overgaat tot een actie zoals het inschrijven op een nieuwsbrief, het contactformulier invullen of een aankoop doen. Wanneer 100 mensen je website bezoeken (page traffic) en 3 mensen het product op de website kopen, is de conversie 3%. Een trager ladende website zorgt ervoor dat dit percentage snel daalt. Zo schrijft Cloudflare dat een laadtijd van 2.4 sec een conversie oplevert van 1.9%. Bij 3.2 seconden daalt dit naar 1.5%. Is je laadtijd meer dan 5 seconden dan is je conversie minder dan 0.6%.
SEO
Tot slot heeft de laadsnelheid invloed op je SEO positie. Ranking noemen we dat. Een snel ladende website rankt hoger dan een traag ladende website die dezelfde zoekintentie bedienen. Voor vindbaarheid op mobiel is dit in het bijzonder belangrijk.
“Page speed is a direct ranking factor for both desktop and mobile search results. This means that faster-loading websites are generally more likely to rank higher in search engine results pages (SERPs) than slower-loading websites”.[bron – Google]
Hoe wordt de laadsnelheid van je website gemeten?
De snelheid waarmee je website laad, wordt gemeten aan de hand van verschillende parameters als TTFP, LCP en CLS. Hier wordt het dus wat meer technisch. Ik zal proberen het duidelijk te maken.
- TTFB staat voor time to first bite. Dit is de tijd tussen het verzoek van de gebruiker en het eerste beetje data van de website die door de browser wordt ontvangen. TTFB heeft grotendeels te maken met de server zelf of de instellingen op deze server, waarop je website draait. Een TTFB boven de 600 ms wordt door Google gezien als slecht.
- FCP staat voor first contentful paint. Deze waarde meet de tijd tussen de start van het laden van de pagina en het moment dat er voor het eerst wat op het scherm te zien is. Een FCP onder de 1.8 s wordt gezien als goed, boven de 3.0 s wordt gezien als slecht.
- LCP staat voor largest contentful paint. Deze waarde meet de tijd tussen de start van het laden van de pagina en het moment dat het grootste item op het scherm te zien is. Bijvoorbeeld een afbeelding of video. Een LCP onder de 2.5 s wordt gezien als goed, boven de 4.0 s wordt gezien als slecht.
- INP staat voor interaction to next paint. Deze waarde meet de latentie (duur) van alle kliks en toetsenbord acties. Deze waarde geeft aan hoe goed de pagina reageert op de gebruiker. Heb je bijvoorbeeld een button die heel slecht laad, dan is de INP hoog. Een INP onder de 200 ms wordt gezien als goed, boven de 500 ms wordt gezien als slecht.
- CLS staat voor cumulative layout shift. Dit meet hoeveel van een pagina nog verplaatst of veranderd tijdens het laden van de pagina. Misschien herken je het wel, een “knipperende” website tijdens het laden. Dit wordt door bezoekers als onprettig ervaren en een deel haakt hierdoor af. Een waarde onder de 0.1 wordt als goed gezien, boven de 0.25 als slecht.
Daarnaast is ook de grootte van de websitepagina (page size) in zijn geheel meegenomen in de laadsnelheid, al is dat niet zo hard afgegrensd als bovenstaande waardes. De grootte van de pagina wordt niet alleen bepaald door wat je ziet, maar ook door alle code die nodig is om de website correct te laden.
Speedindex is een andere waarde die meet hoe snel het deel van de website pagina voordat je moet scrollen visueel zichtbaar is op je scherm.
Hoe kun je de laadsnelheid van je website verbeteren?
Hoe je de laadsnelheid van je website kunt verbeteren is een grote open vraag. Ik zal een kort antwoord geven aan de hand van de bovenstaande parameters.
Hoe kun je de TTFB verbeteren?
TTFB is niet de belangrijkste waarde voor je vindbaarheid, het is geen zogenaamde Core Web Vital. Toch is het wel een belangrijke parameter omdat het aangeeft hoe je website zich verhoud tot je server. Hoe kan je dit verbeteren?
Hoe je site technisch is opgebouwd kan een groot verschil maken. De kwaliteit van, en het aantal plugins in je WordPress installatie kunnen bijvoorbeeld de TTFB beïnvloeden. Maar de eerste stap is het controleren van de instellingen van je hosting.
Over het algemeen is hosting op een gedeelde server trager dan wanneer je website alleen op een server staat. Voor de meeste gebruikers is dat laatste alleen te groot en te kostbaar. Dus in de praktijk zal een ZZP-er of een MKB-er meestal op een gedeelde server staan.
Dan is de vraag: Hoeveel ruimte krijgt jouw website op deze server? Over het algemeen krijgt een website bij een goedkopere hosting minder ruimte dan bij een wat duurdere hosting. Je huurt als het ware de server bij een goedkopere hosting met meerdere mensen en deelt de ruimte.
Controleer vervolgens of de hosting goed is ingericht voor je website.
Hoe kun je FCP en LCP verbeteren?
Omdat er enige overlap tussen deze twee waardes zit, behandelen we ze hier samen. Wanneer je een Page speed test doet en je FCP en LCP zijn niet voldoende, dan geeft deze test ook aan hoe je ze kunt verbeteren. Deze tekst is in het Engels, dus onderstaande lijst is dat ook.
- Reduce server response times (TTFB). Zie punt hiervoor.
- Eliminate render-blocking resources. Render-blocking resources zijn files of scripts die het laden van de pagina tegenhouden tot ze zelf volledig geladen zijn. Soms zijn deze files of scripts niet direct nodig en kun je het laden van deze scripts uitstellen tot na het laden van de pagina zelf.
- Minify CSS. CSS is een bestand waarin (een deel van) de styling van je website staat. Deze is vaak groter dan nodig. Soms is deze slecht opgebouwd, maar het kan ook zijn dat er veel css files worden geladen omdat elke plugin die je gebruikt een of meer eigen css files heeft.
- Remove unused CSS of JavaScript. Het kan zijn dat er files worden geladen die je niet gebruikt. Verwijder deze indien mogelijk.
- Avoid multiple page redirects. Je hebt redirects ingesteld maar er is een keten ontstaan. Dit zorgt voor meerdere verzoeken aan de server. Pagina A wijst naar B, B wijst naar C en C wijst naar D die op je scherm verschijnt. Opschonen van redirects (laat pagina A naar D verwijzen) is dan belangrijk voor de laadsnelheid.
- Improve network dependency tree. Zorg dat alleen de gegevens die nodig zijn voor het weergeven van de pagina worden geladen, de rest kan geregeld worden nadat de pagina zichtbaar is voor de bezoeker.
- Avoid enormous network payloads. Deze waarde wordt bepaald door de totale grote van alle bronnen die je pagina nodig heeft om te laden.
- Serve static assets with an efficient cache policy. Afbeeldingen of teksten die niet wijzigen kun je cachen (opslaan) Bij het herhaaldelijk laden van de pagina wordt dan de opgeslagen pagina gebruikt in plaats van hem opnieuw op te halen bij de server.
- Optimize DOM size. Een grote DOM size kan meer vragen van het beschikbare geheugen.
- Font display. Hiervoor stel je je font in op “swap” of “optional”.
Hoe kun je INP verbeteren?
Ook voor het verbeteren van de INP gelden meerdere van de opties hierboven. Extra aandacht moet worden besteed aan de DOM size en het aantal en de lengte van JavaScript wat wordt geladen.
Hoe kun je CLS verbeteren?
- Zorg dat al je afbeeldingen en video’s een duidelijke breedte en een hoogte hebben. Gebruik je een percentage? Let dan ook op aspect-ratio.
- Zorg dat je vaste ruimte vrijhoud voor inhoud die pas later laad en plaats dit type inhoud lager op de pagina.
- Laad webfonts zo vroeg mogelijk en zet font-display op optional.
Bovenstaande is een deel, maar zeker niet alles wat je kunt doen om de laadsnelheid van je website te verbeteren. Ook het controleren en eventueel saneren van je plugins en custom code is een belangrijke stap. Daarbij is ook het up-to-date houden van plugins en thema’s belangrijk.
Enkele andere opties om de laadsnelheid te verbeteren zijn het aanpassen van het formaat van je gebruikte afbeelding of video. En het gebruik maken van een content delivery network
