Webperformance: Google stelt Interaction to Next Paint voor als nieuwe Core Web Vital-metric 

Datum
4 maart 2024

Vanaf 12 maart 2024 introduceert Google een belangrijke update in de wereld van webperformance: voortaan toets je de Core Web Vitals van je pagina’s ook met Interaction to Next Paint (INP). Geen zorgen: je hoeft geen webontwikkelaar te zijn om te begrijpen hoe belangrijk INP is. We leggen het in mensentaal uit.

header

Core Web Vitals recap

Laat ons eerst nog eens opfrissen wat Core Web Vitals precies zijn: Het is een set van maatstaven die Google gebruikt om de gebruiksvriendelijkheid en snelheid van een website zo objectief mogelijk te bepalen. We sommen de belangrijkste even op: 

  • hoe snel laadt de webpagina? 

  • hoe stabiel is de inhoud terwijl je door de pagina navigeert? 

  • hoe snel kan je iets doen op de pagina nadat deze is geladen? 

 Google gebruikt hiervoor een hele reeks controles. De gewogen optelsom hiervan bepaalt de uiteindelijke Core Web Vitals-score van je website.  

Largest contentful paint: hoe snel laadt de pagina?

Largest Contentful Paint, kortweg LCP, meet hoe lang het duurt voordat de ‘zwaarste’ content op een webpagina volledig geladen en zichtbaar is voor jou. Dit kan gaan over een afbeelding, een video of een groot stuk tekst. Hoe sneller deze content verschijnt, hoe beter je ervaring op die pagina waarschijnlijk zal zijn. Het is als wachten op de onthulling van een schilderij: hoe sneller je het volledig te zien krijgt, des te gelukkiger en meer betrokken je bent op de kijkervaring. 

Blog_GoogleNextPaint

Cumulative layout shift: hoe stabiel is de pagina?

Cumulative Layout Shift of CLS gaat over hoe stabiel een webpagina is terwijl deze laadt of wanneer je erdoorheen scrolt. Stel: je leest een artikel en plots springt de tekst omhoog of omlaag … gewoon omdat er een afbeelding of advertentie wordt geladen. Irritant, toch? CLS meet hoe vaak die onverwachte sprongen gebeuren en hoe verstorend ze zijn. Een lage score betekent dat de pagina mooi op zijn plaats blijft, waardoor je rustig kunt lezen of browsen. 

First input delay (FID): hoe snel reageert je pagina?

FID (First Input Delay) meet hoe lang het duurt voordat een website reageert op iets dat je doet, zoals klikken op een link of een knop. Vergelijk het met een liftknop indrukken: FID meet hoe lang het duurt voordat de lift beseft dat je gedrukt hebt en in actie komt. Een snelle reactie zorgt voor een soepelere en fijnere ervaring, alsof de lift meteen reageert op je verzoek.

Wat is Interaction to Next Paint (INP)?

Interaction to Next Paint probeert een zo goed mogelijke indicatie te geven van hoe ‘snappy’ een website aanvoelt. Concreet meet INP het tijdsinterval tussen de interactie die een gebruiker met de pagina heeft (bijvoorbeeld doorklikken of scrollen) en de visuele verandering die daarop op de pagina plaatsvindt. Die reactietijd bepaalt immers hoe vinnig of ‘snappy’ de website aanvoelt. 

Waarom is INP belangrijk?

Stel je voor: je zit op een receptenpagina en klikt een ingrediëntenlijst open. Met een goede INP-score verschijnt die lijst haast onmiddellijk. Bij een website met een slechte INP-score is er vaak een merkbare vertraging voordat er iets gebeurt. Dit maakt voor een gebruiker het verschil tussen een responsieve en gebruiksvriendelijke website en één die voor frustratie en daarom ook voor een lager engagement zorgt.

Wat is het verschil tussen een INP- en FID-controle? 

Het gevoel van een vinnige website is al sinds de introductie van de Core Web Vitals een belangrijk criterium voor Google. Tot voor kort werd dit door de First Input Delay (FID) gemeten, maar dit systeem kende een aantal beperkingen.  

Het grootste verschil tussen FID en INP?  

  • FID meet alleen de eerste interactie en hoe snel of traag de pagina daarop reageert. 

  • INP houdt rekening met alle interacties op de pagina en beoordeelt de gehele cyclus van interacties en het hoe lang het daarna duurt vooraleer de pagina visueel verandert. 

 Een website kan in eerste instantie snel reageren (goede FID), maar als de volledige interactie traag is (slechte INP), ervaart de gebruiker nog steeds een vertraging en voelt de site ‘sloom’ aan. Om het voorbeeld van de liftknop te gebruiken: waar de FID bepaalt hoe snel je op de liftknop kunt drukken, bepaalt de INP hoe snel je kunt zien dat je op de knop hebt gedrukt. INP biedt dus een nauwkeurigere meting van de gebruikerservaring. Met de introductie van de INP-metric zal de oude FID-metric dan ook vervallen. 

Blog_GoogleNextPaint

Wat betekent INP voor jouw webperformance?

Mensen verwachten alsmaar meer van een site. Het is dan ook essentieel om te blijven inzetten op een gebruiksvriendelijke website. Zo vermijd je frustraties bij je bezoekers en genereer je meer conversies. 

Ook niet onbelangrijk: Google gebruikt de Core Web Vitals-score als één van de criteria om de ranking van hun organische zoekresultaten te bepalen. Vermits de INP-score van je website de Core Web Vital-score beïnvloedt, is ze vanaf 12 maart één van de factoren die de ranking van je website ten opzichte van die van je concurrenten bepaalt. 

Wat is een goede Core Web Vitals score?

Een goede Core Web Vitals-score hangt van verschillende factoren af. Als algemene vuistregel houd je best rekening met het 75ste percentiel: tracht steeds bij de 25% beste leerlingen van de klas te zijn. En dat op vlak van de verschillende elementen. 

Concreet betekent dat op dit moment : 

  • Largest Contentful Paint(LCP) onder 2,5 sec.- Bij een pagina met een goede LCP-score moet de belangrijkste inhoud van de pagina binnen 2,5 seconden na het laden zichtbaar zijn voor de gebruiker. Hoe sneller de LCP, hoe beter de score. 

  • Interaction to Next Paint (INP) onder 200 milliseconden – Website met een goede INP-score reageren snel op de interacties van de gebruiker: meestal onder de 200 ms. Een lagere INP-waarde betekent een betere gebruikerservaring. 

  • Cumulative Layout Shift (CLS) van 0,1 of lager- Een lage CLS-waarde zorgt voor een stabiele en voorspelbare gebruikerservaring: de elementen op de pagina verschuiven minimaal tijdens het laden. 

Evolutief proces

Let wel: deze richtlijnen zijn gebaseerd op de huidige aanbevelingen van Google. Streven naar goede Core Web Vitals-scores is een continu proces, omdat de normen en verwachtingen van gebruikers en zoekmachines nu eenmaal evolueren.  

Daarnaast is een website vandaag vaak een dynamisch platform met wijzigende elementen zoals teksten, afbeeldingen, marketingscripts en zelfs deels gepersonaliseerde content. Al deze dynamische elementen zijn bepalend voor de gebruikerservaring en hebben dus ook een invloed op de Core Web Vitals-score van je platform. 

We raden dan ook aan om regelmatig de prestaties van je website te monitoren en - waar nodig - optimalisaties door te voeren om een goede gebruikerservaring te waarborgen. Uiteraard helpen onze experten binnen iO je hier graag op weg. 

Je eigen scoren meten? 

seadmemic
Sead Memic
Lead Frontend Developer

Met 15 jaar ervaring in webontwikkeling bekleedt Sead de functie van Lead Frontend Developer bij iO. Met zijn expertise in performance, UX en toegankelijkheid zorgt hij ervoor dat organisaties hun digitale ambities kunnen verwezenlijken en overtreffen. Hij houdt van een gerichte en efficiënte aanpak. Voor Sead is er in het huidige digitale landschap niets belangrijker dan naadloze gebruikersinterfaces en robuuste webprestaties.

Gerelateerde artikelen