Google Lighthouse heeft een nieuwe metric gelanceerd: de Interaction To Next Paint. Deze metric meet hoelang het duurt om een reactie te krijgen van een complete pagina. Maar wat is deze nieuwe metric precies en wat kun je ermee?
Interaction To Next Paint (INP)
De INP-meting geeft aan hoe lang het duurt om met een hele pagina te communiceren. Dit is dus anders dan bijvoorbeeld de First Input Delay, die alleen meet hoe lang het duurt voordat een pagina reageert op de eerste interactie van een sitebezoeker.
Met INP kijk je dus naar elke interactie die mogelijk is op de pagina. Google zelf illustreert dit met een duidelijke video.
Je ziet in het filmpje duidelijk dat de interactie aan de linkerkant, niet direct visueel zichtbaar is. Aan de rechterkant zie je echter direct interactie: de bezoeker krijgt direct feedback. En dat is uiteindelijk een betere gebruikerservaring dan de situatie aan de linkerkant.
Hoe wordt INP gemeten?
Om dit goed te begrijpen moet je eerst weten wat een interactie is. Volgens Google is een interactie een reeks gerelateerde gebeurtenissen die starten als je een actie uitvoert op de pagina. Een goed voorbeeld hiervan is een touch op een mobiel apparaat. Dit is één interactie met meerdere gebeurtenissen. Zo heb je de pointer up, pointer down en de klik. Deze gebeurtenissen kunnen allemaal bijdragen aan de latency van de hele interactie.
Bron: Web.dev. Wat is een interactie volgens Google?
Een interactie hoeft dus niet altijd een touch/tap op een mobiel apparaat te zijn, maar dit kan ook een muisklik zijn, of het indrukken van een toets op je toetsenbord.
De latency van één interactie bestaat uit de langste duur van een gebeurtenis die deel uitmaakt van de interactie. Hierbij wordt gemeten vanaf het punt waarop de gebruiker interactie heeft gehad met de pagina totdat het volgende frame wordt weergegeven.
De totale som van de latency (van de interactie) wordt opgebouwd uit deze drie tijdspannes:
- De input delay: de tijd tussen wanneer een gebruiker interactie heeft met de pagina en wanneer event handlers worden uitgevoerd.
- De verwerkingstijd: de totale hoeveelheid tijd die nodig is om code uit te voeren in gekoppelde event handlers.
- De presentation delay: dit is de tijd tussen het moment waarop de event handels klaar zijn met uitvoeren en het moment waarop de browser het volgende frame laat zien.
Wordt er tijdens het bezoek minder dan 50 interacties op de pagina gemeten, dat wordt de interactie met de slechtste latency als score weergegeven. Heb je meer dan 50 interacties op de pagina, dan wordt er gekeken naar een 0,98% van de latency.
De INP wordt uiteindelijk gemeten als een bezoeker de pagina verlaat. Vooralsnog is de data alleen nog beschikbaar als lab data. Met het introduceren van de metric aan het grote publiek is men ook gestart met het verzamelen van field data.
Wat is een goede Interaction to Next Paint score?
Een goede Interaction to Next Paint score is lager dan 200m2. Heb je een score tussen de 200ms en 500ms, dan heeft je pagina absoluut verbeteringen nodig. Een slechte INP score is volgens Google meer dan 500ms.
Waarom de INP metric?
Google zegt hier zelf over dat ze dit met name gedaan hebben omdat websites steeds meer interacties hebben. Sites vertrouwen steeds meer op JavaScript en een goede gebruikerservaring is hierbij niet altijd vanzelfsprekend.
Responsiveness is hierin erg belangrijk voor Google. Uit verzamelde data van Chrome blijkt dat ongeveer 90% van de tijd van een gebruiker op een pagina wordt doorgebracht nadat deze is geladen.
De interacties die vervolgens gebeuren zijn daarom erg belangrijk, en het is goed om te weten of de gebruikerservaring ná het laden van een pagina nog steeds optimaal is. Dit is uiteindelijk wat INP meet, en het bevat de hele levenscyclus van een pagina.
Meer weten over de introductie van Interaction to Next Paint?
Deze video op het kanaal van Google Chrome developers gaat nog dieper in op het hoe en wat over responsiveness en de introductie van INP:
De introductie van INP binnen de Core Web Vitals is een logische keuze van Google. Het wordt enorm interessant om te zien welke websites hier goed op scoren en of development teams hier serieus aandacht aan gaan besteden. De introductie van deze metric draagt ongetwijfeld bij aan het verbeteren van de gebruikerservaring van heel veel websites. En dat kunnen wij natuurlijk alleen maar toejuichen.
Wil jij met je webshop op een geautomatiseerde manier je Core Web Vitals scores verbeteren? Onze Page Speed Booster helpt webshops geautomatiseerd deze scores te optimaliseren.
Hi! Mijn naam is Dion, Account Manager at Hypernode
Wil je meer weten over Hypernode's Managed E-commerce Hosting? Plan je online meeting.
plan een een-op-een meeting tel:+31648362102
