Ontdek de Core Web Vitals update van 2024: Interaction to Next Paint (INP)!

Was jij al op de hoogte van de toekomstige verandering binnen de bestaande core web vitals? Vanaf maart 2024 zal namelijk de First Input Delay (FID) plaatsmaken voor een nieuwe metric, de zogeheten Interaction to Next Paint (INP). De huidige Core Web Vitals Cumulative Layout Shift (CLS) en Largest Contentful Paint (LCP) blijven daarnaast een belangrijke graadmeter voor Google.

Wat is de Interaction to Next Paint?

Interaction to Next Paint meet de “wachttijd” tussen een gebruikersactie (zoals een klik) en het moment waarop de visuele reactie van de pagina volledig is weergegeven. Hiermee is het een belangrijke indicator voor de responsiviteit en gebruikerservaring van een website. Deze ‘wachttijd’ is kort samengevat hetgeen waar Google’s nieuwe ‘Interaction to Next Paint’ zich nog specifieker op gaat richten dan nu wordt gedaan met de huidige metric FID. En we weten allemaal waar een ‘lange wachttijd’ in resulteert: frustratie en gemiste verkopen. 

Het is dus hoog tijd om te begrijpen hoe deze score wordt gemeten door Google, wat dit voor jouw website betekent en hoe je je hierop kunt voorbereiden. In dit artikel verkennen we deze veranderingen in detail en helpen we je om jouw site klaar te stomen voor de toekomst!

Wat is het verschil tussen First Input Delay en Interaction to Next Paint?

Het kernverschil tussen deze twee metrics is wat ze meten in termen van gebruikersinteractie. FID focust zich op het begin van de interactie, terwijl INP het complete proces van de interactie bekijkt. Dit betekent dat INP een completer beeld geeft van de gebruikerservaring. Een website kan snel reageren (goede FID), maar als de volledige interactie traag is (slechte INP), ervaart de gebruiker nog steeds vertraging. We zullen in de volgende alinea’s het verschil verder verduidelijken.

Wat is First Input Delay?

First Input Delay, de richtlijn die Google momenteel gebruikt, meet de tijd vanaf het moment dat een gebruiker een actie uitvoert (zoals het klikken op een knop) tot het moment waarop de browser begint met de verwerking ervan. Dit is een indicator van hoe snel een website reageert op initiële gebruikersinteracties. Een voorbeeld: als een gebruiker op een menu knop klikt, meet FID de tijd tussen de klik en hoe snel de browser daadwerkelijk op die interactie reageert.

Wat is Interaction to Next Paint?

Interaction to Next Paint, de metric die in maart 2024 de FID zal vervangen, neemt een breder perspectief in. Het meet niet alleen de initiële reactie van de browser, maar ook hoe lang het duurt voordat de interactie volledig is verwerkt en dus ook echt ‘zichtbaar’ is voor de gebruiker. Bijvoorbeeld, als een gebruiker op een menuknop klikt, meet INP hoe lang het duurt voordat het menu volledig is geopend en zichtbaar is op het scherm. De INP-score is een graadmeter voor de gebruikerservaring, waardoor het dus effectief kan zijn om deze score mee te nemen in je SEO strategie. Verderop in dit artikel gaan we hier dieper op in.

Wat betekent deze aanpassing in de Core Web Vitals voor jou?

Invloed op zowel jouw SEO als SEA

Deze wijziging in maart zal, naast impact op je SEO prestaties, ook gevolgen voor je Google Ads (SEA) hebben. INP gaat namelijk een rol spelen in de bepaling van de kwaliteitsscore van je pagina’s, wat weer van invloed is op de kosten van je advertenties. Google wil de gebruikers uitsluitend zoekresultaten laten zien van hoge kwaliteit. Wanneer de kwaliteitsscore slecht is, wil Google het liefst voorkomen dat deze website en bijbehorende ads vertoond worden. Als jouw INP-score dus omlaag gaat, stijgen dus de kosten voor jouw Google advertentie om toch vertoond te worden. In het ergste geval worden jouw google ads helemaal niet meer getoond. 

Focus op de techniek van de website

Deze verschuiving betekent een aanscherping van de technische kant van jouw website. Met INP in de hoofdrol worden de zaken anders. Deze meting is veelomvattender dan FID en het voldoen aan de nieuwe normen wordt daarmee uitdagender. Veel websites zullen niet automatisch voldoen aan de nieuwe standaarden. Dit is dus hét moment om de technische optimalisaties door te voeren, zodat je geen negatieve impact van INP zal ervaren in maart.

In de afbeelding hieronder zie je wat de focus op de techniek kan betekenen voor de INP-score. Dit was het proces van één van onze klanten. De INP-score stond er niet goed voor, maar door een grondige aanpak en optimalisatie van de technische details hebben we de INP-score weten te verbeteren. Het is dus zeker mogelijk! 

Wat is een goede INP-score?

Wij snappen als je je nu afvraagt: maar wat is een goede INP-score en hoe wordt deze bepaald? Om dit te begrijpen, moeten we eerst kijken waar de focus van de Interaction to Next Paint ligt.

INP focust zich op de tijd tussen elke muisklik of aanraking op touch en het zichtbaar worden van een visuele verandering op de webpagina. Het meet dus niet het zweven met de muis of het scrollen over een pagina.

Hoe wordt INP gemeten?

INP meet de tijd tot een eerste meetbare visuele reactie na een interactie. De reactie hoeft niet noodzakelijk de definitieve visuele staat te zijn. Wat belangrijk is, is dat er snel visuele feedback volgt op een interactie. Dit kan een tussentijdse visuele staat zijn, zoals een laadspinner of voortgangsbalk. Dus ook als de website een tussenstap als reactie geeft, kan dit resulteren in een goede INP-scores!

Een score aan de hand van latentie van interacties

“Latentie van interacties” verwijst naar de tijd die het duurt tussen het moment dat je iets doet op een webpagina (zoals klikken op een link of een knop) en het moment dat je de reactie van de pagina ziet. 

INP meet hoe lang deze wachttijd is voor de langzaamste interactie op een pagina. Als je bijvoorbeeld 10 keer klikt op verschillende delen van een website, dan kijkt INP naar de klik waarbij je het langst moet wachten op een reactie.

Maar als een pagina heel veel interacties heeft, kan een enkele zeer trage reactie een vertekend beeld geven. Daarom wordt bij meer dan 50 interacties de langste wachttijd niet meegerekend. Voor elke extra 50 interacties wordt steeds één extra trage reactie genegeerd. Dit zorgt voor een accurater beeld van hoe snel een website meestal reageert, vooral bij pagina’s met veel interacties.

INP-Score richtlijnen

• Een INP-score wordt als goed beschouwd wanneer er binnen 0,2 seconden na een interactie een visueel resultaat zichtbaar is. 
• Als deze tijd zich uitstrekt tussen 0,2 en 0,5 seconden, is er ruimte voor verbetering. 
• Wanneer het langer dan 0,5 seconden duurt voordat er een visuele reactie op de interactie plaatsvindt, wordt de INP-score als slecht aangemerkt.

Hoe controleer je jouw INP-score?

Je vraagt je wellicht af: “Hoe kan ik de INP-score van mijn website controleren?”. Gelukkig zijn er verschillende tools beschikbaar die je hierbij kunnen helpen. Deze tools bieden inzicht in de prestaties van jouw website en helpen je bij het identificeren van gebieden die verbetering nodig hebben.

Hier zijn enkele tools die je kunnen helpen bij het controleren en verbeteren van de INP-score van je website:

• Google Search Console: deze tool biedt directe beoordelingen van Google en geeft inzicht in eventuele INP-problemen op je website. Je kunt de prestaties van verschillende pagina’s eenvoudig vergelijken, wat handig is om te bepalen waar verbeteringen nodig zijn.
• Real-world data met CrUX: CrUX verzamelt gegevens van echte gebruikers, waardoor je inzicht krijgt in hoe je website presteert onder verschillende omstandigheden, zoals op verschillende apparaten en netwerkverbindingen.
• Directe feedback met Web Vitals Extensie: met de Web Vitals-extensie kun je de Core Web Vitals, waaronder INP, in real-time monitoren.
• DevTools: DevTools biedt de mogelijkheid om ’throttling’ toe te passen, waardoor je kunt zien hoe je website presteert onder verschillende netwerkcondities. Dit is vooral nuttig voor het optimaliseren van de gebruikerservaring voor een breed publiek.
• Gedetailleerde analyse met Lighthouse: Lighthouse is krachtig in het analyseren van website prestaties en biedt gedetailleerde aanbevelingen voor verbetering. Het is geschikt voor zowel desktop- als mobiele sites, waardoor het een veelzijdige tool is voor uitgebreide prestatie analyses.
• Google Pagespeed: PageSpeed Insights analyseert de prestaties van je website en geeft een overzicht van verschillende prestatie-indicatoren, waaronder de INP-score (zie afbeelding hieronder). Het biedt direct gedetailleerde aanbevelingen om de snelheid en responsiviteit van je website te verbeteren. 

Hoe verbeter je een slechte INP-score?

Benieuwd waar te beginnen om de INP-score van je website te verbeteren? Dit kan een uitdagende taak zijn, zeker vergeleken met het optimaliseren van andere Core Web Vitals zoals CLS of LCP. Problemen met INP zijn vaak ingewikkelder en liggen dieper in de structuur van je website.

Een veelvoorkomende oorzaak van een lage INP-score is inefficiënt gebruik van JavaScript. De browser moet wachten tot het volledige JavaScript-bestand is verwerkt voordat het resultaat zichtbaar is. Daarom is het cruciaal om je JavaScript-bestanden zo efficiënt mogelijk te maken. 

Naast JavaScript-optimalisaties zijn er ook andere aspecten die bijdragen aan een betere INP-score:

• Het optimaliseren van afbeeldingen en media: door grote afbeeldingen te comprimeren en lazy loading toe te passen, verklein je de bestandsgrootte en verminder je de initiële laadtijd. Bijvoorbeeld, een verkleinde afbeelding van 100KB in plaats van 1MB laadt sneller.
• Het vereenvoudigen van CSS en stijlen: eenvoudigere CSS-bestanden en het verwijderen van ongebruikte stijlen zorgen voor een snellere laadtijd. Dit betekent bijvoorbeeld het schrappen van complexe animaties die niet essentieel zijn.
• De serverrespons verbeteren: gebruik caching en een efficiënte serverconfiguratie om de laadtijd te versnellen, wat helpt bij websites die snel veel data moeten laden.
• Optimaliseer responsiviteit van formulierelementen: snellere reactietijd op interacties met formulierelementen, door complexe validatiescripts te vereenvoudigen.
• Gebruik web workers voor zware berekeningen: dit houdt in dat je zware JavaScript-taken uitvoert in een aparte thread, wat de hoofdthread ontlast.
• Implementeer effectief state management: in frameworks zoals React, helpt dit om onnodige rerendering te voorkomen, wat de laadtijd en interactie verbetert.

Voorkom negatieve effecten en optimaliseer jouw website op tijd!

Dus, bereid je website voor op de Core Web Vitals update van 2024 met de nieuwe INP-metric. Meet nu alvast je INP-score en lees je in over de verbeterpunten. Het optimaliseren van jouw website is niet alleen belangrijk voor de gebruikerservaring, maar beïnvloedt ook je positie in zoekmachines en de efficiëntie van je Google Ads. 

Wij zijn ervan overtuigd dat je met bovenstaande informatie op tijd stappen kan ondernemen, zodat je zo min mogelijk negatieve gevolgen ervaart van deze verandering. Lees alles nog een keer rustig door en neem contact met ons op voor vragen!

Gebruikte bronnen:

Google Developers. (2023, mei). Introducing INP. Geraadpleegd op 16-11-23, van https://developers.google.com/search/blog/2023/05/introducing-inp