Google Core Web Vitals: dit moet je weten

Heb je al gehoord over Google Core Web Vitals? De afgelopen jaren is de gebruikservaring van websites steeds belangrijker geworden voor Google. Websites die snel laden en van goede kwaliteit zijn scoren doorgaans hoger in de Google zoekresultaten. Google gebruikt verschillende ranking factoren om dit te meten. In juni worden hier een aantal factoren aan toegevoegd, namelijk de Google Core Web Vitals. Wat moet je hierover weten en hoe zorg je ervoor dat jouw website hoog scoort op dit gebied? Hieronder vind je een uitgebreide uitleg en praktische tips.

Wat zijn Google Core Web Vitals?

De Google Core Web Vitals zijn op dit moment al belangrijke metrics voor de gebruikerservaring. Bij de komende update in juni worden deze drie metrics ook ranking factoren en dus nog belangrijker voor je SEO. Er worden drie scores voor gehanteerd: ‘goed’, ‘verbetering nodig’ en ‘slecht’.

Largest Contentful Paint (LCP)

Largest contentful paint gaat over het meten van de laadprestaties van een pagina. Hierbij meet Google hoe lang het duurt voordat het grootste element op de pagina is geladen. Dat kan een video of foto zijn, maar soms ook een stuk tekst.

Interaction to Next Paint (INP)

Interaction to Next Paint heeft vanaf maart 2024 First Input Delay (FID) vervangen. INP meet de tijd die verstrijkt tussen een gebruiker die voor het eerst interactie heeft met een pagina (bijvoorbeeld het klikken op een knop) en het moment waarop de volgende frame na die interactie wordt weergegeven.

Dit geeft een beter beeld van de algehele reactietijd en verbetert de gebruikservaring door meer nadruk te leggen op hoe snel de pagina reageert op gebruikersinteracties.

Cumulative Layout Shift (CLS)

Cumulative layout shift gaat over het meten van de visuele stabiliteit. Als bepaalde elementen later worden geladen, kan de inhoud of de indeling verspringen. Dat komt de gebruikerservaring niet ten goede.

Let op: FID wordt vanaf maar 2024 vervangen door de nieuwe Core Web Vital: Interaction to next paint (INP). Via de link kun je jezelf vast inlezen over deze nieuwe metriek.

Belangrijke feiten

1. Alleen de mobiele signalen worden meegenomen voor het ranken in de zoekresultaten. Dit is ook logisch, want Google is inmiddels volledig overgegaan op mobile-first indexing.
2. Je hebt een goede score als meer dan 75% van je gebruikers in de categorie ‘goed’ valt. Als maar  70% in de categorie ‘goed’ valt en 30% in de categorie ‘verbetering nodig’, wordt de pagina dus nog steeds beoordeeld als ‘verbetering nodig’.
3. Als er niet genoeg data is, wordt data van andere secties van de website of van de gehele website gebruikt.

3 tools om jouw Core Web Vitals te analyseren

Er zijn verschillende SEO tools waarmee je jouw score op de Core Web Vitals inzichtelijk kunt krijgen.

Google PageSpeed Insights

Je hebt waarschijnlijk wel eens eerder je PageSpeed gemeten met Google PageSpeed Insights. Dit is tevens een ontzettend goede tool om je score op de Core Web Vitals te bekijken. Hier vind je ook meteen tips om je scores te verbeteren.

Google Search Console

Wil je direct inzien hoeveel pagina’s van jouw website goed of juist minder goed scoren? Dan is het slim om Google Search Console te gebruiken. Als je in het linker menu klikt op ‘Site-vitaliteit’, krijg je te zien welke pagina’s wel en niet goed scoren. Je kunt hier dan op klikken voor meer informatie over je scores.

Google Chrome Lighthouse

Met een scan via de Lighthouse tool kun je verschillende factoren analyseren, zoals prestaties, toegankelijkheid en SEO. Je kunt deze scan het beste uitvoeren in een incognito tabblad. Met de Lighthouse Scoring Calculator kun je zien welke onderdelen de meeste impact hebben op je score.

Uit deze testresultaten van Google Pagespeed, zie je dat er nog flink wat te verbeteren is.

Waarom Core Web Vitals zo belangrijk zijn

Core Web Vitals zijn tegenwoordig essentieel voor de prestaties van je website. Hoewel er meer dan 200 factoren zijn die de ranking beïnvloeden, spelen Core Web Vitals een steeds prominentere rol. Zelfs als je op andere gebieden uitstekend scoort, kunnen zwakke Core Web Vitals je algehele prestaties en gebruikerservaring negatief beïnvloeden.

Waarom zorgen Core Web Vitals voor een betere gebruikerservaring?

Uit onderzoek blijkt dat websites die voldoen aan de Core Web Vitals 24% meer kans hebben om bezoekers langer vast te houden. Een vlotte en responsieve website vermindert frustraties en zorgt voor een aangenamere gebruikerservaring. Dit verhoogt niet alleen de kans dat bezoekers terugkeren, maar ook dat ze langer blijven en meer geneigd zijn tot conversies.

SEO en Core Web Vitals: Een win-win

Het optimaliseren van je Core Web Vitals verbetert niet alleen de gebruikerservaring, maar draagt ook bij aan je SEO strategie. Websites met betere gebruikersstatistieken zoals lagere bounce perecentages en langere sessies worden door zoekmachines als waardevoller beschouwd, wat kan leiden tot hogere rankings.

Impact op andere marketingkanalen

Core Web Vitals zijn ook van belang voor andere online marketingkanalen. Bijvoorbeeld, Google Ads gebruikt de mobiele snelheidsscore om de kwaliteit van een pagina te bepalen. Een hogere kwaliteitsscore kan resulteren in lagere advertentiekosten en betere campagneresultaten. Hoewel het nog niet zeker is of Google Ads de Core Web Vitals direct zal gebruiken, is de verwachting dat dit in de nabije toekomst wel zal gebeuren.

Wil je ook naar deze score toe? Neem dan onderstaande tips goed door!

Praktische tips om jouw Google Core Web Vitals score te verbeteren

Als je goed wilt scoren op de Core Web Vitals, moet je zorgen voor:

• Een LCP van minder dan 2,5 seconden
• Een INP van minder dan 200 milliseconden
• Een CLS van minder dan 0,1

LCP verbeteren

• Verbeter de reactietijd van je server: Optimaliseer je serverinstellingen en zorg voor een krachtige hostingomgeving. Gebruik caching en compressie om de laadtijden te verkorten.
• Maak gebruik van een CDN (Content Delivery Network): Een CDN verspreidt je content over meerdere servers wereldwijd, waardoor gebruikerscontent van de dichtstbijzijnde server kunnen laden. Dit verkort de laadtijd aanzienlijk.
• Optimaliseer je JavaScript en CSS: Minimaliseer en optimaliseer je JavaScript- en CSS-bestanden om te voorkomen dat deze het renderen van de pagina vertragen. Stel niet-kritieke CSS uit en plaats kritieke CSS inline.
• Verlaag de laadtijd van resources: Optimaliseer en comprimeer afbeeldingen en tekstbestanden. Gebruik tools om afbeeldingen te comprimeren zonder kwaliteitsverlies en zorg dat belangrijke verzoeken als eerste worden geladen.
• Gebruik efficiënte rendering technieken: Optimaliseer je client-side rendering en maak gebruik van technieken zoals lazy loading. Overweeg pre-rendering en server-side rendering om de initiële laadtijd te verbeteren.

INP verbeteren

• Laat zien dat er iets geladen wordt: Wanneer een gebruiker iets op je website probeert te doen, zoals op een knop klikken, geef dan direct een visueel teken dat de actie wordt verwerkt. Dit kan bijvoorbeeld een laadicoon zijn, zodat gebruikers weten dat hun actie is geregistreerd.
• Verminder de laadtijd van codes van derden: Veel websites maken gebruik van externe diensten zoals advertenties, tracking scripts, of social media widgets. Minimaliseer het aantal van deze externe scripts en zorg ervoor dat ze snel laden om de prestaties van je site niet te vertragen.
• Zorg voor minder verzoeken: Probeer het aantal serververzoeken te verminderen door afbeeldingen samen te voegen tot een sprite, scripts en stijlen te combineren, en alleen het meest noodzakelijke te laden. Elke keer dat een pagina iets van de server vraagt, zoals afbeeldingen of scripts, duurt het even voordat deze items zijn geladen.
• Verklein de overdracht formaten: Gebruik compressietechnieken om de bestandsgrootte van afbeeldingen, video’s, en teksten te verkleinen zonder kwaliteitsverlies. Dit zorgt ervoor dat bestanden sneller naar de gebruiker gestuurd kunnen worden.
• Verminder het ‘main thread’ werk: De ‘main thread’ voert alle belangrijke taken van je website uit. Als er te veel werk op de main thread is, kan dit je site vertragen. Stel zware taken uit of voer ze op de achtergrond uit om de belangrijkste onderdelen van je site snel te houden.
• Verkort de JavaScript-uitvoeringstijd: Optimaliseer je JavaScript-code door onnodige stukken code te verwijderen en de code efficiënter te maken. Dit zorgt ervoor dat JavaScript sneller wordt uitgevoerd en de site sneller reageert op gebruikersacties.
• Zorg voor snelle interacties: Wanneer een gebruiker een interactie heeft met je site, zoals het klikken op een knop of het invullen van een formulier, zorg dan dat deze interactie snel en zonder vertraging verloopt. Zorg dat je site snel reageert en geen lange pauzes heeft voordat er iets gebeurt.

CLS verbeteren

• Specificeer de afmetingen van afbeeldingen en advertenties: Geef altijd de breedte en hoogte op van je afbeeldingen en advertenties. Dit zorgt ervoor dat de ruimte voor deze elementen gereserveerd wordt tijdens het laden, waardoor onverwachte verschuivingen van de content worden voorkomen.
• Zorg dat elementen in de juiste volgorde worden geladen: Laad je pagina-elementen in een logische volgorde, van boven naar beneden. Dit helpt om te voorkomen dat de gebruiker verrast wordt door verschuivende elementen terwijl de pagina laadt. Zorg ervoor dat de belangrijkste inhoud eerst wordt geladen en weergegeven.
• Voorkom het verplaatsen van content als gevolg van het laden van een lettertype: Gebruik de ‘font-display: swap’ eigenschap in je CSS. Dit zorgt ervoor dat er een fallback-lettertype wordt getoond totdat het eigenlijke lettertype is geladen. Hierdoor wordt voorkomen dat de tekst verschuift wanneer het nieuwe lettertype in beeld komt.