INP (Interaction to Next Paint): De nieuwste core web vital!

Met de introductie van Interaction to Next Paint (INP), heeft Google Lighthouse een geheel nieuwe metric gelanceerd. Deze metric legt de nadruk op de tijd die nodig is voordat een complete webpagina reageert op interacties. Maar wat betekent deze nieuwe metric nu precies en hoe kun je er optimaal gebruik van maken?

Waarom is het van belang om de Core Web Vitals te verbeteren?

INP is de meting die aangeeft hoelang het duurt voordat een complete webpagina reageert op interacties. Dit vormt een aanzienlijk verschil ten opzichte van bijvoorbeeld de First Input Delay (FID), die enkel de reactietijd van een pagina op de allereerste interactie van een bezoeker meet. Met INP ligt de focus op alle mogelijke interacties binnen de pagina.

Wanneer voert Google de overgang naar INP door?

Google heeft aangekondigd dat vanaf maart 2024 FID definitief zal worden vervangen door INP. Dit betekent echter niet dat je pas vanaf maart 2024 rekening moet houden met INP. Integendeel, het is verstandig om hier nu al mee aan de slag te gaan. Een goede FID-score garandeert namelijk niet automatisch een goede INP-score. Door nu al te optimaliseren voor INP, zorg je ervoor dat je in maart 2024 niet voor onaangename verrassingen komt te staan.

Hoe meet Google INP?

Om Interaction to Next Paint (INP) door Google goed te begrijpen, moeten we eerst definieren wat een interactie inhoudt. Volgens Google is een interactie een reeks gerelateerde gebeurtenissen die begint wanneer een bezoeker een handeling uitvoert op de webpagina.

De vertraging (latency) van een interactie wordt bepaald door de langstdurende gebeurtenis binnen die interactie. Deze meting start op het moment dat de gebruiker interactie heeft met de pagina en eindigt wanneer het volgende beeld (frame) wordt getoond. De totale vertraging van een interactie wordt samengesteld uit deze drie componenten:

• Inputvertraging (Input delay): De tijd tussen het moment waarop een gebruiker interactie heeft met de pagina en het moment waarop de event handlers worden geactiveerd.

Event handlers zijn de opdrachten die worden uitgevoerd als een bepaalde gebeurtenis plaatsvindt.

• Verwerkingstijd: De totale tijd die nodig is om code uit te voeren in de betrokken event handlers.
• Beeldvertraging (Presentation delay): De tijd tussen het moment waarop de event handlers zijn voltooid en het moment waarop de browser het volgende beeld weergeeft.

Als tijdens een bezoek aan een pagina minder dan 50 interacties worden gemeten, wordt de interactie met de slechtste latency als score weergegeven. Bij meer dan 50 interacties wordt gekeken naar 0,98% van de latency. INP wordt uiteindelijk gemeten wanneer een bezoeker de pagina verlaat. Momenteel is deze data alleen beschikbaar als lab data, maar met de introductie van de metric wordt ook field data verzameld.

Wat is een goede INP-score van je website?

Een goede INP-score is lager dan 200 milliseconden. Scores tussen 200 ms en 500 ms duiden op de noodzaak van verbeteringen. Een score van meer dan 500 milliseconden wordt als slecht beschouwd volgens Google.

Waarom is INP-metric geintroduceerd door Google?

Google heeft deze metric geïntroduceerd omdat websites steeds interactiever worden. Websites vertrouwen steeds meer op JavaScript, wat niet altijd garant staat voor een optimale gebruikerservaring. Voor Google is responsiviteit van cruciaal belang. Uit Google Chrome-gegevens blijkt dat ongeveer 90% van de gebruikerstijd op een pagina wordt besteed nadat deze is geladen.

De interacties die daarna plaatsvinden zijn dus van groot belang, en het is essentieel om te weten of de gebruikerservaring na het laden van de pagina nog steeds optimaal is. Dit is precies wat INP meet, en het omvat de volledige levenscyclus van een pagina.

Benieuwd hoe wij kunnen helpen?