Eerlijke prijzen & geen contracten
Meer dan 100% CO2 neutraal
400 + actieve campagnes

Google’s Core Web Vitals update – Wat kan je doen? 8 tips

Google’s Core Web Vitals update – Wat kan je doen? 8 tips

Google is doorlopend bezig om haar algoritmen te verbeteren en heeft eind mei 2020 een algoritme update aangekondigd. Google gaat drie nieuwe SEO metrics toevoegen om de gebruikerservaring op een website nog beter te meten, ook wel de Core Web Vitals genoemd.

Wat zijn de Google Core Web Vitals dan?

In een notendop uitgelegd wil Google streven naar een steeds betere, veiligere en snellere ervaring op het internet. In deze update worden nu drie nieuwe metrics toegevoegd hoe Google de gebruikerservaring gaat meten:

  1. LCP – Largest Contentful Paint
  2. FID – First Input Delay
  3. CLS – Cumalitive Layout Shift

Wil je verder lezen over wat het precies is en hoe het werkt? Spring dan verder naar: wat zijn de Google Core Web Vitals

Weten wat je kan doen om te meten en te slagen voor deze Core Web Vitals? Lees rustig verder!

Google Core Web Vitals

Wat verandert precies door Google Core Vitals?

Eerder meette Google alleen puur de pagespeed en veiligheid van website/webpagina’s en of de pagina’s ook geschikt waren voor mobiele apparaten. Dit blijft ook zo.

Er worden nu alleen meer metrics gemeten die gerelateerd zijn aan pagespeed, responsiveness and visuele stabiliteit. Met deze waarden, dus Core Web Vitals, kan je als site-eigenaar of marketeer de gebruikerservaring op het internet beter meten.

Core Web Vitals komt in mei 2021

De kop zegt het al. Deze update gaat bijna doorgevoerd worden! We starten het blog daarom met een aantal praktische tips mee waar je direct mee kunt starten!

Hoe meet je of je de test voor Core Vitals doorstaat?

Het is mogelijk om op meerdere manieren te meten of je website succesvol de test doorstaat.

  1. Je kan dit gelijk meten in je eigen Google Chrome browser te gaan naar Inspecteren > Lighthouse.
  2. Advies: ga naar de Pagespeed Insight tool van Google en controleer meerdere URL’s van je website steekproefsgewijs: https://developers.google.com/speed/pagespeed/insights/
  3. Google Search Console > Optimalisaties > Site-vitaliteit
Google Core Web Vitals
Voorbeeld van een Pagespeed test via Google Pagespeed insights tool

Wat gebeurt als je niet slaagt voor je Google Core Web Vitals?

Dat is nog niet bekend. Wat wel logisch zou zijn is dat Google andere websites voorrang gaat geven die wel voor de test slagen.

Tips om WEL te slagen voor de Google Core Web Vitals update

Google Pagespeed Insight geeft je gelijk inzichten wat verbeterd kan worden aan je website en / of betreffende webpagina’s. Maar wat kan je er aan doen?

9 van de 10 keer zie je eigenlijk dezelfde feedback. Wij zetten onze learnings graag op een rijtje voor je!

1. Controleer je webhosting omgeving

Wat moet je doen? Controleer bij je website-developer hoe de hosting is geregeld. Heeft je website wel genoeg resources? Op welke locatie is je website gehost? Hoe dichter bij de doelgroep hoe beter.

Vergeet ook niet de inrichting van de hosting. Denk aan o.a. Server Side Rendering die goed samenwerkt met een bestaande caching functionaliteit in de website.

Deze regels zeggen iets over de reactietijd van je server waarop de website staat gehost. Screenshot uit Webpagetest.org

2. (Java)Scripts controleren

Wij marketeers en website-eigenaren zijn dol op vette marketing scripts. Denk aan scripts die je extra inzichten verschaffen of leuke dingen voor je bezoekers. Bijvoorbeeld: Hotjar, Chatboxen, Personalisatie Tools, Facebook Remarketing Pixel, Linkedin Insight Pixel, etc.

Ook scripts in het CMS zijn erg doorslaggevend die zorgen voor een goede werking van de website.

Wat kan je doen? Laat de websitebouwer alle scripts kritisch bekijken. Plaats de belangrijkste scripts zo hoog mogelijk in de website <head>. Plaats minder belangrijke scripts zo laag mogelijk in de <body> of stel waar het kan de uitvoering van de scripts uit. Ook als eigenaar/marketeer kan je kritisch kijken naar het gebruik van je marketing scripts. Gebruik je scripts niet? Verwijder ze dan uit je website.

Controleer alle resources bij een page load. Screenshot uit Webpagetest.org

3. Controleer je CSS

De webbouwer heeft je website wellicht gemaakt op basis van een thema of volledig maatwerk. Dit gaat zeker een rol spelen. Een standaard thema bevat namelijk (vaak en veel) ongebruikte CSS regels, dit creëert vaak een onnodig lange laadtijd. Dit komt ook vaak voort uit het feit dat de stylesheets via een externe bron worden in geladen.

Wat kan je doen? Laat de webbouwer niet gebruikte CSS verwijderen of probeer het zelf middels een plugin. Heb je bijvoorbeeld weinig CSS elementen in gebruik? Denk er dan over na om de kritieke CSS rechtstreeks in de HTML te plaatsen.

4. Plugins opruimen en onnodige functionaliteiten verwijderen

Vooral in WordPress land is het erg makkelijk om je hele website vol te hangen met “handige” functionaliteiten of extra’s. Maar in de praktijk creëren deze plugins vaak een enorme vertraging en soms verspringing van de opmaak. Dit is nadelig voor de performance van je site.

Vooral verouderde plugins of plugins die geen update krijgen hangen als een molensteen om je nek.

Wat kan je doen? Ga samen met je webbouwer door de lijst van plugins / functionaliteiten heen. Denk kritisch na wat je er mee doet en of je het nog nodig hebt. Niets? Weg ermee!

wordpress plugins opruimen voor betere performance
Voorbeeld van plugins die een update nodig hebben of wellicht verwijdert kunnen worden

5. Comprimeer afbeeldingen en gebruik lazyloading

Mooie afbeelding en video’s zijn tegenwoording onmisbaar voor je merk en/of product. Maar een goede afbeelding of video die hakken er vaak wel in qua bestandsgrootte. Dit heeft veel invloed op je laadsnelheid en performance.

Wat kan je doen? Voor je alle afbeelding en video’s gaat uploaden in je website. Zorg ervoor dat je de afbeelding gaat comprimeren/smushen. Daarnaast moet de webbouwer er voor zorgen dat er zogenaamde lazyloading wordt toegepast op je afbeeldingen/video. Dit zorgt ervoor dat niet alle afbeeldingen gelijk worden ingeladen, maar alleen de afbeeldingen die in je scherm aanwezig zijn.

google core web vitals lazy load
Alleen de afbeeldingen in beeld worden direct ingeladen

6. Fonts lokaal opslaan

Een mooie font voor je website is tegenwoordig ook onmisbaar. Maar vaak leveren deze problemen op. De fonts moeten tegenwoordig allemaal uit externe bronnen worden geladen. Dit levert vertraging op.

Wat kan je doen? Laat de webbouwer de fonts lokaal opslaan.

externe fonts lokaal gaan inladen
Fonts die extern moeten worden ingeladen. Screenshot uit Google Page Speed Insights.

7. Gebruik tegenwoordig aspect ratio’s in plaats van responsive afbeeldingen

Waar je voorheen alles responsive maakte om alle afbeeldingen goed te serveren voor ieder apparaat, is het tegenwoordig belangrijk om alle afbeeldingen een vaste hoogte en breedte mee te geven. Op deze manier voorkom je verschuiving en verspringing en slaag je voor de CLS.

Wat kan je doen? Laat de webbouwer een hoogte en breedte op afbeeldingselementen meegeven om opmaakverschuiving te verminderen.

Aspect ratio van afbeeldingen
Geef afbeeldingen een expliciete hoogte en breedte. Screenshot uit Google Pagespeed Insights.

8. Caching, Minifying en Preloading

Heb je bovenstaande allemaal goed voor elkaar of aangepakt? Goede zaak! Zorg er vervolgens voor dat aan de client side alles goed gecached en gecomprimeerd kan worden.

Bovenstaande niet goed voor elkaar? Dan gaat het cachen en comprimeren minder zoden aan de dijk te zetten.

Wat kan je doen? In het geval van WordPress zijn er goede plugins zoals Litespeed Cache of WP Rocket die zorgen voor een goede caching in de browser en gecomprimeerde bestanden. Overleg eventueel met de webbouwer om dit goed te configureren en ook te laten preloaden.

WP Rocket en Google Core Web Vitals
WP Rocket om je bestaande content te optimaliseren voor Core Web Vitals

Meer lezen over de Google Core Web Vital Update?

Hieronder komt een verklarende uitleg over waarom de update eraan komt en wat de nieuwe update inhoud.


Nadruk op gebruikerservaring

Door middel van deze update zal de gebruikerservaring op een pagina een (grote?) rol gaan spelen in hoe goed websites gaan ranken in de Google Zoekmachine.

Gebruikerservaring meten

Gebruikerservaring wordt natuurlijk al langere tijd gemeten door Google, door middel van signalen. De signalen die Google monitort zijn:

  • Laadtijd / Pagespeed
  • Veiligheid van een website (HTTPS beveiliging)
  • Mobielvriendelijkheid
  • Usability van een pagina (bijvoorbeeld geen storende pop-ups of irritante reclames).

Google Core Web Vitals

Je ziet vast wel een paar bekende factoren als veiligheid, snelheid en mobielvriendelijkheid staan. De Core Web Vitals is eigenlijk een verfijning van het al bestaande Pagespeed signaal.

Statistieken gericht op gebruikerservaring

De Core Web Vitals wordt ook wel door Google gedefinieerd als een set van gebruikersgerichte statistieken die de belangrijkste aspecten van de gebruikerservaring kwantificeren. Deze Core Web Vitals kijken naar de interactiviteit, de laadtijd en de stabiliteit van content tijdens het laden.

Belangrijkste factoren voor gebruikerservaring op een pagina

Core Web Vital 1: Largest Contentful Paint (LCP)

De LCP betreft de laadtijd. Voor een goede gebruikerservaring moet de LCP starten binnen 2.5 seconden vanaf het moment dat de pagina geladen wordt. Het gaat hier om het grootste element van een pagina, bijvoorbeeld de afbeelding, scripts en overige html bovenaan een pagina.

De schaal die Google bij LCP hanteert

Core Web Vital 2: First Input Delay (FID)

De FID betreft de tijd hoe snel een pagina reageert op acties die op de pagina uitgevoerd worden, bijvoorbeeld het klikken op een knop. Hoe langer een actie duurt, hoe negatiever de score. Voor een goede gebruikerservaring moet een FID minder dan 100 millieseconden zijn.

De schaal die Google bij FID hanteert

Core Web Vital 3: Cumulative Layout Shift (CLS)

Met CLS wordt de hoeveelheid content wat nog verspringt tijdens het laden gemeten. Hierbij moet je bijvoorbeeld denken aan het verspringen van knoppen doordat er nog afbeeldingen worden ingeladen. Verspringende content wordt als zeer storend ervaren door gebruikers. Voor een goede gebruikerservaring moet pagina een CLS hebben van 0,1 of minder.

De schaal die Google bij CLS hanteert

Core Web Vitals meten?

Dat kan al een tijdje. Er zijn verschillende tools beschikbaar die drie nieuwe SEO metrics kunnen meten waaronder Search Console en PageSpeed insights. De overige tools zijn:

De tools waarmee de Core Web Vitals gemeten kunnen worden

Hulp nodig met SEO of Google Core Web Vitals?

Klaar zijn voor deze SEO rankingfactor? Wij helpen je hier graag mee of laat je webbouwer je website verbeteren!