Performance12 min lezen

Core Web Vitals en hoe Hypernode je helpt

Door Tom Ketels op woensdag, 17 maart, 2021

Core Web Vitals en hoe Hypernode je helpt

In dit artikel

Wie zich een beetje heeft verdiept in SEO, zal kunnen beamen dat Google regelmatig hun algoritme aanpast waardoor je jouw website soms ineens helemaal om moet gooien. Maar niet getreurd: de wijzigingen in hun algoritme zijn ook vaak in het voordeel van jou als gebruiker, en betekenen lang niet altijd dat je ranking erop achteruit zal gaan. Dit jaar staan de Core Web Vitals op de planning als grote toevoeging aan het rankingsysteem. Wat het is en hoe je het in jouw voordeel kunt gebruiken, bespreken we hier. Ook lees je hoe Hypernode je helpt om hier zo goed mogelijk op te scoren.

De gezondheid van je website als SEO-pluspunt

De Core Web Vitals zijn drie factoren die volgens Google belangrijk zijn om de gebruikerservaring van een webpagina te meten. De volgende drie aspecten komen hierbij om de hoek kijken:

  • Hoe snel een pagina laadt;
  • Hoe snel er interactie mogelijk is op de pagina;
  • Hoe stabiel de pagina is tijdens en na het laden.

Google heeft deze drie onderdelen verwerkt in drie metrics met een vaste benaming, namelijk:

  1. Largest Contentful Paint (LCP)
  2. First Input Delay (FID)
  3. Cumulative Layout Shift (CLS)

Hiermee zijn de Core Web Vitals een groot onderdeel geworden van, zoals Google zelf zegt: de Page Experience Ranking Factor. De Page Experience bestaat naast Core Web Vitals ook nog uit andere zaken zoals hoe mobiel vriendelijk een pagina is, HTTPS, veilig kunnen browsen en ‘no intrusive interstitials’ (geen onverwachte interrupties zoals pop-ups). Als je website geoptimaliseerd is voor al deze zaken dan hebben de bezoekers op jouw website in de ogen van Google een goede Page Experience.

Waarom zijn de Core Web Vitals zo belangrijk?

Google zegt letterlijk op hun website dat de kwaliteit van de gebruikerservaring uiteindelijk het succes op lange termijn voor welke website is. En hier valt natuurlijk wat voor te zeggen. Zoekmachines zoals Google willen gebruikers natuurlijk de beste resultaten laten zien.De websites die Google laat zien in de zoekresultaten moeten dus ook een goede gebruikerservaring leveren. Daarom zijn de Core Web Vitals zo belangrijk voor jou en voor Google. Het bieden van een optimale gebruikerservaring stond als het goed is al hoog op je lijst en nu Google dit ook nog eens onderdeel gaat maken van het zoekalgoritme is het alleen maar belangrijker geworden. Doordat Google Web Vitals dus uit gaat rollen als officiële rankingfactor heeft het ook invloed op je SEO. Hier vertellen we later in dit artikel meer over.

Hoe worden Core Web Vitals gemeten?

Core Web Vitals worden gemeten aan de hand van de drie eerder genoemde metrics:

  1. Largest Contentful Paint (LCP)
  2. First Input Delay (FID)
  3. Cumulative Layout Shift (CLS)

Iedere pagina krijgt een score op deze drie onderdelen. Het is goed om te melden dat de scores kunnen verschillen per testmethode. Google maakt namelijk gebruik van:

Field data-> Real user metrics van de site gebaseerd op ongeveer een maand aan verkeer

Lab test data-> Gebaseerd op tools zoals je browser die een inschatting maken van wat de users zien

De field data zie je terug in Google Search Console en is op basis van echt verkeer. De Lab test data verkrijg je door gebruik te maken van bijvoorbeeld Chrome DevTools of Lighthouse. Dit is ideaal als je website bijvoorbeeld nog in de ontwikkelfase zit. Uiteindelijk is de field data de meest betrouwbare. Deze meet namelijk het échte verkeer en zien hierbij ook de verschillen per apparaat, netwerkconnecties en andere externe zaken die van invloed zijn op de prestaties van een website.

Laten we eens inzoomen op elk van de drie onderdelen, beginnend met de Largest Contentful Paint (LCP).

Largest Contentful Paint (LCP)

LCP of Largest Contentful Paint meet hoelang het duurt voor het grootste element op een pagina is geladen. Dit kan een afbeelding of video zijn, maar ook een tekstblok of in het geval van een webshop, de afbeelding van een product op een productpagina. Een bezoeker van je website moet dus binnen een bepaalde tijd je voornaamste content op hun scherm te zien krijgen. Een LCP-score is goed als dit grootste element binnen 2.5 seconden geladen is. Duurt het langer dan 2.5 seconden, dan valt het onder het kopje ‘heeft verbetering nodig’. Een slechte score is een laadtijd van langer dan 4 seconden. LCP is vaak sterk gerelateerd aan de First Contentful Paint, die kort gezegd meet hoelang het duurt voordat de eerste tekst of afbeelding getoond wordt op een leeg scherm.

Het bepalen van welk element wordt gezien als het grootste op je pagina wordt beïnvloed door bijvoorbeeld hoe schaalbaar je pagina’s zijn. Elementen die slecht schalen en daardoor worden afgesneden op kleinere beeldschermen, of slecht meekrimpen als je een pagina bekijkt op een mobiele browser, tellen alleen mee met het deel van het element dat daadwerkelijk getoond wordt. Hierom is het dus belangrijk jouw website goed schaalbaar te maken en houden.

Je Largest Contentful Paint-score kan invloed hebben op de bruikbaarheid van je website, vooral als jouw grootste element iets is waar de bezoeker daarna interactie mee moet of wil hebben, zoals een banner waar ze op kunnen klikken, of afbeeldingen waar ze doorheen willen scrollen.

First Input Delay (FID)

De tijd tussen de eerste actie van een gebruiker op je website en de eerste mogelijkheid dat je website op die actie kan reageren, wordt First Input Delay of FID genoemd. Dit is een ijkpunt die vooral belangrijk is voor het krijgen en behouden van gebruikers, want een trage of niet-reagerende website kan zeer frustrerend zijn. Wanneer een pagina binnen 100 milliseconden bruikbaar is, wordt het als ‘goed’ beschouwd. Langer dan 300 milliseconden is een slechte waardering.

First Input Delay kan worden veroorzaakt door scripts of code die op de achtergrond geladen worden op je website, waardoor je browser druk kan zijn met het afronden van die handelingen en nog geen mogelijkheid heeft om te reageren op input van de gebruiker. Onder deze input worden acties gerekend als klikken of tappen, of het indrukken van een toets op je toetsenbord. De FID kan de ene keer heel kort, en de andere keer veel langer zijn; als een gebruiker net tussen twee handelingen in op een knop drukt of iets aanklikt kan het zomaar zijn dat de pagina heel snel reageert. Maar is de pagina net bezig met het afronden van een actie, wordt de klik van de gebruiker achteraan in de rij gezet en moet het op zijn beurt wachten.

Het zal je wellicht opvallen dat er geen FID-score wordt toegekend in de Lighthousetool. Hier wordt wel gekeken naar de Time To Interactive-score, of TTI. First Input Delay kan namelijk eigenlijk alleen gemeten worden als er een interactie wordt gedaan met je pagina. Daarom kijkt Lighthouse wel naar de Total Blocking Time op je pagina. Deze metric telt de tijd op tussen de First Contentful Paint- en de Time to Interactive-scores.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift gebeurt als na het laden van een pagina ineens de content verschuift door een element dat vertraagd laadt, zoals een advertentie, een pop-up of een knop. Dit kan direct invloed hebben op de gebruiksvriendelijkheid van je website: het kan irritatie oproepen bij je gebruiker, of in extreme gevallen ongewenste acties op je pagina’s veroorzaken doordat gebruikers onbedoeld op elementen klikken.

De CLS wordt berekend op basis van een Layout Shift Score, die rekening houdt met het totale schermoppervlak dat in beslag wordt genomen door het verschuivende element, en hoever de afstand is die het element verschoven is. Hoe hoger de score, hoe slechter de beoordeling. Niet alle lay-outshifts worden als slecht gezien: gebruikersinput die directe invloed heeft op de weergave (denk bijvoorbeeld aan een venster dat uitklapt na een klik, of een zoekbalk die groter wordt wanneer hij in gebruik is) wordt niet meegeteld.

Hoe verbeter je je CLS?

De grootste verbetering behaal je door je aan een aantal voorwaarden te houden:

  • Maak altijd gebruik van ‘size attributes’ voor je afbeeldingen en video’s. De browser weet dan direct hoe groot de ruimte is voor de afbeelding en video en zorgt er dus voor dat elementen niet gaan verspringen;
  • Voeg nooit content toe boven content dat al is ingeladen (behalve na een interactie van de bezoeker/gebruiker);
  • Als je animaties gebruikt, zorg er dan voor dat je de animatie niet veranderd, maar de property van de animatie.

Hoe je CLS tot in detail optimaliseert kun je uiteraard weer vinden op deze pagina van Google.

Zelf aan de slag met de Core Web Vitals

De Core Web Vitals versterken de drang naar meer gebruiksvriendelijke websites, wat eigenlijk heel goed uitkomt. Er is een toenemend gebruik van CMS’en, plug-ins en andere kant-en-klare oplossingen om snel en makkelijk een site online te krijgen. En hoewel het voor ondernemers natuurlijk heel fijn is om zo’n kant-en-klare omgeving in een mum van tijd neer te kunnen zetten, betekent het ook dat we misschien genoegen moeten nemen met bepaalde trends die niet ideaal zijn vanuit een bezoekersperspectief. Denk bijvoorbeeld aan pop-ups of grote banners die standaard in een plug-in of CMS zitten, die je pagina langzamer of minder gebruiksvriendelijk maken. Daarnaast hebben deze standaardoplossingen vaak helaas veel bloat, bijvoorbeeld in de vorm van scripts die geladen moeten worden voor de pagina bruikbaar is.

De Core Web Vitals geven je goed inzicht in welke elementen het waard zijn om te behouden, en welke elementen misschien aangepast moeten worden. Google heeft inmiddels deze Core Web Vitals al aan een aantal tools toegevoegd. Voor snel inzicht in je scores is de Lighthouse-app in de Chrome Dev Tools waarschijnlijk de handigste. Deze tool scant namelijk elke pagina die je wilt en geeft een score met toelichting. Voor een meer diepgaande check kun je PageSpeed Insights proberen, die meteen handige aanbevelingen geeft over verbeterpunten. Andere tools die je kunnen helpen zijn de Chrome UX Report-API, Chrome DevTools en de Web Vitals Chrome-extension. Google stelt zelfs een workflow voor waarbij je een aantal van deze tools gebruikt om tot het beste resultaat te komen.

Hoe Hypernode je helpt goed te scoren op deze Core Web Vitals

Bij Hypernode wordt al veel rekening gehouden met de performance van je website en hebben klanten toegang tot verschillende cachingmethodes. Hierdoor hoeven je bezoekers niet te wachten op een ladende pagina. Grote elementen, vooral afbeeldingen, hebben daarnaast baat bij onze Image Optimizer; een gratis tool die elke nacht de afbeeldingen binnen je shop optimaliseert.

Onze hypernodes zijn daarnaast zo ingericht dat Time To First Byte of TTFB zo laag mogelijk is. De TTFB is de reactietijd tussen het versturen van een HTTP request vanuit je browser tot het ontvangen van de eerste byte vanaf de server. Hoewel dit geen meetpunt is die Google meeneemt in de score van je Core Web Vitals, zorgt dit wel voor een snellere start van het verhandelen van verdere requests en daarmee een kortere TTI-score.

De toekomst van Core Web Vitals

Core Web Vitals is echt een fenomeen wat voorlopig zo zal blijven. In deze video op het Google Chrome Developers Youtube account geeft Annie Sullivan al aan dat de principes van Web Vitals zullen blijven bestaan.

De manier waarop de metrics worden ingevuld, gemeten en evolueren kan verschillen en ook Google optimaliseert natuurlijk op basis van echte data uit de praktijk.

Ze zullen hoe dan ook hun Core Web Vitals uitbreiden op basis van field data om zo stap voor stap de gebruikerservaring op webpagina’s over het gehele internet te verbeteren. Uiteindelijk zullen mensen Google blijven gebruiken. En dat is uiteindelijk het belangrijkste voor Google.

Aan jou de keuze

Het is goed dat Google irritaties als lange laadtijden en verschuivende elementen aan wil pakken en website-eigenaren bewust wil maken van hoe ze hun websites kunnen verbeteren. Aan de andere kant is het wellicht goed om te onthouden dat de score die je gegeven wordt, gegeven wordt door Google. Hun monopoliepositie binnen de zoekmachinemarkt geeft ze de mogelijkheid op te leggen wat websites wel of niet zouden moeten doen. Het is aan jou om te beslissen of je je hierdoor wilt laten leiden in het plannen en invullen van je website.

 

Hi! Mijn naam is Dion, Account Manager at Hypernode

Wil je meer weten over Hypernode's Managed E-commerce Hosting? Plan je online meeting.

plan een een-op-een meeting tel:+31648362102

Visit Hypernode at