Core Web Vitals, Google’s nieuwe ranking factors

Het is voor jou – als eigenaar van een website of webshop – natuurlijk belangrijk om ervoor te zorgen dat je site(s) goed werken voor jouw organisatie. Ongetwijfeld ben je altijd op zoek naar nieuwe manieren om deze website(s) te verbeteren, waarbij goed scoren in Google waarschijnlijk hoog op de agenda staat.

In mei 2021 introduceert Google een belangrijke wijziging in zijn ranking algoritme. De ‘Core Web Vitals’ zijn dan belangrijke ranking factors (SEO) om verschillende aspecten van de User Experience (UX) te beoordelen, te optimaliseren en continu te monitoren.

#Wat zijn de Core Web Vitals?

Core Web Vitals zijn volgens Google de centrale, meetbare pijlers van een goede gebruikerservaring (User Experience). In grote lijnen staan de drie nieuwe Core Web Vitals voor de laadsnelheid, de tijd tot interactiviteit en een visuele stabiliteit van de layout. Deze drie metrics heten: Largest Contentful Paint (LCP), First Input Delay (FID) en Cumulative Layout Shift (CLS). 

Deze drie nieuwe Core Web Vitals staan ​​naast andere bekende ranking factors, zoals o.a. mobielvriendelijkheid, veilig browsen (geen virus/malware), HTTPS en geen opdringerige pop-ups. De Core Web Vitals worden in mei 2021 ranking factoren, dus het is belangrijk om te zorgen dat je goede scores behaalt. Het belangrijke voordeel is, naast dat ze jouw positie in de zoekresultaten verbeteren, ook de gebruikerservaring voor je bezoekers zullen verbeteren.

In het volgend gedeelte van dit artikel zal ik stuk voor stuk iets dieper ingaan op deze 3 nieuwe metrics:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

#Largest Contentful Paint (LCP)

Deze eerste metric, Largest Contentful Paint (LCP) is een maatstaf voor de laadtijd voordat je meest kritieke content is geladen, dit kan een afbeelding, video of tekst blok zijn. In de praktijk is het de tijd tussen het typen van de URL of het klikken op de link tot het punt waarop de bezoeker de pagina zowel kan zien als er interactie mee kan hebben (zelfs als er andere, minder zichtbare dingen gaande zijn op de achtergrond).

Het onderdeel dat als eerste wordt geladen, is niet altijd de Largest Contentful Paint. De LCP kan namelijk pas worden bepaald als de volledige pagina geladen is. Het gaat met name over de above the fold die invloed heeft op de LCP. Google heeft de volgende scores gedefinieerd wat zij als goede prestaties beschouwen:

• Goed – 2,5 seconden of minder
• Verbetering nodig – 2,6 tot 4 seconden
• Slecht – meer dan 4 seconden

Het behalen van een goede score op elke pagina van je website, niet alleen op de startpagina, wordt een uitdaging voor veel website eigenaren. Er zijn een aantal factoren waarmee je rekening moet houden, omdat ze de LCP sterk kunnen beïnvloeden:

• Reactietijd server > Zorg voor snelle webhosting, met een lage TTFB en goede caching
• Render Blocking (JS en CSS) > Minify of comprimeer JS/CSS bestanden en stel het laadproces uit (defer/async)
• Laadtijd externe bestanden > Afbeeldingen optimalisatie, lazy loading of preload/preconnect resources

Meer in detail weten hoe je dealt met deze factoren voor de snelste LCP? Google geeft alle informatie die jij nodig hebt voor de beste optimalisatie: Optimize Largest Contentful Paint.

#First Input Delay (FID)

First Input Delay (FID) heeft betrekking op de interactiviteit (Time to Interactive) en de mate waarin een pagina responsief is tijdens het laden van de gehele pagina. Wanneer een bezoeker met iets probeert te communiceren, hoe lang duurt het dan voordat dat element reageert? Met interacties worden activiteiten bedoeld zoals bijv. het klikken op links, het openen van tabjes en het invullen van formulieren.

Wanneer mensen interactie hebben met een web pagina, hebben ze de verwachting dat dingen min of meer onmiddellijk zullen gebeuren. En als er zelfs maar een kleine merkbare vertraging is, kan dit frustrerend zijn. Daarom kan First Input Delay ook gezien worden als een maatstaf voor gebruikers frustratie. Als de gebruiker namelijk gefrustreerd raakt tijdens het eerste bezoek, dan is de kans groot dat deze gebruiker niet terugkeert.

First Input Delay meet alleen de eerste interactie in milliseconde (ms). First Input Delay gaat dus niet alleen om de gebruikerservaring, maar ook over de gebruikersbetrokkenheid. De meest voorkomende reden voor vertraging bij de interactie met elementen op een webpagina is dat de browser het te druk heeft met “nadenken” over andere dingen (in de meeste gevallen het verwerken van JavaScript). De acceptabele tijden voor interactie zijn veel korter dan bij LCP:

• Goed – 100 milliseconden of minder
• Moet worden verbeterd – 101 tot 300 milliseconden
• Slecht – meer dan 300 milliseconden

Om de tijd tot interactie te verminderen kunnen de volgende acties zeer belangrijk zijn:

• JavaScript minify-en of uitstellen (of minder JS Frameworks/Libraries gebruiken)
• Het verwijderen van ongewenste scripts van derden
• Het gebruik van browsercache, inclusief PWA-technologie, om bezoekers te helpen pagina’s sneller te laden

Dus met Largest Contentful Paint en First Input Delay is dat de performance kant van Core Web Vitals geregeld. De laatste Core Web Vital kijkt naar een heel ander aspect van de gebruikerservaring, maar zit nog in het laadproces van een website.

#Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is een maatstaf voor hoe stabiel jouw pagina layout is wanneer je webpagina wordt geladen. Een ‘layout shift’ ontstaat als meerdere elementen later worden geladen en daarmee tekst en andere elementen in de pagina layout naar beneden drukken. Het gaat hier bijvoorbeeld om het laden van advertenties, lettertypes die langzaam laden waardoor de inhoud verspringt, etc. 

Elk onstabiel of beweegbaar element op een pagina zorgt voor een lagere Cumulative Layout Shift score. Dit is minder intuïtief te meten dan snelheid, het beste is om je webpagina’s te testen en heel goed op alle elementen te letten die bewegen of veranderen terwijl de pagina wordt geladen. Let vooral goed op bij mobiel gebruik: een mobiel scherm is klein. Hierdoor heeft een verschuiving in de layout al gauw een enorme impact.

De Cumulative Layout Shift (CLS) is ingedeeld op een schaal van nul tot één. Nul staat voor ‘geen verschuiving’ en één voor ‘grootst mogelijke verschuiving’. Voor jouw website wilt je natuurlijk zo min mogelijk verschuiving op een pagina hebben, want dit is slecht voor de gebruikerservaring.

• Goed – 0.1 of minder
• Moet worden verbeterd – 0.1 tot 0.25
• Slecht – meer dan 0.25

Afbeeldingen en advertenties hebben meer laadtijd nodig dan tekst en dat vergroot de kans op verschuivingen in de layout. Zorg er dus voor dat je de hoogte, breedte en eventueel aspect-ratio van de afbeeldingen, iFrames en/of advertenties specificeert in de HTML/CSS. Hierdoor wordt er vooraf voldoende ruimte gereserveerd voor deze elementen tijdens het laden van de webpagina en zullen er geen layout-shifts meer ontstaan.

#Hoe kan ik deze nieuwe Core Web Vitals zelf meten?

De Core Web Vitals score is gemakkelijk via verschillende tools te achterhalen. Zowel tools van Google zelf, als andere crawlers kunnen jou inzicht geven in jouw scores op de 3 verschillende metrics.

#Google PageSpeed Insights

Via de PageSpeed Insight tool van Google kun je elke webpagina testen om verschillende prestatie statistieken te zien, waaronder de Core Web Vitals, die zijn gemarkeerd met een kleine blauwe vlag.

#GTmetrix

GTmetrix controleert zowel je PageSpeed en YSlow metrics en geeft op basis van deze gegevens je site een cijfer van A tot F. Daarnaast worden er ook (in het rechtergedeelte) de Web Vitals getoond, de FID (of Time to Interactive) is terug te vinden in de ‘speed visualization’ gedeelte.

#WebPageTest

WebPageTest is zeer vergelijkbaar met sommige van de vorige genoemde tools, maar heeft meer dan 40 locaties en meer dan 25 browsers (inclusief mobiele) om uit te kiezen. Op basis van verschillende prestatietests zoals TTFB (Time To First Byte), compressie, caching, enz. krijg je een cijfer van A t/m F. Maar ook de verschillende Core Web Vitals scores zijn aangegeven net zoals de Speed Index.

Bottom-line

Goed scoren met deze Core Web Vitals betekent simpelweg een hogere positie in de zoekmachine resultaten van Google, .. en wie wil dat nou niet? Via email of op LinkedIn zijn er heel veel (marketing/SEO) web bureau’s die contact met jou zullen willen opnemen om deze metrics voor je aan te pakken. Maar wees gewaarschuwd, er zitten ook een heleboel charlatans tussen ..!

Als je op zoek bent naar een web bureau om deze Core Web Vitals naar ‘groene’ waardes te tillen, gebruik dan ook de bovenstaande tools. Hierdoor krijg je meer inzicht in de (technische) kennis van het desbetreffend web bureau door hun site te testen. Mochten hun pagespeed en Core Web Vitals in het groen zitten, dan kun je ervan uitgaan dat het desbetreffend bureau jouw website kan verbeteren.

Ik heb in dit artikel getracht de Google Core Web Vitals toe te lichten en aan te geven hoe en waar je jouw scores kunt achterhalen. Als je meer wilt weten wat de mogelijkheden zijn en hoe ik jou kan helpen om jouw Core Web Vitals score te verbeteren, neem dan contact met mij op.

Deel dit Bericht:

Auteur: Jan Rajtoral

Jan Rajtoral is een ervaren grafische vormgever en webdesigner. Hij heeft een ruime ervaring met Front-end web design (HTML, CSS en JS/jQuery), User Experience (UX), Toegankelijkheid (WCAG), Performance en WordPress Ontwikkeling & Thema Ontwerp. Maar hij ontwerpt en ontwikkelt ook logo’s en huisstijlen, waarbij hij altijd streeft naar merkconsistentie in het hele ontwerp.