Google Core Web Vitals

Deze Core Web Vitals zeggen meer over de gebruikerservaring van een pagina dan over de techniek die erachter zit, dat is de kracht. Er wordt niet alleen gekeken naar hoe snel een server is en reageert, maar ook naar hoe een website opent en of er verspringende elementen zijn die plotseling van plaats veranderen. Dit is waardevolle informatie, maar waarom precies? Wij vertellen je in deze Kiwi Byte wat je wint door aan de slag te gaan met Google Core Web Vitals.

Welke Core Web Vitals zijn er?

LCP – Largest Contentful Paint

Google meet hier de snelheid van het laden van elementen waarmee het grootste deel van een scherm wordt gevuld.

Heeft jouw website pagina’s met als eerste aanblik een grote afbeelding? Dan kan het weleens zo zijn dat het laden van deze afbeelding wat tijd kost. De truc is om deze laadtijd zo kort mogelijk te maken, je wilt al jouw elementen zo snel mogelijk in beeld hebben.

Is dit niet het geval en laadt de afbeelding (of een ander element) niet binnen 2,5 seconden, dan krijg je van Google een ‘needs improvement’ of boven de 4 seconden zelfs een ‘poor’ rating.

FID – First Input Delay

De snelheid (of vertraging, het is maar net hoe je het bekijkt) van de eerste handeling die een bezoeker uitvoert valt onder de FID.

Bijvoorbeeld: een bezoeker is aan het winkelen op jouw webshop en klikt op add to cart. Wanneer de tijd tussen de uitgevoerde interactie (het klikken op de knop) en het reageren van jouw pagina hoger is dan 100 milliseconden heb je eigenlijk een probleem. Lang wachten leidt tot afhaken en dát wil je natuurlijk niet.

Let wel op: het draait bij FID alleen om de eerste interactie die een bezoeker met jouw pagina heeft.

CLS – Cumulative Layout Shift

Deze metric is het gemakkelijkst om op te lossen, dat is goed nieuws. Maar wat valt er redelijk simpel op te lossen, vraag je? Het shiften van elementen op jouw webpagina’s.

Het meten vindt plaats vanaf het moment dat de pagina wordt geladen, tijdens het shiften, tot het moment waarop alles op z’n plek staat. Denk hierbij aan afbeeldingen die van het midden naar de zijkant verspringen of CTA buttons die van naast elkaar naar onder elkaar gaan.

En hoe valt dat dan op te lossen?

Door blokken voor content te reserveren. Als je de plek van alle elementen die op jouw webpagina’s staan van tevoren reserveert – dus als de locatie van bijvoorbeeld een afbeelding bekend is – kan alles eenvoudig worden geladen. Als een soort kleurplaat die je invult. Hierdoor kun je de CLS onder de geadviseerde 0.1 seconden houden en dus groen kleuren.

Waarom zijn Google Core Web Vitals belangrijk?

1. User Experience

We pakken er een voorbeeld bij: werk je met advertenties? Dan speelt dat een rol in jouw UX. Klikt een potentiële klant op één van jouw ads, maar duurt het laden van jouw pagina lang, dan raak je deze klant mogelijk kwijt.
Daarnaast is de user experience op jouw website ook van belang, gezien hier veel touchpoints plaatsvinden waarop je een klant kwijt kunt raken. Kortom: de User Experience is een zeer vitaal onderdeel van jouw website.

2. SEO ranking factor

Heb je veel negatieve punten of zijn jouw Core Web Vitals ratings ‘needs improvement’ en ‘poor’? Dan zal dit een negatief effect hebben op je SEO rankings. Dat is balen, want je wilt natuurlijk dat je pagina’s zo hoog mogelijk in de zoekresultaten getoond worden. Google Core Web Vitals helpen je met pijnpunten in kaart brengen én oplossen zodat je beter gaat scoren.

3. Meer omzet

Medians, een digitaal platform voor onderzoek naar de effecten van nieuwe medicijnen, laat zien dat een betere User Experience zorgt voor meer sales, wat leidt tot meer omzet.

4. Houvast en structuur

Google Core Web Vitals is een handig hulpmiddel (voor developers) als het aankomt op betere pagina’s bouwen. Pijnpunten worden gevonden en kunnen door ons (of jouw team) worden opgelost aan de hand van specifieke informatie, wat het leven van degene die de kleurplaat in moet kleuren een stuk makkelijker maakt.

Wat win je door aan de slag te gaan met Core Web Vitals?

• Een betere klantbeleving
• Een hogere klantwaardering
• Meer sales dus meer omzet
• Meer traffic naar jouw website
• Een betere ranking in zoekmachines
• Een hogere ROI (return on investments) op advertenties
• Minder fouten of onderbrekingen; bezoekers klikken minder vaak mis

En wat is het voordeel voor jouw bezoekers?

• Correct ladende pagina’s, zonder verschuivende elementen
• Een minder hoge of geen wachttijd; een vlot website bezoek
• Op iets klikken en weten dat het de juiste knop is
• Een duidelijke weergave van alle elementen en content
• Een stabiele gebruikerservaring
• Minder tot geen irritaties

Hoe zorgen Core Web Vitals voor een snel presterende webshop?

Het oplossen van een slecht scorende LCP, FID of CLS wordt gedaan door bijvoorbeeld de webhosting omgeving of (Java)Scripts te controleren, eveneens als je CSS, daarnaast ook door plugins op te ruimen en onnodige functionaliteiten te verwijderen. Ook kun je afbeeldingen comprimeren of vervangen en fonts lokaal opslaan. Maar eigenlijk zijn de oplossingen per website verschillend. Ervoor zorgen dat jouw webshop sneller gaat presteren is dus niet te beklinken aan de hand van een standaard checklist.

Jouw webpagina’s steken op specifieke wijze in elkaar. De manier waarop jouw website is gebouwd, waar alle elementen en content vandaan komen en welke koppelingen er gemaakt worden, bepalen de handelingen die moeten worden uitgevoerd om jouw Google Core Web Vitals score te verbeteren.

Wat kunnen wij doen?

We kunnen van tevoren zoveel mogelijk elementen, bijvoorbeeld afbeeldingen en scripts, cachen in de browser. Dit zorgt ervoor dat de elementen niet telkens worden opgehaald uit de website waardoor de pagina’s sneller werken.
Dit brengt meer stabiliteit, echter is cachen niet altijd mogelijk. Bij een reisplanner van bijvoorbeeld HTM gaat dit niet werken. Dit komt doordat de reizigersinformatie realtime wordt weergegeven. Ook levert cachen niet voor elke webpagina hetzelfde effect op, vanwege de unieke natuur van een website.

Wanneer wij de afbeeldingen op jouw website cachen worden deze lokaal opgeslagen. De eerste keer dat een bezoeker een pagina opent worden alle elementen gedownload. Maar de keren daarop is dit niet meer nodig. Behalve wanneer de bezoeker elke dag zijn of haar browser leegt, dan moet alles wél opnieuw worden geladen.

Stappenplan: aan de slag met Google Core Web Vitals

Stap 1: Meten
We meten de huidige scores van jouw website. We kijken zowel naar de Core Web Vitals als naar de snelheid, op mobiele- en desktop devices. Hier komt een actielijst uit voort met daarop wat wij kunnen doen om jouw scores te verbeteren.

Stap 2: Prioriteiten stellen
We evalueren welke acties het meeste opleveren. We stellen de vraag: hoeveel werk kost een oplossing en hoeveel tijd gaat dit opleveren? Wanneer het uitvoeren van een taak veel werk kost maar niets oplevert is het niet de moeite waard. Het draait hier om het eruit plukken van de quick wins.

Stap 3: Overleggen met de klant
Tijdens deze stap gaan we samen met jou kijken naar hoeveel tijd er beschikbaar is om oplossingen door te voeren én dus ook hoeveel punten van de actielijst we kunnen oplossen binnen de beschikbare tijd. We maken onderscheid tussen technische- en inhoudelijke aanpassingen, wat op z’n beurt tijd kan kosten of schelen.

Stap 4: Aan de slag!
Op basis van alle vergaarde en vastgestelde informatie van stap 1 tot en met 3 gaan we aan de slag met het uitvoeren van de taken. We gaan het functioneren van jouw website optimaliseren.

Stap 5: Controleren
Na het door Google vastgestelde termijn van 28 dagen meten we nogmaals de Core Web Vitals. Idealiter zijn al jouw scores tijdens deze stap groen gekleurd. Is dit niet het geval? Dan kijken we samen naar waar de extra optimalisatiemogelijkheden liggen én naar wat wel en niet werkt.

Google blijft de Core Web Vitals doorontwikkelen. Er worden steeds aanpassingen gemaakt en de metingen worden hervormd en bijgeschaafd. Het is een lopend proces, wat betekent dat het meten en optimaliseren van jouw website een doorgaande procedure is. Wij helpen je daar graag bij.