Een snelle website hebben is altijd al een goed idee geweest. Met een snelle website is de gebruikservaring van je bezoekers beter, waardoor ze langer blijven en sneller zullen converteren. Met Google’s Core Web Vitals is een snelle website ook nog eens goed voor je online vindbaarheid. En dat is natuurlijk wat iedereen wil! Maar hoe zorg je ervoor dat jouw website snel is, wat houden deze ‘Core Web Vitals’ in en met welk CMS maak jij alvast een goede start? Dat lees je in deze blog!
In dit blog ontdek je:
- Waarom een snelle website van belang is
- Wat Google’s Core Web Vitals zijn
- Key takeaways om je website snel te maken en te houden
- Het verschil in snelheid tussen verschillende CMS'en
- Hoe MODX je helpt met je online snelheid
Rank beter en groei conversies met een snelle website
Talloze organisaties leggen de focus op een snelle website. En niet voor niks: Amazon geeft aan dat een seconde langere laadtijd hen jaarlijks $1,6 miljard kost. Ook Google testte zijn zoekresultaten pagina’s met 30 zichtbare resultaten vs. de huidige 10. Hoewel het verschil in laadtijd niet extreem groot was (0,5 seconde), was het resultaat gigantisch: 20% minder verkeer op de langere, tragere pagina’s. Vergelijkbaar zorgt een vertraging van 400 ms in Google’s zoekresultaten voor 8 miljoen minder ad impressions per dag.1
Snelle websites converteren dus een stuk beter.
Niet alleen dat: ook Google heeft met z’n Core Web Vitals een duidelijk signaal gegeven aan het belang van snelheid voor jouw site ranking. De laadtijd van je website en hoe je website zich gedraagt zijn nu net zo belangrijk als SSL en mobielvriendelijkheid dat eerder al waren. Om je concurrentie voor te blijven en ervoor te zorgen dat jij gevonden wordt, is snelheid dus cruciaal.
Oftewel: Go fast or go home.
Google’s Core Web Vitals
Snelheid is altijd al belangrijk geweest, en met Google’s Core Web Vitals is het helemaal duidelijk geworden: zonder snelheid kom je er niet. Google’s Core Web Vitals meten de gebruikerservaring en daarmee hoe goed de indruk is die je website achterlaat. En we weten allemaal hoe belangrijk een eerste indruk is. Dit kan hét verschil maken tussen een trouwe klant en een bezoeker die je pagina verlaat en nooit meer terugkomt.
Onderzoek van Google laat zien dat een vertraging in laadtijd van 1 naar 3 seconden leidt tot een verhoging van 32% in bounce rate. Deze kans wordt nog groter wanneer laden 5 seconden duurt. Dan verlaat zelfs 90% van je bezoekers je website.2
Via PageSpeed Insights kun je zien hoe jouw website presteert op mobiel en desktop. Daarnaast geeft deze tool tips hoe je je score kunt verbeteren. Als je vervolgens klikt op ‘See calculator’ kun je ook nog eens zien welke factoren het meest belangrijk zijn voor het verbeteren van jouw PageSpeed score:
De Core Web Vitals kijken naar de drie belangrijkste factoren voor het bepalen van je Pagespeed score: laadtijd, interactiviteit en stabiliteit van de pagina tijdens het laden:
Laadtijd, ook wel Largest Contentful Paint (LCP) genoemd
De Largest Contentful Paint meet de laadtijd op basis van hoe lang het duurt tot het grootste stuk content dat zichtbaar is in het beeldscherm (zonder scrollen) geladen is. Waarbij content een afbeelding, een afbeelding binnen een SVG element, achtergrondafbeelding, de thumbnail van een video of een tekstblok is. Elk stuk content wat buiten het beeld komt wordt dus ook niet meegenomen met de Largest Contentful Paint.
Een goede laadtijd is minder dan 2,5 seconden. Tussen de 2,5 en 4 seconden is nog acceptabel en alles daarboven duurt eigenlijk gewoon te lang en zorgt ervoor dat bezoekers je website verlaten. Hoog tijd dus om aan de slag te gaan!
De LCP wordt voornamelijk beïnvloedt door render-blokkerende JavaScript en CSS bestanden, langzame reactietijd van de server, laadtijden van verschillende resources en client-side rendering (renderen aan de browser/gebruikerskant). Om de LCP te verbeteren kun je het volgende doen:
- Laat resources instant laden door het PRPL patroon toe te passen
- Preload de belangrijkste resources
- Render eerst hetgeen wat zichtbaar is op het scherm
- Pre-cache elementen
- Lazyload andere, minder belangrijke elementen (die niet direct zichtbaar zijn)
- Laat elementen progressief inladen
- Optimaliseer je CSS door deze te verkleinen en ongebruikte CSS te verwijderen
- Optimaliseer je afbeeldingen door deze te comprimeren, een kleinere resolutie te gebruiken en gebruik te maken van bestandsformaat WebP
- Optimaliseer webfonts door bestandsgroottes te verkleinen, een system font te tonen tijdens het laden van het webfont en gebruik te maken van caching.
Interactiviteit, ofwel First Input Delay (FID)
Hoe lang duurt het voor de website reageert op bepaalde interacties? We hebben allemaal wel eens een website meegemaakt die geladen is, maar zodra we ergens op klikken gebeurt er niks! De reden dat het klikken geen direct effect heeft is omdat de browser nog met een andere taak bezig is, zoals het inladen van grote JavaScript bestanden. De browser kan dan nog niet reageren op de actie van de gebruiker, omdat de JavaScript die de browser aan het laden is hem misschien vertelt wat anders te doen. Daardoor kan het soms lang duren voordat de actie die je uitvoerde verwerkt is.
De FID meet dus de tijd tussen de eerste interactie van de gebruiker (klikken op een link, een knop aanraken of een andere JavaScript-aangestuurde actie) tot de browser reageert op deze actie. Daarnaast wordt FID alleen gemeten wanneer er wordt geklikt, getapt of een toets wordt ingedrukt. Scrollen en in- en uitzoomen hebben geen invloed op de FID. Het kan dus zo zijn dat als je je website door een PageSpeed check haalt, dat deze geen FID score afgeeft. Er is per slot van rekening helemaal geen gebruikersinteractie geweest.
Om goed te scoren met FID moet je gaan voor 100ms of minder, 300ms is al te langzaam. Doordat FID alleen gemeten wordt wanneer de gebruiker een actie uitvoert, kan het misschien lastig zijn om jouw score te bepalen. Een goede techniek om dit wel te meten is door te kijken naar de Total Blocking Time (TBT). Deze meet de tijd tussen de First Contentful Paint - de tijd dat het duurt voor het eerste stukje content is geladen - en de Time to Interactive (TTI) - de tijd dat een pagina ver genoeg geladen, dat deze snel kan reageren op eventuele gebruikersinteracties.
Om de TBT en daarmee de FID te verbeteren, kun je de volgende optimalisaties toepassen:
- Verklein de impact van code van derden voor bijvoorbeeld Google Analytics, adverteringsnetwerken, social mediaknoppen en HubSpot.
- Verminder de tijd die de browser nodig heeft om JavaScript bestanden in te laden en uit te voeren.
- Houd het aantal netwerkverzoeken laag en de grootte van data transfers klein.
Visuele stabiliteit, ofwel Cumulative Layout Shift (CLS)
Je hebt het vast wel eens meegemaakt: je bent wat online aan het lezen en ineens verschiet de tekst en ben je kwijt waar je was gebleven. Of je wilde net op een link klikken en BOEM de link verschuift en jij klikt op een willekeurige andere link die jou leidt naar een pagina waar je helemaal niet wilde zijn. Super irritant natuurlijk. Daarom heeft Google dit meegenomen als Core Web Vital.
De reden dat de layout van een pagina verandert is doordat elementen asynchroom of dynamisch worden ingeladen. Dit kunnen bijvoorbeeld afbeeldingen of video’s zijn met onbekende afmetingen, een font dat groter of kleiner uitvalt dan de fallback versie of een advertentie of widget van derden die zichzelf in de juiste grootte zet.
Binnen CLS wordt gekeken naar de grootste onverwachte verplaatsing van elk element binnen een pagina. Hierbij wordt niet gekeken naar nieuwe elementen die in een frame verschijnen. Als we naar de afbeelding hierboven kijken telt de CTA knop in het tweede frame dus niet mee voor de score, alleen de verplaatsing van het groene tekstblok.
De score wordt bepaald aan de hand van de volgende formule:
layout shift score = impact fraction * distance fraction
Waarbij impact fraction de impact die onstabiele elementen hebben op hetgeen wat je in het beeldscherm zichtbaar is. In de afbeelding is dit de hoeveelheid dat het groene blok in het beeldscherm inneemt + de zichtbaarheid van hetzelfde element na verplaatsing. In dit geval dus de rode stippellijn die 50% van het beeld bezet heeft. De impact fraction is dus 0,5.
De distance fraction is de hoeveelheid dat het element verplaatst heeft binnen het zichtbare gedeelte van een pagina. In de afbeelding is dit de blauwe pijl, ongeveer 15%. De distance fraction is dus 0,15. Dat maakt de layout shift score 0,5 x 0,15 = 0,075.
Een goede CLS is minder dan 0,1. Tussen de 0,1 en 0,25 heeft verbetering nodig en alles hoger dan dat is eigenlijk gewoon slecht. Maar gelukkig zijn er manieren om ook deze score te verbeteren:
- Reserveer de ruimte die afbeeldingen en video’s nodig hebben op een pagina. Bijvoorbeeld door de maat van een afbeelding in de code te zetten. Zo zorg je ervoor dat de browser alle elementen tijdens het laden op de juiste plek op een pagina zet en niet nog elementen er tussen hoeft te ‘proppen’.
- Voeg nooit content boven bestaande content toe, behalve als een interactie van de gebruiker hierom vraagt. Zo zorg je ervoor dat content niet onverwacht verplaatst.
- Animaties kunnen natuurlijk nog steeds gebruikt worden, maar let wel op dat deze geen verplaatsing van content veroorzaken. Zorg er in plaats daarvan voor dat animaties bijdragen aan de gebruikerservaring door gebruikers met de animaties context te geven wat er gebeurt op een pagina (zoals een laadanimatie).
Snel, sneller, snelst
Oké, het is nu wel duidelijk: snelheid is ALLES. Hoog tijd dus om die peper in je website te steken en wel met deze takeaways:
Optimaliseer afbeeldingen
Misschien wel de belangrijkste tip om jouw website snel te houden is door het optimaliseren van afbeeldingen. Een stap in de goede richting hiervoor is het gebruik maken van Google’s bestandsformaat WebP. Dit bestandsformaat heeft de voorkeur van Google omdat het kleiner is en dus een stuk sneller laadt. Ook kun je er zelf voor zorgen dat elke afbeelding die je upload maximaal 300mb is door de resolutie laag te houden (72dpi) en de afbeelding klein. Ook het optimaliseren van de afbeeldingen is erg belangrijk. Hier kunnen fotobewerkingsprogramma’s als Photoshop je een handje bij helpen.
Pas lazyload toe
Daarnaast kun je lazyload toepassen zodat niet alle content van een pagina in één keer ingeladen wordt. Het kan namelijk erg lang duren voordat alle content geladen is, helemaal als je een grote website hebt, terwijl dit helemaal niet nodig is. Een bezoekers van een website ziet namelijk maar een klein deel van de volledige website wanneer hij hierop komt. Met lazyload zorgen we ervoor dat eerst datgene geladen wordt wat in het beeld zichtbaar is en daarna worden overige elementen ingeladen.
Met deze twee eerste tips zorg je ervoor dat de grootste vertrager van de website eruit wordt gehaald: het renderen van de afbeeldingen.
Voorkom redirect loops
Om de snelheid van je pagina zoveel mogelijk te verbeteren is het belangrijk om niet te veel gebruik te maken van redirects. Hoewel redirects verder helemaal prima zijn, is het belangrijk om in gedachte te houden niet meer dan één redirect toe te passen. Wanneer je dit wel doet zorgt dit ervoor dat Google en andere webbrowsers twee of meerdere keren een pad moet doorlopen om naar de website te komen. De webbrowser wordt namelijk eerst naar een bepaalde online locatie gestuurd, om vervolgens daar pas te horen te krijgen dat hij daar niet moet zijn, maar ergens anders. Vervolgens gaat de webbrowser naar de volgende locatie, en naar de volgende, totdat hij bij de juiste pagina is aangekomen. Je kan je voorstellen dat daarmee het laden van een website pagina al snel twee keer zo lang kan duren.
Host op een supersnelle server
Soms kan je website nog zo snel zijn, maar dat is helaas niks (of niet zoveel) waard, als je server of webhosting partij niet snel genoeg is. Tegenwoordig kom je overal wel webhosting partijen tegen waar de een nog goedkoper is dan de andere, waardoor het voor kan komen dat er compromissen gemaakt moeten worden wat betreft de hosting. Wat weer ten koste kan gaan van jouw snelheid, veiligheid en online performance.
Caching = Kaching
‘Cache is king’, een uitspraak die steeds vaker voorkomt en ook zeker niet gelogen is. Caching is het opslaan van content van de pagina’s die jouw gebruikers hebben bekeken. Door deze op te slaan, hoeft de content de volgende keer dat de website bezocht wordt niet meer volledig opnieuw geladen te worden.
Snelheid zit ‘m in het CMS
Content management systemen zijn de ruggengraat van het internet: de meeste websites draaien wel op een CMS. De keuze voor een CMS die voldoet aan Google’s Core Web Vitals is dan ook essentieel voor een snelle website. En daar zit nogal een verschil in laat onderzoek van Sistrix zien. Zij hebben de laadtijden van 18,5 miljoen domeinen geanalyseerd en kwamen voor de CMSen met de volgende resultaten:
Het Duitse CMS Jimdo staat trots aan top. Met 82% van de geteste Jimdo domeinen die voldoen aan Google’s verwachtingen, levert dit CMS de beste score voor de Largest Contentful Paint. WordPress daarentegen, het meest gebruikte CMS wereldwijd, laat veel minder goede resultaten zien. Slechts 58,3% van de WordPress websites die getest is voldeed aan de Core Web Vitals. Daarmee behaalt het net niet de laatste plek. Deze is ingenomen door Wix, wat net als #1 Jimdo een cloud-based CMS is. Dit laat zien dat het niet uitmaakt of je gebruik maakt van een cloud-based CMS of een open-source CMS.
Tenslotte heb je ons favoriete CMS misschien ook wel zien shinen op z’n derde plek: MODX! Websites gebaseerd op het MODX CMS voldoen in bijna 80% van de gevallen aan Google’s Core Web Vitals. En dat maakt MODX een van de snelste CMSen. Hoe MODX dat voor elkaar heeft geschopt, vertellen we hieronder.
Het volledige onderzoek van Sistrix (zeker een aanrader!) kun je hier vinden: https://www.sistrix.com/blog/core-web-vitals-wix-vs-wordpress-shopify-vs-shopware-whats-fastest/
Overtref de concurrentie met MODX
In principe zijn wij van mening dat een CMS juist geen impact zou moeten hebben op de snelheid van je website (de voorkant), omdat wij als agency deze website/voorkant maken. Dit staat dus volledig los van het CMS. Toch is MODX een van de snelste CMSen. En dat is niet zo gek: MODX is vanuit de basis gebouwd voor snelheid. MODX voegt geen enkele extra eigen code toe aan de voorkant van de website en vereist dat ook niet via rare plugin-systemen. Iets wat bij andere populaire CMS’en wel gebeurt.
Combineer dit met een robuust caching systeem en slimme semantische code en MODX blijft licht en snel én overtreft de laadtijden van de meeste andere CMSen. Daarnaast hebben wij ook nog scripts geschreven die verder helpen met het verbeteren van de PageSpeed, door afbeeldingen automatisch te optimaliseren.
Robuust caching systeem
MODX heeft een robuust caching systeem die standaard de content cachet, een map creëert waar alle gecachede content in te vinden is en de cache leegt wanneer een ‘Resource’ (een pagina in het CMS) is aangemaakt of opgeslagen. Daarnaast biedt MODX nog enkele caching opties die jou laten bepalen of een cache wel of niet leeggemaakt wordt en wat eruit gehaald wordt.
Automatisch omzetten naar WebP
Een voorbeeld de scripts die wij voor MODX hebben geschreven zorgt ervoor dat geüploade afbeeldingen automatisch worden overgezet naar het nieuwe, door Google ontwikkelde afbeeldingsformaat WebP. Dit bestandsformaat is kleiner en bevordert daarmee de laadsnelheid van jouw website. Door dit script kun je elk bestandsformaat uploaden en deze wordt automatisch aangepast naar dit nieuwe bestandsformaat.
Automatische afbeeldingsoptimalisatie
Een ander script dat wij hebben gemaakt is het script dat afbeeldingen automatisch optimaliseert voor web. Afbeeldingen die geüpload worden zijn vaak niet 100% geoptimaliseerd, zelfs niet als je dit in een fotobewerkingsprogramma als Photoshop aangeeft. Dit script controleert elk uur alle afbeeldingen en optimaliseert ze automatisch op de best mogelijke manier.
Dus: snelheid moet hoe dan ook jouw prioriteit hebben bij het bouwen en optimaliseren van je website. MODX is gebouwd met het oog op snelheid, dat is dan ook een van de redenen dat dit CMS zo hoog scoort. Om jouw Google PageSpeed score zo hoog mogelijk te maken kun je dus gaan voor MODX of een ander snel CMS, en kun je samen met je developers kijken hoe je deze nog verder kunt verbeteren.
Meer weten over MODX? Download onze MODX guide hier of ontdek het CMS inside-out met een MODX demo!
1: https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
2: https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/
