Voor bestaande websites zijn de looks altijd belangrijk. Dit is nota bene wat de mensen aantrekt. Naast het uiterlijk van een website zijn ook de handelingen op een website belangrijk. Dit heeft alles te maken met de UX (user experience). Een goede UX betekent in de meeste gevallen dat een bezoeker zeer waarschijnlijk terug zal keren naar de website of de website zal aanbevelen aan anderen. Hierdoor zal de website meer bezoekers krijgen.
Maar hoe meet je deze website experience nu precies?
Sinds kort bestaat daar een tool voor: Lighthouse. Deze tool meet de Core Web Vitals van een website. Google vindt het namelijk steeds belangrijker hoe de gebruikerservaring is op een website en sinds 2021 zijn ze dit zelfs als een ranking factor gaan gebruiken.
De Core Web Vitals zijn opgebouwd uit specifieke factoren, waarvan Google vindt dat deze bijdragen aan goede user experience. Momenteel bestaan de Core Web Vitals uit drie metrics. Dit zal in de toekomst uitgebreid worden.
De drie metrics zijn:
Het is belangrijk om te begrijpen dat de drie metrics zich niet focussen op de content van de website, maar dat ze zich richten op de laadsnelheden, reactietijden en visuele stabiliteit. Voor elke factor wordt een bepaalde waarde gegeven. Hoe beter deze waarde, hoe beter de overall score zal zijn van de Core Web Vitals. Er zullen twee resultaten worden weergeven voor de overall scores. Een resultaat voor de desktop weergave en een score voor de mobiele weergave van de website.
De Largest Contentful Paint, of LCP in het kort, meet de snelheid waarmee de aangeklikte webpagina laadt en dus hoe snel de content zichtbaar is (de laadtijd van een webpagina). Des te sneller de content op de webpagina geladen is, des te beter de score zal zijn. Bij LCP gaat het er niet om dat alle content, maar het grootste en belangrijkste deel van de content geladen wordt. Dit wetende stellen we het volgende: een goede LCP score laat de eigenaar van de website en de developer weten hoe snel een bezoeker iets heeft aan een pagina.
De LCP heeft drie verschillende ranges om te bepalen hoe goed of slecht de score is. Als de laadtijd onder de 2,5 seconden is, dan wordt de LCP als een goede score beschouwd. Een laadtijd tussen de 2,5 seconden en 4 seconden wordt beschouwd als een matige score, waar ruimte is voor verbetering. Een laadtijd langer dan 4 seconden wordt als een slechte score gezien.
De First Input Delay (FID) is gericht op de interactie tussen de bezoeker van een website en de webpagina zelf. Met andere woorden, het checkt hoe lang het duurt voordat de webpagina reageert op de input van de bezoeker. Een bezoeker verwacht dat een webpagina direct zal reageren, zodra er op een button of hyperlink geklikt wordt. In realiteit gebeurt dit natuurlijk niet, maar de tijd tussen de input van de bezoeker en het uitvoeren van een actie is zo klein (meestal in milliseconden), dat het voor de bezoeker lijkt alsof er geen delay is.
Ook voor de FID geldt dat er drie verschillende ranges zijn om te bepalen of de score goed, matig of slecht is. Een FID score van onder de 100 ms is een gewenste score waar de bezoeker geen delay zal merken. Een score tussen de 100 ms en 300 ms is een matige score. Hier zal verbetering nodig zijn om ervoor te zorgen dat de gebruiker een soepelere en vloeibare ervaring zal hebben en geen kleine delays zal meemaken. Een score boven de 300 ms is een slechte score. Een bezoeker zal dit ervaren als hij steeds maar weer moet wachten op een actie van de webpagina na een input. Dit kan ervoor zorgen dat de bezoeker de website zal verlaten.
Cumulative Layout Shift (CLS) meet de visuele stabiliteit. Hierbij wordt gecheckt of alle content van een webpagina op de juiste plek blijft staan en niet beweegt tijdens het laden van de webpagina. Er is natuurlijk niks vervelender voor een bezoeker dan dat er per ongeluk op een verkeerde knop gedrukt wordt en dat de content van de webpagina ineens van plaats verandert tijdens het laden.
Om een goede score te krijgen voor de CLS moet de score onder de 0.1 blijven. Als er een score ontstaat tussen de 0.1 en 0.25, dan is verbetering vereist en ervaren de bezoekers meer last met het verschuiven van de content tijdens het laden van de webpagina. Bij een score hoger dan 0.25 ervaren de bezoekers van de webpagina te grote verschuivingen van de content op de webpagina tijdens het laden.
Zoals eerder vermeld gebruikt Google de Core Web Vitals score als een ranking factor voor zoekopdrachten, omdat zij de prioriteit hebben neergelegd bij UX. Als de score hoog is, zal de website bovenaan de resultaten van een gerelateerde zoekopdracht verschijnen. Hierdoor zullen zij dus meer bezoekers ontvangen op de website. Maar waar kunnen precies verbeteringen gemaakt worden om de LCP, FID, CLS scores te verbeteren en daarmee de overall score van de Core Web Vitals te verhogen?
Kijkend naar de LCP zijn er een aantal factoren die tot een slechte score leiden, zoals: een trage reactietijd van de server, de render-blocking van JavaScript en CSS, client-side rendering en het te traag laden van resources.
De content van een website wordt geladen vanaf de server en wordt vervolgens weergegeven op het scherm van de laptop of telefoon van de bezoeker. Om erachter te komen waarom de reactietijd van de server zo traag kan zijn, moet er gekeken worden naar de waarde van de Time To First Byte (TTFB). Dit is de tijd van de browser van de bezoeker voordat deze de eerste byte van de content van de website ontvangt. Als de TTFB te lang is, kan er een probleem zijn in de application logic van de server, waardoor de routes van de verzonden data te lang is. Deze routes kunnen geoptimaliseerd worden om de reactietijd te verlagen, maar het kan ook zijn dat de hardware van de computer te oud is of er niet genoeg geheugen of CPU is, waardoor er minder data verstuurd kan worden.
Zowel JavaScript als CSS staan erom bekend dat ze de weergave van content op webpagina’s kunnen blokken, waardoor ze de LCP vertragen. Om dit te voorkomen moeten verschillende scripts – met name de niet-kritieke scripts – en stylesheets uitgesteld worden, totdat het grootste deel van de content van de webpagina geladen is. Dit kan bereikt worden door de volgorde van het uitvoeren van scripts en stylesheets te veranderen. Hierdoor zullen de niet-kritieke scripts en stylesheets, die niet nodig zijn voor het laden van het grootste deel van de content van de webpagina, als laatst uitgevoerd worden.
Door de vele mogelijkheden die JavaScript frameworks biedt en de gemakkelijkheid waarmee ze te gebruiken zijn, passen steeds meer mensen dit toe. Echter kan dit nadelig zijn voor de LCP score, omdat er teveel kritieke scripts gebruikt worden. Hierdoor zal er niets zichtbaar zijn op de webpagina, totdat alle kritieke scripts uitgevoerd zijn. Om een verslechtering van de LCP score te voorkomen, zal er minder gebruik gemaakt moeten worden van kritieke scripts gemaakt of zal er een switch naar server-side rendering moeten komen.
Afbeeldingen en video’s worden vaak gebruikt op webpagina’s. Echter vragen zij erg veel geheugen van de server om te laden. Hoe meer geheugen deze vragen, des te trager de laadtijd zal zijn. Dit heeft een negatief effect op de LCP score. Om dit te voorkomen, is het een verstandig idee om de resources te comprimeren. Zo zijn ze kleiner in formaat qua geheugen en kunnen ze sneller geladen worden.
De grootste factor die de FID score negatief beïnvloedt, is de zware JavaScript uitvoering (heavy JavaScript execution). Er zijn verschillende manieren om dit te voorkomen. Een manier om heavy JavaScript execution te voorkomen, is door lange taken te mijden. Een taak die langer duurt dan 50 ms, wordt al gezien als een lange taak en kan voor onnodige oponthoud zorgen. Er moet namelijk meer geladen en uitgevoerd worden dan nodig. Daarom is het verstandiger om lange taken op te splitsen in kleinere taken.
Een andere manier is het gebruik van een web worker. Web workers maken het mogelijk om verschillende JavaScript scripts, meestal scripts die niets te maken hebben met de User Interface (UI), te verplaatsen naar een background thread. Hier kunnen de scrips alsnog uitgevoerd worden, maar zal de FID score verbeteren.
De meest voorkomende factoren die een negatief effect hebben op de CLS score, zijn: afbeeldingen en video’s die geen dimensies hebben, advertenties zonder dimensies, dynamisch geïnjecteerde inhoud en acties die wachten op een netwerkreactie voordat de DOM (Document Object Model) wordt geüpdatet.
Om de CLS score te verbeteren, moet er gecheckt worden of de afbeeldingen en video’s op de website een hoogte- en breedte attribute hebben. Hierdoor voorkom je dat de afbeeldingen en video’s gaan bewegen als de webpagina geladen wordt. Hetzelfde geldt voor eventuele advertenties die op de webpagina verschijnen. Hierbij moet rekening gehouden worden met het feit dat zonder de hoogte- en breedte attribute, de advertentie van plaats zal veranderen tijdens het laden van de webpagina. Er wordt namelijk geen plek voor vrijgehouden. Met de dynamische geïnjecteerde inhoud hebben we het vooral over pop-ins. Deze kunnen vergeleken worden met advertenties en zullen voor een slechtere CLS score kunnen zorgen als er geen plek op de webpagina is vrijgehouden voor een eventuele pop-in. Alle inhoud van de webpagina zal dan verschuiven. Om een hogere CLS score te krijgen, moet er plaats gemaakt worden (denk aan een placeholder) om ervoor te zorgen dat de inhoud niet zal verplaatsen.
