De Interaction to Next Paint vervangt de First Input Delay

Vanaf 12 maart 2024 heeft er een wijziging plaatsgevonden in de Core Web Vitals metric, namelijk de Interaction to Next Paint heeft de First Input Delay vervangen. Google voert deze aanpassing door om de meetbaarheid voor de statistiek van de responsiviteit van een website te verbeteren.

Een half jaar geleden kondigde we deze wijziging al aan via onze nieuwsflits, maar nu is deze daadwerkelijk uitgerold.

Achtergrondinformatie over de Core Web Vitals

De introductie van de Core Web Vitals heeft plaatsgevonden in het begin van 2020. Om een goede gebruikerservaring te hebben heeft Google de nadruk gelegd op een set metrische gegevens die de gebruikerservaringen realtime meten voor laadprestaties, interactiviteit en visuele stabiliteit van een pagina.

De Core Web Vitals bestond uit de volgende onderdelen:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• De Cumulative Layout Shift (CLS)

Met dan nu de officiële vervanging van FID door het onderdeel Interaction to Next Paint (INP).

Waarom komt de FID te vervallen?

Bij de First Input Delay wordt alleen de vertraging tussen de eerste interactie van een event en de start van het event gemeten. Aangezien een websitebezoek meestal (en hopelijk) niet uit één klik, maar uit meerdere klikken bestaat, heeft Google hier de richtlijnen voor aangepast om zo een betere metric te bieden voor de totale gebruikerservaring van een website binnen de algehele Core Web Vitals.

Uit onderzoek (Chrome-gebruiksgegevens) is gebleken dat 90% van de tijd van een bezoeker op een webpagina wordt doorgebracht nadat deze geladen is. Daarom is het belangrijk om de responsiviteit gedurende de levenscyclus van de pagina zorgvuldig te meten. Vandaar dat Google hier vanaf nu dan ook meer aandacht aan geeft.

Wat houdt de INP (Interaction to Next Paint) in?

De INP staat voor Interaction to Next Paint: deze statistiek registreert de reactietijd van alle klik-, touch- en toetsenbord interacties van de gebruiker tijdens het bezoeken van een webpagina van een gebruiker. De uiteindelijke INP-waarde is de langste waargenomen interactie, waarbij uitschieters worden genegeerd.

• De periode (tijd) tussen stap één en drie, is de vertraging van een gebeurtenis, dit is in de Core Web Vitals de FID (First Input Delay).
• De periode tussen stap één en vijf, is de duur van de complete gebeurtenis wat de INP-score zal zijn.

Niet geheel onbelangrijk, de INP-scores worden berekend op het moment dat de bezoeker de pagina verlaat. Wat resulteert in de algehele responsiviteit score van de pagina. Een lage INP betekent dat de pagina goed reageert op gebruikersinvoer.

De INP beoordeelt de responsiviteit met behulp van gegevens uit de Event Timing API. De Event Timing API geeft timing informatie voor bepaalde gebeurtenissen weer. Er wordt rekening gehouden met bepaalde soorten gebeurtenissen, de timing informatie wordt zichtbaar wanneer het tijdsverschil tussen gebruikersinvoer en teken bewerkingen die volgen op invoer verwerking een bepaalde drempel overschrijdt.

Wat is een interactie?

Onderstaand een visualisering van een interactie, een invoervertraging geldt van ‘trigger’ totdat de gebeurtenis handlers worden uitgevoerd. Deze worden uitgevoerd. Vervolgens vindt er nog een vertraging (renderen en paint) voordat het volgende beeld (frame) getoond wordt.

Goed om te weten: Voor INP-doeleinden worden alleen de volgende interactietypen waargenomen:

• Klikken met een muis.
• Tikken op een apparaat met een touchscreen.
• Een toets indrukken op een fysiek toetsenbord of schermtoetsenbord.

De belangrijkste aanjager van interactiviteit is vaak Javascript. De browsers bieden ook wel standaard interactiviteit, zoals bijvoorbeeld selectievakjes, keuzerondjes en besturingselementen die door CSS worden aangedreven. De laatste zorgen vrijwel nooit voor INP problemen.

Wat is een goede INP-score?

Om ervoor te zorgen dat je gebruikerservaringen levert met een goede responsiviteit, is een goede drempelwaarde om te meten 75% van het aantal pagina ladingen dat in het veld is geregistreerd, gesegmenteerd over mobiele apparaten en desktop apparaten:

• Een INP gelijk aan of minder dan 200 milliseconden betekent dat jouw pagina een goede responsiviteit heeft.
• Een INP tussen 200 milliseconden en 500 milliseconden betekent dat de responsiviteit van jouw pagina moet worden verbeterd.
• Een INP groter dan 500 milliseconden betekent dat jouw pagina slecht reageert.

Hoe meet je de INP?

De INP-score kan op twee manieren gemeten worden, namelijk in de praktijk en met een tool. Het uitgangspunt is natuurlijk wel hoe de echte gebruikers de INP ervaren. Dus deze gaan we dan ook het eerst toelichten.

Idealiter, voordat je start met het optimaliseren van de INP zijn de testgegevens met behulp van een tool geanalyseerd. In het beste geval, krijg je RUM (Real User Monitoring) gegevens, maar ook de specifieke interactie die verantwoordelijk is voor de INP-score. Dit is waardevolle informatie, zodat je weet waar je kunt beginnen met het optimaliseren door middel van tooling.

Een handige eerste indicatie tool is het Chrome User Experience Report (ook bekend als het Chrome UX Report, of kortweg CrUX). CrUX is een dataset die weergeeft hoe echte Chrome-gebruikers populaire bestemmingen op internet ervaren. CrUX is de officiële dataset van het Web Vitals- programma. Alle gebruikersgerichte Core Web Vitals-statistieken zijn vertegenwoordigd.

Het analyseren van de INP-score met tooling

Is uit bovenstaande tool gebleken dat je geen goede INP-score hebt, dan is het zaak te analyseren welke actie dit veroorzaakt. Een handige tool om dit in kaart te brengen is de Google Dev tools extensie.

Op basis hiervan kun je zien wat de algehele score is. Is deze niet voldoende, dan kun je dit verder analyseren door middel van de Lighthouse Timespans. Dit is de prestatieprofiler van Chrome, waarmee je gedrag inzichtelijk en meetbaar kunt maken.

Deze kun je als volgt gebruiken.

1. Open DevTools in je Google Chrome browser en klik op het Tabje ‘Lighthouse’.
2. Selecteer onder de sectie ‘Mode’ de optie ‘Timespan’.
3. Maak de keuze waarop je het wilt testen, desktop of mobiel onder het kopje ‘Device’.
4. Zorg ervoor dat onder ‘Categories’ de checkbox bij ‘Performance’ aangevinkt staat.
5. Klik op ‘Start timespan’.
6. Test nu de interacties op de betreffende pagina waarover je testdata wilt verzamelen.
7. Klik vervolgens op ‘End timespan’, en wacht totdat de audit verschijnt.
8. Zodra de audit op het Lighthouse-tabblad is ingevuld, kun je de audits filteren op INP, hierbij komt de veroorzaker van de INP naar voren, daarbij ontvang je ook bruikbare tips om het (mogelijk) op te lossen.

Er zijn ook nog alternatieven om het nog dieper te onderzoeken, maar die laat ik voor nu even buiten beschouwing.

Tips ter verbetering van jouw INP

Ervaart jouw website INP-problemen, dan hebben wij alvast een aantal tips uitgewerkt die waardevol voor jou kunnen zijn. Uiteraard staat altijd het gezond verstand bovenaan, een website moet goed functioneren en een gebruiker moet een goede ervaring hebben.

Dus ga niet koste wat kost proberen het groene bolletje te behalen als het ten koste van de uiteindelijke gebruiksvriendelijkheid gaat.

1. Beperk het gebruik van externe (third-party) scripts

Naast het feit dat dit de INP beïnvloedt, beïnvloedt het de complete laadtijd. Vooral wanneer scripts vanuit externe websites invloed hebben op de hoofdtaak van de browser.

• Analyseer kritisch welke scripts er ingeladen worden en of deze wel noodzakelijk zijn.
• Tools voor heatmapping (Hotjar), zijn erg zwaar. Gebruik deze tijdelijk, bijvoorbeeld, alleen de eerste paar dagen wanneer een nieuwe functie is toegevoegd.

2. Beperk de DOM-grootte

Marketeers willen vaak veel informatie op een pagina tonen, maar onthoud dat de grootte van het DOM-document de laadtijd (rekenkracht) van de browser ook beïnvloedt. Een te grote DOM size betekent dat je te veel DOM Nodes (HTML tags) op jouw pagina hebt gebruikt of dat deze html tags te diep zijn ‘ge-nest’.

Tijdens het laden van de pagina zal een browser vaak meer rekenkracht nodig hebben om de pagina te ‘renderen’ waardoor de pagina later op het scherm wordt getoond. JavaScript en CSS worden vaak trager uitgevoerd omdat de browser meer ‘nodes’ moet bekijken.

3. Beperk het Javascript gebruik

Zoals hierboven al aangegeven vraagt een Javascript om meer rekenkracht van jouw device om elementen te tonen. Houd hier bij het ontwikkelen van een website rekening mee. Sommige Javascripts zijn noodzakelijk en functioneel, dus vermijd het gebruik van deze scripts dan ook vooral niet, maar een animatie kan in plaats van via Javascript ook prima via de CSS property ‘transform’ weergegeven worden.

De Interaction to Next Paint

Allereerst hoop ik dat mijn artikel je duidelijkheid geeft over de INP en hoe deze de gebruikerservaring van de bezoeker op jouw website kan beïnvloeden. Buiten alle tools en scores is het nog steeds het belangrijkste wat jouw publiek écht ervaart.

Dit kan door middel van RUM (Real User Monitoring). Hoewel Google met de Core Web Vitals een goede indicatie geeft wat de bezoeker ervaart, hoeft dit niet de waarheid te zijn. Staar je hier dan ook niet blind op. Heb jij vragen over mijn artikel of ben jij benieuwd naar een technische analyse van jouw website? Neem dan gerust contact met ons op en vraag naar de mogelijkheden.