Core Web Vitals, een specifieke set van factoren om de gebruikservaring van jouw website te meten. Deze factoren gaan een steeds grotere rol spelen in Google en kunnen van invloed gaan zijn voor de rangschikking binnen Google. Welke vitals er zijn en hoe je ze kunt verbeteren? We leggen het je graag uit. 

Oké, we snappen dat dit best een technisch onderwerp is. Daarom begrijpen we dus ook helemaal als je dit blog doorstuurt naar een webmaster, webbouwer of iemand die betrokken is bij jouw website. Uiteraard proberen we het je wel zo behapbaar mogelijk uit te leggen en te beginnen bij het ‘waarom’.

Waarom zijn de core web vitals zo belangrijk en worden ze steeds belangrijker?

Met de nieuwe Google Page Experience update is de invloed van de core web vitals op de SEO-ranking verhoogd. Deze update begint in het midden van juni en rolt stap voor stap uit tot eind augustus. Vanaf midden juni zal Google de mobielvriendelijkheid, veiligheid met browsen en pagina wijzigingen meten. Rond eind augustus zullen de core web vitals ook van invloed gaan zijn. Google hecht dan meer waarde aan de gebruikerservaring op een webpagina, wat invloed kan hebben op de ranking.  Dus los van de content, zoekwoorden en inhoud kan jouw plekje in Google wijzigen door de score van de gebruikerservaring. 

Aan de hand van welke vijf punten meet Google de gebruikerservaring?

Met deze update zal Google aan de hand van de volgende vijf punten de gebruikerservaring beoordelen:

  • Core Web Vitals: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) en First Input Delay (FID). Belangrijkste onderdeel van de gebruikerservaring. 
  • Mobielvriendelijkheid: Hoe mobielvriendelijk is jouw website? Die ene grote header afbeelding die er op desktop goed uitziet maar op mobiel de hele viewport inneemt? Tijd om daar een alternatief aan te geven per device. Wil je deze score testen?
  • HTTPS gebruik: Met HTTPS versleuteling maak je het internet veiliger en voorkom je dat content of gegevens kunnen worden aangepast door anderen in jouw netwerk (bijvoorbeeld een provider of hosting).
  • Niet-toegestane implementaties van interstitials op mobiel: Een mobiele gebruiker moet de content kunnen lezen zonder problemen. Denk hierbij aan een popup over het hele scherm (die op desktop niet storend is maar op mobiel de gebruiker belemmert).

In dit blog behandelen we punt 1 van de gebruikerservaring: Core Web Vitals. Wat houden ze in,  en vooral belangrijk: hoe kun je de scores zelf gaan verbeteren?

Core Web Vitals: Hoe worden ze gemeten en hoe kun je scores verbeteren?

Zoals genoemd meet Google de web vitals aan de hand van drie factoren: Largest contentful paint, first input delay en cumulative layout shift. Veel technische termen, maar wat houden ze nou eigenlijk in?

Largest Contentful Paint (LCP): De render/laadtijd van de grootste afbeelding- of een tekstelement wanneer de pagina begint met laden. Belangrijk: de LCP kan per device verschillen. Het kan op desktop een afbeelding zijn, maar op mobiel bijvoorbeeld een tekstelement.

Hoe kun je de LCP score verbeteren?

  • Meet eerst de huidige LCP score: Via Google Pagespeed Insights kun je meten hoe jouw website scoort. Eenmaal bij de resultaten vind je onder het kopje ‘diagnostics’ de largest contentful paint. (Check dit dus voor zowel mobiel als desktop, aangezien dit per viewport kan verschillen) 
  • Page caching toevoegen: Met page caching laat je jouw website sneller ‘reageren’ wanneer de server het request al eerder heeft gehad. Stel dat de eerste gebruiker een specifieke vraag heeft en de server antwoord geeft, dan weet de server de keer erna al wat er geantwoord moet worden. Page caching kan je bijvoorbeeld toevoegen met een losse plugin, of kies voor een totale optimalisatie plugin waar caching al bij in zit. 
  • Optimaliseren van afbeeldingen: Vaak is het LCP element een afbeelding. Het optimaliseren van afbeeldingen, zoals een juiste afmeting geven of het compressen naar een kleiner bestand, geeft een betere score.
  • Optimaliseren van code: Het laden van onnodige CSS en JavaScript maakt de laadtijd hoger. Bij Pagespeed Insights zal dit onder ‘eliminate render blocking resources’ vallen. Door CSS en JavaScript te minimaliseren zorg je ervoor dat je alleen de hoognodige code geeft. 

First Input Delay (FID): Het meten van de tijd wanneer de gebruiker een eerste interactie met de webpagina heeft (zoals het klikken op een link, button of custom JavaScript). Het kan voorkomen dat een gebruiker een pagina laadt (en interactie wil) terwijl de website nog bezig is met het renderen van je JavaScript. Op zo’n moment kan de interactie niet plaatsvinden. De tijd tot een event wel beschikbaar is valt onder de First Input Delay. De FID is het meest complex om te optimaliseren, en biedt een paar mogelijkheden:

Hoe kun je de FID score verbeteren?

  • Test de website snelheid via Google Pagespeed Insights en bekijk bij Lab Data de Total Blocking Time. Bekijk wat de huidige status is van de total blocking time, om te zien wat je nulpunt is.
  • Minimaliseer third party code. Wanneer jouw website te veel third party code heeft, beïnvloed dit de FID enorm. Denk aan Google Analytics, social media buttons, A/B tests en andere metingen. Probeer secuur te kijken welke derde partijen noodzakelijk zijn en verwijder andere.
  • Langzame JavaScript execution: Ook hier geldt het opschonen van de JavaScript als oplossing. Waar je voor LCP al de code hebt opgeschoont kun je, om nog meer verbetering te boeken, bij de FID met uitgestelde code werken. Let op: het uitgesteld laden van regels code kan je website ‘breken’ of anders tonen. Vaak is er de keuze of je alleen voor de ‘veilige optie’ kiest, hiermee wordt alleen het minimale uitgesteld en voorkom je dat belangrijke code kan breken. Kies hier dus altijd voor en voorkom onnodige problemen. Maak altijd een backup van je website wanneer je JavaScript gaat uitstellen of uitsluiten en voorkom dat de code breekt. 

Cumulative Layout Shift (CLS):

CLS meet hoe vaak de layout van de webpagina ‘shifts’ en dus verplaatst of beweegt tijdens het laden. Bijvoorbeeld: je wilt op een button klikken, maar wanneer de pagina daadwerkelijk geladen is, verspringt de pagina en klik je op de verkeerde button. Dit beïnvloedt de gebruikservaring enorm.

Hoe kun je de CLS score verbeteren?

  • Verbeter afbeeldingen zonder vaste afmetingen: Afbeeldingen in een Content Management System (CMS) krijgen automatisch een dimensie en afmeting mee, maar wanneer je zelf afbeeldingen toevoegt is het belangrijk om altijd afmetingen mee te geven. Hiermee voorkom je layout shifts.
  • Embeds en advertenties vaste afmetingen geven: Net als bij afbeeldingen moeten embeds en advertenties vaste afmetingen krijgen. Wanneer je advertenties plaatst is het belangrijk hier ook ruimte voor ’te reserveren’ om te voorkomen dat de layout verschuift.
  • Preloaden van webfonts: Wanneer je eigen/custom fonts gebruikt die bij default geen webfont zijn, kan de server hier problemen mee krijgen. De beste oplossing hiervoor is preloaden. Fonts die niet gepreload zijn kunnen ervoor zorgen dat de browser klaar is om te laden, maar het font nog niet beschikbaar is. Door deze te pre loaden voorkom je een layout shift.

Hoe pas je nu zelf de optimalisaties toe?

Nu je weet wat er verbeterd kan worden aan een webpagina om de snelheid te verbeteren en de scores te verhogen, is het tijd om dit uit te gaan voeren. Wanneer je een CMS website hebt zoals WordPress, Joomla of Webflow kun je kijken naar een passende plugin. Zelf maken wij voor WordPress gebruik van WP Rocket, een betaalde plugin waarmee je alle bovenstaande verbeterpunten kunt toepassen. Maar er zijn ook veel gratis plugins te vinden per verbeterpunt, optimalisatie, of juist voor alle verbeteringen bij elkaar. Houd wel in gedachte dat veel ‘dubbele/overbodige’ plugins de website ook weer langzamer zullen maken. Maak hierin dus alleen hoognodige en concrete keuzes. 

Dus kijk naar jouw PageSpeed score en ga stap voor stap de verbeterpunten door. Wat kun je met jouw source code? Hoe heb je de instellingen van je afbeeldingen staan? Maak je gebruik van webfonts. Wat is het largest contentful paint element in jouw website en kun je die verbeteren? Wanneer je alle verbeterpunten doorvoert kun je rekenen op een betere score. 

En die verbeterde score is niet alleen fijn voor de page ranking bij Google, maar ook voor jouw dagelijkse gebruikers. Want een goede gebruikerservaring brengt tevreden gebruikers en klanten met zich mee. Win-win situatie!