Core Web Vitals 2021 Update

Google-Web-Vitals-2021-Update Featured Image

Written by Ryan

05/03/2021

Core Web Vitals 2021 Update

Het is alweer een tijdje geleden dat ik een blogpost had geschreven over Core Web Vitals van Google dat gericht is op websites en specifiek web developers. Het is goed om daar nu weer bij stil te staan omdat we nu ook meer kennis en ervaring hebben over het optimaliseren van websites als het gaat om Core Web Vitals metingen.

Een ander belangrijk punt voor een nieuw artikel is omdat Google van plan is om in mei 2021 een update uit te rollen. Core Web Vitals werd bekend gemaakt in 2020 en sindsdien konden we spelenderwijs leren wat het precies inhoudt en welke impact het heeft op hoe websites moeten functioneren.

 

Google Core Web Vitals

 

Nu gaat Google de volgende stap zetten om ervoor te zorgen dat gebruikers steeds meer in aanraking komen met websites die een goede en fijne bezoek en gebruikervaring geven.

Zij wil dit bewerkstelligen door een nieuwe update op de Core Web Vitals aan te kondigen.

Het moet echt wel iets belangrijks zijn voor mensen met een website c.q. webmasters om rekening mee te houden als Google dit van te voren aankondig. Als je de afgelopen jaren weinig hebt gedaan aan je website is het nu een goed moment om hier aandacht aan te geven.

In mijn vorige blog over Core Web Vitals heb ik al het een en ander geschreven over wat het is. Nu is Google van plan om in de SERP (zoekresultatenpagina) een visuele indicator te laten zien of een website een geweldige website-ervaring geeft.

We gaan nog eens kort de revue laten paseren wat Core Web Vitals nou werkelijk is, hoe dit jou en je website gaat beinvloeden en waar je op moet letten als je je website wilt gaan verbeteren.

 

Wat is belangrijk voor Google

 

Google is erbij gebaat dat je als gebruiker zo snel mogelijk de informatie c.q. antwoorden kunnen vinden op de vragen die je stelt via haar zoekmachine. De SERP laat een overzicht zien van verschillende informatiebronnen.

Dit kan in de vorm van stukjes tekst overgenomen van websites zoals wikipedia of Google Maps. Maar ook een overzicht van websites die je kunt raadplegen.

Google heeft in de loop der jaren de SERP overzicht aangepast en zal dat ook nog wel in de toekomst blijven doen.

 

Eerste zoekpagina klik ratio

 

 

Zolang jij Google blijft gebruiken als zoekmachine weet zij dat ze haar werk goed doet. En dat de zoekmachine antwoorden blijft geven op jouw vragen en dat dat jou helpt.

Immers, als de resultaten niet aan je wensen voldeed zou je na verloop van tijd stoppen om Google te gebruiken. Dan zou je beslissen om op een andere manier aan je informatie te komen.

Wat is Core Web Vitals

 

Nu de intentie van Google is dus jou een geweldige gebruikerservaring te geven als je de zoekmachine gebruikt, de antwoorden die zij geeft op jouw vragen en daarnaast de websites die ze aanraad c.q. aanbeveelt.

Google bepaalt welke plek jouw website op de SERP krijgt op basis van techniek, inhoud en sociale status. De ervaring die je als gebruiker hebt bij het bezoeken van een website is dus een hele belangrijke voor Google om mee te nemen als wegingsfactor.

 

 

Core Web Vitals is een serie van wegingsfactoren die Google kan en gaat gebruiken om te bepalen wat de gebruikerservaring is en daar een score aan te geven. Het zal uiteindelijk onderdeel worden van de verzameling van (SEO) wegingsfactoren die Google dus hanteert.

 

Optimaliseren van Google website gebruikerservaring

In het verleden heeft Google al aardig wat aanbevelingen gedaan om het Internet en websites een veiliger en gebruikersvriendelijkere omgeving te maken.

Mobile Friendly

Zo ontdekte men dat mensen steeds vaker smartphones gingen gebruiken om websites te bezoeken dus websites moesten mobile-friendly oftewel mobiel geoptimaliseerd worden. Hierdoor wist je dat je website op verschillende apparaten zoals je pc, tablet of smartphone goed weergegeven wordt.

 

Multiple devices

 

Safe browsing

Daarnaast ging men zich richten op de veiligheid van het Internetverkeer en websites zelf. Safe browsing waarbij je weet dat de website die je bezoekt veilig is en geen malware of virussen bevat.

 

 

HTTPS

Net als wanneer je iemand opbelt met de telefoon leg je ook eerst een verbinding met een website. Je wilt dat dat veilig gebeurt en er niet stiekem iemand meeluistert. Daarvoor is Https in het leven geroepen en dat herken je aan het slotje bij je browser. Websites hebben daarvoor een SSL-certificaat nodig om https verbindingen te kunnen aanbieden.

 

HTTPS icoon

 

 

No intrusive interstitials

Ook was er een periode dat je op een website helemaal doodgegooid werd met pop-ups. Daar heeft de Chrome browser nu ook allemaal voorzieningen voor om dat te beperken.

Als laatste no intrusive interstitials waarbij je op een website niet doodgegooid wordt met pop-ups waardoor de website onbruikbaar wordt.

 

 

 

Core Web Vitals – de kern

Met Core Web Vitals brengt Google een drietal nieuwe wegingsfactoren in dat aangeeft wat de gebruikerservaring is van een webpagina.

 

1. Laadsnelheid / Largest Contentful Paint (LCP)

Dit geeft aan hoe snel een pagina weergegeven wordt. Het gaat er niet om hoe snel je op de pagina bent gekomen maar het feitelijk tonen van de pagina zelf.

Zo kun je heel snel op een website terecht komen maar omdat het weergeven van de pagina nog steeds zo lang duurt lijkt het alsof de website heel traag is. Vergelijk het met dat je rondjes blijft lopen bij een draaideur totdat je daadwerkelijk het gebouw binnen mag. Je bent er al maar eigenlijk ook weer niet.

Google wil dat de webpagina binnen 2.5 seconde wordt weergegeven. Alles daarboven wordt ronduit slecht genoemd en alles daaronder is goed. Als je 75% of hoger scoort dan zit je aan de goede kant.

Nu zijn er tools voor om te zien hoe goed jouw website c.q. pagina het doet. Dat zie je verderop in deze blogpost.

 

Web vitals LCP

 

2. Interactivity / First Input Delay (FID)

Hoe snel kun je als gebruiker al wat doen op de pagina. Interactie hebben met wat er op je scherm verschijnt. Denk hierbij aan het kunnen scrollen door de pagina, op een knop drukken, een formulier invullen etc. Dat de pagina snel kan reageren op wat je als gebruiker wilt doen.

 

Web vitals FID

 

 

3. Visuele stabiliteit / Cumulative Layout Shift (CLS)

Dit betekent dat de pagina layout en inhoud niet meer verschuift omdat er nog allerlei elementen ingevoegd moet worden. Misschien ken je dat wel dat je een webpagina aan het bezoeken bent en tijdens het laden wil je op een knop drukken en plots verschuift de inhoud zodat je verkeerd drukt. Dit is uiteraard erg frustrerend en vervelend als dit je overkomt.

 

Web vitals CLS

 

 

Core Web Vitals Tools

In een voorgaande blogpost over CWV zijn er al een aantal tools genoemd om je website te testen. Hieronder staan een aantal die je kunt gebruiken.

 

Core Web Vitals-Tools

 

 

Google page speed insight

 

Om te weten hoe je website scoort qua Core Web Vitals kun je gebruik maken van Google Page Speed Insight. Het zal een score geven op basis van de LCP, FID en CLS en aan de hand daarvan geeft het aanbevelingen.

Je kunt de Google page speed insight tool hier vinden:

https://developers.google.com/speed/pagespeed/insights/

https://developers.google.com/speed/pagespeed/insights/?url=

 

Als je een score hebt van 75% en hoger dan doet je website het goed. Alles daaronder betekent dat er nog wat werk aan de winkel is.

 

Core-Web-Vitals-Amersfoort.nl

 

 

Lighthouse Scoring Calculator

Google sleutelt continue aan de weging van de CWV scores bij het vergaren en verzamelen van data van websites en aanbevelingen die mensen doen.

De Lighthouse Scoring Calculator laat zien hoeveel impact elke factor heeft op jouw score. Het overzicht laat zien dat LCP en TBT beide voor de helft van je score bepalen.

De overige factoren zoals FCP, SI, TTI tellen wat minder zwaar en CLS het minst. Zoals gezegd sleutelt Google vaak aan de weging van de factoren en de calculator laat zien dat deze alweer toe is aan versie 6,7.

De calculator kun je hier vinden:

https://googlechrome.github.io/lighthouse/scorecalc/

 

 

 

 

Google Search Console

Het is duidelijk dat Google steeds meer belang gaat hechten aan CWS en de integratie van deze statistieken in GSC is daar een voorbeeld van.

Met Google Search Console krijg je waardevolle informatie over je website. Het biedt je extra tools en rapporten dat inzicht geeft in het webverkeer van je website, hoe je website presteert en aanbevelingen over eventuele fouten die gevonden zijn.

Met deze informatie kun je je website nog beter later presteren in de Google zoekresultaten.

In de GSC zie je wat de CWS statistieken zijn van je gehele website in plaats van 1 pagina.

 

 

Meer informatie over Google Search Console vind je hier:

https://search.google.com/search-console/about

 

 

Chrome user experience report

Stel je eens voor hoe het is wanneer je input krijgt van duizenden Chrome gebruikers! Dat is het doel van de “Chrome user experience report” waarbij door gebruik van Big Data je toegang kan krijgen tot deze data. Om hier gebruik van te maken dien je wel een rapport aan te maken via Google Data Studio.

Het aanmaken van het rapport doe je hier:

https://g.co/chromeuxdash

 

 

Voorbeeld van een CrUX report

 

 

 

 

Tips omtrent het optimaliseren van CWS

 

 

LCP / Largest Contentful Paint

Het verbeteren van LCP komt grotendeels overeen met het versnellen van een website an sich. Een paar essentiele zaken worden hieronder genoemd.

 

Snelle webhosting

Het hebben van een snelle webhosting is een must als je een website hebt dat veel verkeer trekt of zware bewerkingen doet. Velen hebben een shared hosting wat betekent dat je een server deelt met anderen waardoor je in feite vecht om aandacht van de computer.

Wanneer je een wat zwaardere website hebt loont het om een duurder plan te nemen zodat je de computer met minder websites deelt of dat je een eigen VPS neemt.

 

 

 

Een thema dat up to date is

Net als het Internet onderhevig is aan verandering zijn thema’s ook onderhevig aan aanpassingen. Optimalisaties en bugfixes aan code of het toevoegen van nieuwe features zijn zaken die worden gedaan aan thema’s om ze up to date te houden.

Het is goed om regelmatig te controleren of je thema actueel is en meegaat met nieuwe ontwikkelingen. Soms kan het zijn dat de ontwikkelaar geen updates meer uitbrengt en dan kun je nagaan of het zinvols is om over te stappen naar een ander thema.

 

Lazy loading images

Vroeger bestonden websites vooral uit platte tekst. Tegenwoordig zijn ze gevuld met rich media, oftewel een combinatie van tekst, afbeeldingen, video en zelfs audio. Dit alles om een mooie website te hebben dat de aandacht trekt en vasthoudt van de gebruiker.

Om ervoor te zorgen dat je niet al te lang hoeft te wachten totdat alles geladen is gebruikt men lazy loading. Dat houdt in dat een afbeelding pas verstuurd wordt op het moment dat het op je scherm in zicht komt. Pas wat versturen als er ook echt naar gekeken gaat worden!

 

 

Verkleinen en verwijderen van afbeeldingen

Naast het lazy loading kun je ook nagaan of alle afbeeldingen op een pagina ook echt noodzakelijk is en wat toevoegt aan je verhaal. Hoewel we nu echt van alles kunnen op een website is het maar de vraag of dat ook nuttig is.

Beter is om een website te hebben die krachtig je boodschap overbrengt en dat alles erom heen daaraan bijdraagt.

Een andere optimalisatie techniek is het comprimeren van afbeeldingen. Tegenwoordig maken DSLR camera’s en smartphones foto’s op hoge resolutie. Dat is nodig als je foto’s gaat ontwikkelen maar voor op een website is die kwaliteit helemaal niet nodig.

Door te comprimeren verklein je de foto’s zonder in te boeten aan kwaliteit. Hier zijn plugin’s voor om dat voor elkaar te krijgen.

 

 

 

Onnodig extra scripts verwijderen

Vooral in het begin denken we dat we van alles nodig hebben en stoppen we een website vol met scripts. Maar wanneer we steeds meer en meer toevoegen zal een website ook trager geladen worden. Het kost tijd om een script in je browser of smartphone te draaien.

Ga eens na welke scripts je hebt draaien en verwijder diegene die je niet echt nodig hebt.

 

 

Check of je grote “page elements” hebt.

Grote “page elements” betekent dat deze stukken als een geheel door je webbrowser moet worden afgehandeld. Efficienter is om je webpagina op te delen in kleinere stukken. Houd hier rekening mee bij het bouwen van je webpagina.

 

 

Verkleinen van CSS

De layout van je website wordt door CSS (cascade style sheets) bestanden vastgelegd. Doordat steeds meer nieuwe features toegevoegd worden aan CSS bestanden voor bijvoorbeeld theme builders kan het zijn dat die bestanden ineens gegroeid zijn.

Om de groottes te verkleinen is het beste om ook deze bestanden te comprimeren. Ook hier zijn plugins voor om dit te realiseren.

Een andere techniek is om ongebruikte code te verwijderen. Echter, dat is een stuk lastiger om te onderhouden wanneer er weer updates doorgevoerd worden.

 

 

Nb. Let wel dat de CWV scores van Google Page Speed Insights vertekenend zijn. Dit heeft te maken met dat de servers van Google in Amerika staan.

 

 

 

FID / First Input Delay

De volgende stap is kijken naar hoe je webpagina’s opgebouwd worden en hoe snel je al interactie hebt op je pagina. Of je hier veel aan kunt doen is afhankelijk van het soort website dat je hebt.

Als je veel content hebt dan zal het wat lastiger zijn om deze te optimaliseren omdat al deze content geladen dient te worden. In sommige gevallen zal GSC dat dus niet rapporteren over je website.

Wat wel vaak een issue is is wanneer je website zwaar gebruikt maakt van javascript. Het uitvoeren van javascript legt druk op de computer c.q. telefoon van je gebruiker en als dat lang duurt dan zal FID statistieken ook omhoog gaan.

 

 

De meesten van jullie zullen wel een analytics tool gebruiken zoals Google Analytics. Of wellicht gebeurt dat via Google Tag Manager.

Een tweede tool die vaak wordt ingezet is een heat map tool zodat je ziet wat gebruikers doen op je website.

Een goede web browser caching plugin kan zeker op dit vlak de situatie verbeteren. Sommigen zijn erg uitgebreid en helpen ook de LCP scores en anderen richten zich meer op wat specifiekere zaken.

Het configureren van een dergelijke plugin vraagt wel wat technische kennis omdat een verkeerde instelling ervoor kan zorgen dat je website niet meer doet zoals je dat wilt.

 

 

 

 

CLS / Cumulative Layout Stability

De laatste punt is de content layout stability en dat laat zien of je webpagina niet verspringt terwijl deze geladen wordt.

Dit gaat specifiek in over de HTML layout en hoe je die specificeert bij het ontwerp. Zoals het opgeven van de groottes van de gebruikte afbeeldingen. Zo voorkom je dat de layout verschuift omdat plaatjes nog geschaald moeten worden zodat het past op je scherm.

Ook het achteraf injecteren c.q. tussenproppen van elementen tijdens het laden is dus uit den boze.

 

 

Des te meer je elementen vaste plekken geeft op je pagina en vaste verhoudingen dan zal het verspringen minder van toepassing zijn.

 

 

Chrome Developer Tools

Meer tips over het verbeteren van je website door middel van de Chrome developers tools vind je hieronder in de link:

 

https://developers.google.com/web/tools/chrome-devtools/evaluate-performance

 

Welke stappen moet je nemen?

Ga aan de slag met de Core Web Vitals tools!

Check je score en bekijk de aanbevelingen die Google doet. Besef je ook dat veel websites nog niet volledig geoptimaliseerd zijn om goede CWV scores te laten zien. Daarnaast is het ook zo dat je moet beseffen dat dit een onderdeel is van (technisch) SEO maar niet het gehele plaatje.

Wil je dat je op Google goed gevonden wordt dan zul je nog steeds moeten investeren in een goede SEO strategie.

1. Doe een audit check van je website.

Maak gebruik van de tools die hierboven genoemd zijn.

 

2. Raadpleeg de aanbevelingen

Verricht de aanpassingen die aanbevolen worden. Doe dit stap voor stap en ga ze niet allemaal tegelijkertijd aanpassen. Pak de grootste issues eerst aan en zie hoeveel profijt dit je oplevert.

 

3. Check regelmatig of de aanpassingen die je hebt gedaan effect hebben.

Kijk ook of je website nog functioneert als voorheen.

 

4. Test ook de websites van je concurrenten.

Kijk eens hoe hun websites presteren ten opzichte die van jou. Als je hier hetzelfde of beter scoort dan is dat goed voor je ranking.

 

 

Samenvatting

 

Zoals gezegd is het goed om je nu te richten op Core Web Vitals en dit mee te nemen in een algehele optimalisatie van je website. In het verleden deden we al website optimalisaties en deze te versnellen op basis van toegangssnelheid, laadtijd en de hoeveelheid data die overgestuurd moesten worden.

Met CWV gaan we een stapje verder en kijken we wat meer inhoudelijk naar je web ervaring.

Zoals gezegd valt CWV optimalisatie onder de grotere plaatje van SEO optimalisatie. Het helpt bij het beter gevonden te worden en hoger te eindigen op de zoekresultatenpagina’s van Google. Maar er zijn nog een reeks andere factoren waar je rekening mee moet houden.

 

 

 

 

Wat ook interessant is…

SEO Specialist

SEO Specialist

SEO Specialist Als goed vindbaar zijn op Google belangrijk isAls SEO Specialist zijn wij er voor bedrijven en...

0 reacties