Het is voor u – als eigenaar van een website of webshop – natuurlijk belangrijk om ervoor te zorgen dat uw website(s) goed werken voor uw organisatie. Ongetwijfeld bent u 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 (UX of 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 u goede scores behaalt. Het belangrijke voordeel is, naast dat ze uw positie in de zoekresultaten verbeteren, ook de gebruikerservaring voor uw bezoekers zullen verbeteren.

De verschillende ranking factoren voor Google Search (Search signals for page experience)
Bron: Google Search Central Blog

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

#Largest Contentful Paint (LCP)

Deze eerste metric, Largest Contentful Paint (LCP) is een maatstaf voor de laadtijd voordat uw 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:

De scores te behalen voor Largest Contentful Paint, oftewel afgekort: LCP
  • 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 uw website, niet alleen op de startpagina, wordt een uitdaging voor veel website eigenaren. Er zijn een aantal factoren waarmee u 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
Enneh, .. als leuke bijkomstigheid zullen de meeste van deze punten niet alleen de prestaties verbeteren, maar ook de CO2-uitstoot van uw website helpen verminderen. Ook niet geheel onbelangrijk.

Meer in detail weten hoe u dealt met deze factoren voor de snelste LCP? Google geeft alle informatie die u nodig heeft 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:

De scores te behalen voor First Input Delay, oftewel afgekort FID
  • 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 uw pagina layout is wanneer uw 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 uw 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 uw website wilt u natuurlijk zo min mogelijk verschuiving op een pagina hebben, want dit is slecht voor de gebruikerservaring.

De scores te behalen voor Cumulative Layout Shift, of afgekort: CLS
  • 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 u 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 u inzicht geven in uw scores op de 3 verschillende metrics.

Google PageSpeed Insights

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

PageSpeed Insights
Google's PageSpeed Insights voor de homepage van gonzodesign.nl
Google’s PageSpeed Insights voor de homepage van gonzodesign.nl

GTmetrix

GTmetrix controleert zowel uw PageSpeed en YSlow metrics en geeft op basis van deze gegevens uw 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.

GTmetrix
TIP: Door te registreren voor deze dienst (gratis) kunt u ook testen vanuit zeven verschillende locaties en een keuze maken voor de browser waarin u wilt testen, Chrome vs Firefox. Een ander bijkomend voordeel van GTmetrix is dat u ook websites kunt vergelijken met elkaar.
GTMetrix performance test voor de homepage van gonzodesign.nl
GTMetrix performance test voor de homepage van gonzodesign.nl

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. krijgt u een cijfer van A t/m F. Maar ook de verschillende Core Web Vitals scores zijn aangegeven net zoals de Speed Index.

WebPageTest
WebPageTest performance resultaat voor de homepage van gonzodesign.nl
WebPageTest performance resultaat voor de homepage van gonzodesign.nl

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 u zullen willen opnemen om deze metrics voor u aan te pakken. Maar wees gewaarschuwd, er zitten ook een heleboel charlatans tussen ..!

Als u op zoek bent naar een web bureau om deze Core Web Vitals naar ‘groene’ waardes te tillen, gebruik dan ook de bovenstaande tools. Hierdoor krijgt u 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 kunt u ervan uitgaan dat het desbetreffend bureau uw website kan verbeteren.

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

Deel dit Bericht:

Categorie: SEO, webdesign | Tags: , , ,

Auteur: Jan Rajtoral

Jan Rajtoral is een ervaren grafische vormgever en webdesigner. Hij heeft een ruime ervaring met User Experience (UX), Responsive Web Design (RWD) en WordPress Ontwikkeling & Thema Ontwerp. Maar hij ontwerpt en ontwikkelt ook logo’s en huisstijlen, waarbij hij streeft naar merkconsistentie in het hele ontwerp.