Interaction to Next Paint: nieuwe Core Web Vital metric?

Gebruikerservaring is al jaren één van de belangrijkste pijlers van Google. Het weegt zwaar mee in het algoritme en is dus een factor om rekening mee te houden. In juli 2021 introduceerde Google de Core Web Vitals, dat als directe ranking factor meeweegt naast de al bestaande websitesnelheid ranking factor.

Wat zijn de Core Web Vitals?

De Core Web Vitals zijn echte gebruikerservaring-metrics en zijn er op gericht om de gebruikerservaring op een website in drie meetbare aspecten te vangen. De Core Web Vitals bestaan op het moment van schrijven uit drie factoren:

• First Input Delay: De tijd dat het kost vanaf het moment dat een gebruiker de eerste interactie heeft met de pagina tot aan het moment dat de website in staat is te reageren hier op.
• Largest Contentful Paint: De tijd dat het kost vanaf het moment dat de pagina begint met laden, tot aan het moment dat het grootste, zichtbare element geladen is.
• Cumulative Layout Shift: Verschuivingen in elementen tijdens het laden van een pagina.

Voor meer informatie over deze metrics kunt u terecht in onze blog over de Core Web Vitals. In dit artikel wordt ingegaan op een toevoeging aan deze Core Web Vitals, namelijk de Interaction to Next Paint (INP).

Wat is Interaction to Next Paint?

De Interaction to Next Paint is een metric dat de responsiveness test op interacties, oftewel hoe goed de website reageert op interacties. Onder interacties voor INP vallen de volgende handelingen:

• Een klik met een muis.
• Een aanraking op een touchscreen.
• Het drukken van een fysieke button op een toetsenbord.

Een interactie is een groep gebeurtenissen die dezelfde handeling van een gebruiker vereist, een klik met de muis bijvoorbeeld. Interacties hoeven overigens niet per sé klikken op links te zijn. Ook handelingen die door JavaScript of CSS uitgevoerd worden tellen als interactie. Zie het voorbeeld van de veelgestelde vragen.

Het verschil tussen Interaction to Next Paint en First Input Delay

De al bestaande First Input Delay meet ook een gebruikersinteractie in secondes, maar toch verschilt deze van de nieuwe Interaction to Next Paint. First Input Delay meet namelijk enkel de allereerste interactie. Interaction to Next Paint meet alle interacties van een gebruiker totdat deze de pagina verlaat. Daarnaast meet First Input Delay alleen de vertraging tussen de interactie en het reageren op de interactie, terwijl INP de tijd meet totdat er visuele feedback is.

Hoe wordt Interaction to Next Paint berekend?

Iedere klik of keyboard interactie op een pagina wordt gemeten door de browser. De interactie, dus groep van gebeurtenissen, die het langste duurt (op enkele uitzonderingen na) wordt als de INP waarde bestempeld. De waarde van INP wordt dan ook in secondes uitgedrukt. Het geeft de tijd weer dat het duurt dat de interactie begint tot aan het moment dat de handeling visueel wordt uitgevoerd.

Voorbeeld van een handeling

Een gebruiker ziet een accordeon, zoals een blok van veelgestelde vragen op een website, en klikt om deze open te klappen. Vanaf dat moment gaat de timer lopen tot aan het moment dat de accordeon opengeklapt is. Als de gebruiker dit voor alle veelgestelde vragen doet, valt dit allemaal binnen dezelfde interactie groep. Als de 3e keer uitklappen langer duurt dan de eerste twee, is dit de waarde die als INP bestempeld wordt. De waarde wordt definitief zodra de gebruiker de pagina verlaat.

Wat is een goede Interaction to Next Paint score?

Omdat interacties nu meetbaar zijn, is er natuurlijk ook een benchmark over ‘goede’ en ‘slechte’ waardes. Over het algemeen geldt het volgende:

• Een INP van minder 200 milliseconde of minder telt als een goede waarde.
• Een INP tussen de 200 en de 500 milliseconde betekent dat het verbetering nodig heeft.
• Een INP boven de 500 milliseconde geldt als een slechte waarde.

Interacties verschillen natuurlijk per pagina, maar ook per browser en toestel. Een desktop reageert mogelijk sneller dan een oude smartphone. Hierdoor wordt een minimale drempel gebruikt door de browser. Zoals bij de andere Core Web Vitals is deze metric meetbaar met de PageSpeed Insights tool van Google.

Hoe is de Interaction to Next Paint te verbeteren?

Net als First Input Delay is het een ingewikkelde metric om te verbeteren. De webpagina kan ontzettend snel zijn, maar er hoeft maar één handeling in de groep van gebeurtenissen te zijn die lang duurt en de INP waarde schiet omhoog. De pagina heeft het het zwaarst bij laden van de pagina. Wanneer gewerkt wordt aan het verlichten van de zwaarte van het uitvoeren van scripts, het laden van CSS en het renderen van de pagina, verbetert doorgaans ook de INP waarde.

Interaction to Next Paint vereist echte gebruikersdata

Net als bij First Input Delay, kan de situatie ontstaan dat er een pagina getest wordt in de PageSpeed Insights tool en dat er geen waarde staat bij Interaction to Next Paint. Dit komt omdat beide metrics gebruikservaring meten. Hiervoor is echte data van gebruikers nodig en kan dit niet gesimuleerd worden in een lab door een computer. Bij voldoende gebruikerssessies van Chrome gebruikers in 28 dagen (CrUX data) is het wel mogelijk om deze waardes in te zien.

Let wel: De Interaction to Next Paint is momenteel nog in de experimentele fase en nog niet officieel een Core Web Vital metric. De bovenstaande drempels en waardes kunnen dus nog aangepast worden naarmate de test vordert. De verwachting is dat deze zich gaat aansluiten bij de bestaande Core Web Vitals. Het is zelfs mogelijk dat INP de First Input Delay gaat vervangen.