Zoals we hierboven al aangaven: je bekijkt gebruikerservaring het beste vanuit de gebruiker zelf. Google maakt hierbij zelf de vergelijking met een ‘real-world’ reis. Je wordt er niet blij van wanneer je een afspraak hebt in een onbekende stad, en terwijl je onderweg bent struikelt over losse straatstenen, omwegen moet nemen omdat bepaalde wegen zijn afgesloten en vervolgens terechtkomt in een file.
Ook op het web kan het voorkomen dat de klantreis niet helemaal soepel verloopt. Google zet hierbij drie zaken uiteen waarvan zij vinden dat dat op elke pagina goed moet zitten, namelijk snelheid (gemeten met Largest Contentful Paint), ‘responsiveness’ (gemeten met First Input Delay) en stabiliteit tijdens het laden (gemeten met Cumulative Layout Shift).
Goed om te weten: in de toekomst kan het altijd zijn dat er meer metrics bijkomen als onderdeel van de Web Vitals. Op dit moment zijn het echter deze drie.
Uit een analyse blijkt dat het zeker zin heeft om deze zaken goed op orde te hebben: de kans dat je gebruikers je site verlaten is 24% kleiner als je goed scoort op LCP, FID en CLS.
Largest Contentful Paint: zorg dat je pagina snel laadt
De snelheid waarmee de pagina laadt is één van de belangrijkste oorzaken van onderbrekingen in de onlineklantreis.
Zoals Google aangeeft is het onmogelijk om te zeggen wat precies “snel genoeg” is.
Verschillende onderzoeken laten namelijk variabele resultaten zien. Het ligt aan waar je naar kijkt: wil je het snel genoeg hebben zodat de gebruiker je site niet uit frustratie wegklikt? Of wil je het snel genoeg hebben zodat de gebruiker oprecht tevreden is?
Daarnaast ligt het helemaal aan de gebruiker zelf: wat zijn zijn/haar verwachtingen, hoeveel haast heeft hij/zij?
Om toch een concrete grens te trekken kijkt Google naar de zogenaamd Largest Contentful Paint.
Voorheen werd vooral naar de zogeheten First Contentful Paint gekeken. Dat wil zeggen: wanneer is het allereerste zichtbare element geladen? Dit bleek echter niet accuraat genoeg. Volgens Google is het daarom accurater om te kijken wanneer het grootste zichtbare element is geladen.
Voor een goede score op Largest Contentful Paint, moet je ervoor zorgen dat in 75% van de paginabezoeken het grootste zichtbare element binnen 2.5 seconde geladen is.
Als het langer dan 4 seconden duurt, dan scoor je ‘slecht’.
First Input Delay: zorg dat je interface vlot aanvoelt
Snelheid zit hem niet alleen in het objectieve, maar ook voor een groot deel in het gevoel van de gebruiker.
Als je als gebruiker ergens op klikt en je hebt op geen enkele manier een bevestiging dat er daadwerkelijk iets gebeurt, kan het lijken alsof de hele pagina is vastgelopen.
Uit verschillende onderzoeken bleek dat vanaf een vertraging van een tiende van een seconde (100ms) al de indruk kan wekken dat er iets aan het vastlopen is of traag reageert.
Denk bijvoorbeeld aan het klikken op een ‘Voeg toe aan winkelmandje’-knop. Soms wordt hiervoor een animatie gebruikt waarbij het product als het ware naar het winkelmandje toe ‘vliegt’.
Maar als er een te lange vertraging zit tussen het moment waarop de gebruiker op de knop klikt en het moment waarop de gebruiker het resultaat daarvan ziet, kan het lijken alsof er iets niet goed gegaan is.
De gebruiker kan dan uit frustratie 10 keer op die knop klikken en heeft vervolgens 10 keer het product in zijn winkelmandje. Dat is geen goede ervaring.
Zorg er dus voor dat interactieve elementen op de pagina zo snel als mogelijk reageren, en geef visuele feedback dat er iets 'in progress' is.
Voor een goede score op First Input Delay moet je zorgen dat in 75% van de paginabezoeken er 100 milliseconden of minder vertraging zit tussen een interactie op je pagina en het resultaat daarvan.
Cumulative Layout Shift: zorg dat je layout niet verschuift tijdens het laden
Tijdens het laden van een pagina worden de layout-elementen vaak in een bepaalde volgorde geladen, wat ervoor kan zorgen dat de positie van elementen die al zijn geladen opeens verandert.
Soms kan dat een slechte gebruikerservaring opleveren, bijvoorbeeld als iets wat eerst zichtbaar was ineens buiten beeld valt waardoor de gebruiker moet scrollen.
Of wanneer de gebruiker nét op iets wil klikken en dan de layout verschuift, waardoor hij onbedoeld op iets anders klikt.
Google neemt dit aspect daarom ook op in de Core Web Vitals. Hoewel het het beste is als de layout helemaal niet verschuift, krijg je daarin enige ruimte van Google.
Om CLS te meten kijkt Google naar twee dingen: hoe vaak je layout verschuift en hoe groot die verschuivingen zijn. Je moet dus met beide rekening houden om je score eventueel te verbeteren.
Voor een goede score op Cumulative Layout Shift, moet je in 75% van de paginabezoeken 0.10 of lager scoren. Alles boven de 0.25 wordt als ‘slecht’ beschouwd.
Overzicht
Om alles wat we hierboven hebben besproken nog even op een korte manier samen te vatten, hebben we een visueel overzicht gemaakt van de scheidingslijnen van Google.
