Gaan straks de Core Web Vitals van Google jouw site nekken?

Maar minstens even belangrijk: Wat zijn dat eigenlijk, die ‘Core Web Vitals’.

30 december 2024 – Dit artikel is een complete rewrite van mijn eerdere artikel over dit onderwerp in maart 2021

In de wereld van digitale marketing en webontwikkeling draait alles om gebruiksvriendelijkheid en prestaties. Een cruciaal onderdeel hiervan is de snelheid en responsiviteit van een website. Google Page Speed Core Web Vitals, een set van meetbare statistieken, helpt ontwikkelaars en website-eigenaren om de gebruikerservaring te verbeteren en hun positie in de zoekresultaten te optimaliseren. In deze blogpost duiken we dieper in op wat Core Web Vitals zijn, waarom ze belangrijk zijn en hoe je ze kunt verbeteren.

Wat zijn dan die ‘Core Web Vitals’?

Wanneer je aan eisen moet gaan voldoen, dan is het natuurlijk ook leuk om te weten, wat die eisen zijn. Gelukkig heeft Google dat duidelijk uiteen gezet.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP)

LCP meet hoe lang het duurt voordat het grootste zichtbare element (zoals een afbeelding, video of tekstblok) in het viewport volledig is geladen.

Waarom is LCP belangrijk?
Een snelle LCP zorgt ervoor dat gebruikers snel toegang krijgen tot de belangrijkste inhoud van een pagina, wat een positieve impact heeft op de gebruikerservaring. Als een pagina traag laadt, kan dit leiden tot frustratie en een hogere bounce rate.

Wat is een goede LCP-score?

• Goed: Minder dan 2,5 seconden.
• Verbetering nodig: Tussen 2,5 en 4 seconden.
• Slecht: Meer dan 4 seconden.

Hoe kun je LCP verbeteren?

• Gebruik snelle hosting.
• Optimaliseer afbeeldingen door compressie en moderne bestandsformaten (zoals WebP).
• Minimaliseer CSS- en JavaScript-bestanden.
• Implementeer lazy loading voor afbeeldingen en video’s.

First Input Delay (FIP)

De ‘First Input Delay’ is de tijd die er zit tussen het klikken ergens op en de daadwerkelijke actie die er op moet volgen. Wanneer ik bijvoorbeeld klik op een link, dan kan het bij een trage site zo zijn, dat ik pas na enkele seconden merk, dat er ook daadwerkelijk iets gebeurd. Of wanneer ik druk op de knop van een formulier, kan het een tijdje duren voor het formulier daadwerkelijk wordt verzonden.

De gebruikerservaring met een website wordt vaak negatief beïnvloed door sites die traag reageren op de interactie met de gebruiker en Google heeft daarom besloten dit ook als een belangrijke factor in de Core Web Vitals op te nemen.

Wat is een goede FID-score?

• Goed: Minder dan 100 ms.
• Verbetering nodig: Tussen 100 en 300 ms.
• Slecht: Meer dan 300 ms.

Hoe kun je FID verbeteren?

• Minimaliseer de impact van JavaScript door het uitstellen of splitsen van scripts. Plugins zoals WP Rocket, Autoptimize of Async JavaScript kunnen hierbij helpen door scripts automatisch te optimaliseren en uit te stellen, wat de laadtijd aanzienlijk kan verbeteren.
• Maak gebruik van browsercaching door HTTP-cachingregels in te stellen. Configureer headers zoals Cache-Control en Expires om statische bronnen zoals afbeeldingen, CSS en JavaScript lokaal op te slaan in de browser van de gebruiker. Dit vermindert het aantal verzoeken naar de server bij herhaald bezoek.
• Verminder serverresponsetijden door gebruik te maken van snelle hosting, optimaliseer database-query’s, maak gebruik van cachingmechanismen en minimaliseer het gebruik van zware backendprocessen.
• Gebruik een Content Delivery Network (CDN).
• Gebruik een reverse proxy. Een reverse proxy zoals Nginx of Varnish kan helpen bij het optimaliseren van serverprestaties. Het fungeert als een tussenlaag die verzoeken van gebruikers verwerkt voordat ze de webserver bereiken. Hierdoor kan caching van statische inhoud worden toegepast, serverbelasting worden verminderd en load balancing worden uitgevoerd voor betere schaalbaarheid. 

Cumulative Layout Shift (CLS)

De CLS is denk ik wel het lastigst te begrijpen meetgegeven van deze drie Core Web Vitals. En ook hier gaat het vooral om de gebruikservaring. De CLS geeft aan hoe vaak er tijdens de levenscyclus van de pagina ‘iets’ in de layout ‘onbegrijpelijk’ veranderd. Je kan hierbij bijvoorbeeld denken aan een afbeelding die vertraagd wordt geladen en ‘ineens’ de pagina naar beneden drukt. Hetzelfde effect kan je krijgen, wanneer je een site hebt met veel advertenties die vanuit een externe adverteerder worden geladen.

Wanneer je aan het lezen bent, is het natuurlijk niet fijn, wanneer de content steeds verspringt. En daarom is dit in de Core Web Vitals ook als belangrijke factor opgenomen.

Op een rijtje: wat zijn nu ‘goede’ en ‘slechte’ waarden voor mijn Core Web Vitals?

Goed dat we nu weten, wat er gemeten wordt, maar welke waarden zijn nu ‘goed’ en welke zijn er ‘slecht’. Gelukkig is Google daar heel duidelijk in:

Google geeft geen troostprijzen weg. Wil je hoger eindigen in de zoekresultaten, dan moeten al jouw ‘metrics’ binnen de eerste kolom (Goed) vallen.

Da’s leuk, maar hoe kan ik achter deze getallen komen?

Weet je nog dat ik een aantal weken geleden heb aangegeven, dat het goed is om Google Search Console te activeren? Ik hoop dat je dit ook gedaan hebt, want dan heb je nu Core Web Vitals tot je beschikking. Wanneer je bovendien ook nog gebruik maakt van de Google Site Kit plugin, en daarbij ook de PageSpeed module activeert, dan heb je alle gegevens die je nodig hebt, direct in je website staan.

Ik heb een probleem! Hoe los ik dit op?

Maar wat nu, wanneer je leest, dat je website niet aan de eisen voldoet? Wat moet je dan doen?

Gelukkig rapporteert Google PageSpeed Insights heel gedetailleerd. En er worden ook diverse hints gegeven hoe je die performance kan verbeteren.

Wanneer je nooit echt veel aan je website performance hebt gedaan is ‘Leverage Browser Caching‘ waarschijnlijk wel één van de eerste meldingen die je zal krijgen. Gelukkig heb ik hier jaren geleden al een uitgebreid artikel over geschreven en wanneer jij denkt, dat de methode die ik daarin beschrijf toch wel heel complex is, dan heb je geluk… er is ook een plugin die jou daarbij helpt. Heel origineel heeft de maker hem ‘Leverage Browser Caching‘ genoemd.

Heb je problemen met de tijd voordat de server een eerste antwoord geeft? Ik heb door de jaren heen heel wat over caching geschreven. Waarschijnlijk vind je jouw antwoord daar ook wel terug. En zo niet, ben je altijd welkom om je vraag in de commentaren bij de blogposts achter te laten. Ik geef zeker antwoord!

En heb ik het goed gedaan?

En nu heb je dus al die aanpassingen gedaan en wil je graag weten of je het goed hebt gedaan. Jammer, maar helaas. Wanneer je Google PageSpeed Insights gebruikt om de pagina op te vragen, dan merk je niet alleen dat je pagina nog steeds even traag lijkt, maar dat volgens Google er nog niets aan je site is veranderd.

En dat komt, omdat Google deze rapporten niet ‘live’ bijwerkt, maar gemiddelde gegevens van de afgelopen 28 dagen gebruikt. Hoe Google jouw pagina werkelijk ziet, merk je pas over 28 dagen!

Da’s balen, nietwaar?

Hulp met Matomo

Gelukkig is er een heel handig hulpmiddel. Matomo Analytics is een analytische tool, die je enigszins met Google Analytics kan vergelijken. Maar dan met iets meer mogelijkheden. Eén van de leuke extra mogelijkheden is dat je de LCP als het ware kunt ‘ontleden’.

Het probleem met de LCP

Eén van de problemen van de LCP is dat deze waarde uit een groot aantal componenten is opgebouwd. Voor een deel heeft het te maken met de snelheid van je server, voor een deel met de complexiteit van je pagina en voor een deel met factoren waar je niet eens invloed op hebt. Want wanneer iemand met een langzame computer, weinig geheugen en veel open vensters jouw pagina laadt, dan zal dat niet snel zijn.

Het is daarom goed om een onderscheid te maken tussen de zaken waar je invloed hebt, en de zaken die je niet kan verhelpen. En dat is één van de leuke dingen die met Matomo mogelijk wordt.

In de afbeelding hierboven die je de verschillende fases in het opbouwen van de pagina. Je mag hier overigens niet zomaar de tijden bij elkaar optellen, omdat een aantal processen parallel loopt. Om een voorbeeld te geven, wanneer de server nog bezig is content te verwerken, kan een deel hiervan alvast in de browser worden verwerkt.

Maar je ziet hier onder meer, dat de verwerkingstijd op de server hier geen probleem is, dat is 0,29 seconden. Wanneer ik mijn pagina’s sneller zou willen hebben (maar een gemiddelde laadtijd van 2,05 seconden vinden Google en ik allebei prima) dan zou ik mij beter op de DOM verwerkingstijd of de DOM doorlooptijd kunnen concentreren.

Clarity als hulpmiddel

Een ander aardig hulpmiddel bij het ontdekken van de pagina’s die het ‘goed’ en die het ‘slecht’ doen is Clarity van Microsoft. Ik heb deze dienst al eens eerder genoemd.

Inmiddels heeft Clarity heel handig in het Dashboard een widget waarmee je in één opslag kan zien hoe jouw site het in zijn algemeenheid doet met betrekking tot de metrics.

Op mijn site doet dus 81,6% van de bezochte pagina’s in een bepaalde periode het goed, 16,5% kan wel verbetering gebruiken en 1,9% is armoede troef.

Kijk ik op de tab ‘URL performance’, dan zie ik per URL -gesorteerd van goed naar slecht, of omgekeerd, als ik dat wil- hoe deze URL’s het doen.

Een stappenplan?

Google meet jouw Core Web Vitals vandaag al om te zien of jij vanaf mei wel of niet een hoger plaatsje in de zoekmachines mag verwachten. Het is nu dus een prima moment of zelf ook aan de slag te gaan en eens te kijken wat Google nu precies meet.

Zoals eerder aangegeven, ik raad je serieus aan om als je het nog niet hebt gedaan vandaag nog de Google Search Console te activeren voor je websites. En wanneer je dan toch bezig bent, installeer en activeer de Google Site Kit plugin dan ook gelijk! Daarmee krijg je gelijk een mooi overzicht van hoe jouw pagina’s nu eigenlijk worden gewaardeerd.

Ga aan de slag met de aanbevelingen. De twee grootste Quick Wins zijn vaak de ‘Leverage Browser caching’ en het verkorten van de laadtijd door de server. Dat kan je doen door te kiezen voor een efficiënte caching, en/of een krachtigere hosting optie.

Heb je hier ondersteuning bij nodig? Dan zijn een online video consult, of de Support Strippenkaart wellicht exact de oplossingen die jij zoekt!

Dit blogartikel biedt antwoord op ondermeer de volgende vragen:

• Wat zijn de Core Web Vitals?
• Waarom zijn Core Web Vitals belangrijk?
• Wat meet de Largest Contentful Paint (LCP)?
• Hoe kun je de First Input Delay (FID) verbeteren?
• Wat is Cumulative Layout Shift (CLS) en hoe voorkom je het?