interaction to next paint (INP)

12 maart 2024, zal Google interaction to next paint (INP) opnemen in de Core Web Vitals. Tevens nemen we op die datum afscheid van first input delay (FID). Je merkt het al, een hoop vakjargon in de eerste twee zinnen. In dit artikel leg ik je uit: wat INP is, hoe je het inzichtelijk maakt en of het wel of niet belangrijk is voor SEO. Nieuwsgierig geworden? Lees dan gauw verder

Wat is INP?

Interaction to Next Paint is een metric die de totale interactie vertraging van een pagina weergeeft door een van de langste interacties te identificeren die plaatsvinden wanneer een gebruiker de pagina bezoekt.

Om te slagen voor deze metric hanteert Google een drempelwaarde van 200ms. Met de Interaction to Next Paint wordt bijvoorbeeld rekening gehouden met deze specifieke soorten interacties:

• Klik met een muis.
• Tikken op een apparaat met touchscreen.
• Een toets indrukken op een fysiek toetsenbord.

Hoe maak jij de INP inzichtelijk?

Er zijn verschillende soorten data en tools waarmee je het gesprek rondom de INP kan starten. Denk bijvoorbeeld aan Lighthouse en Pagespeed Insights. Het is hierbij belangrijk om rekening te houden met het feit dat er lab en field data is.

Field (RUM) data

Wanneer je een test doet binnen Pagespeed Insights bestaat het bovenste gedeelte uit field data. Dit is ook het stuk dat meetelt om te slagen voor de Core Web Vitals. Al langere tijd kan je hier de INP in terugvinden. 

Tijdens het schrijven van dit artikel wordt er ook al meegeven wanneer je niet meer gaat slagen wanneer de INP officieel de FID gaat vervangen als Core Web Vital metric. 

Google heeft zelf ook wat stappen te zetten om te slagen voor de INP 😉 Nu maar hopen dat jullie SEO Brein niet door gehaktmolen halen.

Het “nadeel” is dat Pagespeed Insights ook met gebreken komt. Je weet bijvoorbeeld niet op welke templates problemen voorkomen, maar ook niet met welke elementen (bijvoorbeeld knoppen) een trage interactie wordt aangegaan. Wil je dit soort zaken in kaart brengen, zou je kunnen kijken naar real-user monitoring tools.

Lab data

Voor iedere website zijn lab data aanwezig, ongeacht de hoeveelheid bezoekers die je op je website hebt. Daarom zijn tools zoals Google Lighthouse en WebPageTest ook goed voor de community. Het zijn namelijk perfecte conversation starters. Maar je loopt ook al snel tegen gebreken aan.

Zo heb je al snel gemerkt dat Google Lighthouse geen INP meet. Dit komt doordat een INP event op meerdere fasen van de pagina voor kan komen en een bezoeker niet direct een interactie aangaat. Een Lighthouse test laadt enkel de pagina en gaat vervolgens geen interactie aan. De INP is daarom een heel lastige metric om in het lab te meten. Total Blocking Time (TBT) wordt daarom vaak als alternatief gebruikt, echter gaat dit weinig tot niets zeggen over de echte lange taken in het wild.

Voorbeeld verschil lab en RUM data

Elke website en webshop maakt gebruik van third parties vanwege specifieke functionaliteiten. De meeste van deze third parties maken gebruik van Javascript. Dit betekent ook dat het uitvoeren van deze code bijdraagt aan een goede interactie, of juist niet. Zie hieronder voorbeelden van heatmap tools en contentmanagers.

Op de screenshot hieronder zien we de impact die Hotjar maakt op de TBT, en dus ook hetgeen waar je met lab data uit de voeten kunt. Al met al een impact van 380ms

Onderhand weten we goed dat er verschil zit tussen de INP binnen lab en RUM data, maar hoeveel dan? In de screenshot hieronder zien we wat Hotjar daadwerkelijk bijdraagt aan de INP. Hiermee willen we laten zien dat de Lighthouse cijfers niet representatief zijn aan wat er echt wordt ervaren voor jouw gebruikers voor de INP.

Dikke duim naar Hotjar trouwens, wat dit was eerder 2000+ms.

Waarom zijn RUM tools belangrijk voor de INP?

Deadline INP

Wil jij vanaf 12 maart voldoen aan de INP en dus de Core Web Vitals? Dan zal je voor 13 februari de INP moeten optimaliseren. Google gebruikt namelijk data van de afgelopen 28 dagen (CrUX). Wil je meer weten of je nu voldoet, check dan de volgende gratis tools gebaseerd op historische data die Google hiervoor gebruikt.

1. Core Web Vitals history
2. Core Web Vitals UX score check

Of nog makkelijker, download de Core Web Vitals history browser extensie.

Het bruggetje van UX naar SEO

Moeten we nu met zijn alle de INP gaan verbeteren om “beter te scoren”? Een uitspraak van Google op 5 februari 2024:

“We don’t confirm any of the things [page experience or core web vitals] as a direct ranking factor.” He added, “But to reiterate we look at many things not one thing and even the one thing might not be a direct ranking factor.” “It doesn’t say it is a ranking factor,”

Swartz B (2024). Google: We Don’t Say Core Web Vitals Are A Ranking Factor. Seroundtable

Ook in de SEO mastermind werden waardevolle reacties gedeeld:

Core Web Vitals zijn absoluut belangrijk voor de gebruikerservaring, maar voor je SEO ranking is het echt geen grote factor. In mijn ogen is het een echte “tiebreak” wanneer je een enorme concurrentie stijd hebt.

Indirect heeft een goede UX natuurlijk een enorme impact op het totaal plaatje en dus ook op de performance van SEO. Zo zegt Karlijn Löwik terecht:

Interaction to Next Paint verbeteren

Om de INP te verbeteren zijn er verschillende zaken die aangepakt kunnen worden, maar het is een andere manier van optimaliseren dan dat we gewend zijn. Zo hebben we eigenlijk nooit moeite moeten doen om voor de huidige Core Web Vital metric, First Input Delay (FID), te moeten slagen. Nu dat we niet alleen de eerste interactie op een pagina meten, maar ook alle anderen wordt het een nieuwe uitdaging.

Wanneer er een interactie wordt aangegaan met een button kan er allerlei Javascript getriggerd worden die er vervolgens voor zorgen dat er visueel (paint) iets gaat veranderen op de pagina, dit is een taak die de CPU van je mobiel op zich neemt. Maar tijdens deze interactie kunnen er ook andere taken bezig zijn, denk bijvoorbeeld aan Hotjar die op de achtergrond jouw cursor of scroll gedrag bijhoudt. De voornaamste winst is te behalen bij het optimaliseren van de Javascript, maar gelukkig zijn er ook andere manieren.

Waaruit bestaat een INP event?

Helaas moeten we een klein beetje technisch worden om de INP wat beter te begrijpen op dit vlak. Naast dat Javascript een INP kan veroorzaken ligt het probleem ook bij rendering. In de visualisatie hieronder zie je uit welke fases een INP bestaat.

Het middelste deel “processing time” kan Javascript vaak van beschuldigd worden, maar het renderen is minstens zo belangrijk om op te focussen. Zie bijvoorbeeld een praktisch voorbeeld van een INP breakdown wanneer een bezoeker de cookies accepteert:

• Input delay is de tijdsperiode vanaf het moment dat de gebruiker voor het eerst interactie heeft met een pagina zoals tikken op een scherm, klikken met een muis of drukken op een toets tot het moment dat de event callbacks voor de interactie beginnen te lopen. 
• Processing time zijn de Javascript taken die uitgevoerd worden en event handlers die bezig zijn.
• Presentation delay is andere interacties in de wachtrij afhandelen, de pagina layout herberekenen en pagina inhoud schilderen

Niet je main thread overbelasten

setTimeout en setInterval zijn veelgebruikte JavaScript-timerfuncties die de invoervertraging kunnen beïnvloeden. setTimeout plant een callback om uit te voeren na een bepaalde tijd, terwijl setInterval een callback herhaaldelijk plant op een opgegeven interval, wat waarschijnlijker is om interacties te verstoren. Beoordeel de noodzaak van deze timers in je code en vermindert hun werklast indien mogelijk.

Voorkom dat er (te) lange taken zijn

Wanneer te veel lange taken uitgevoerd moeten worden in één keer, maar niet alles direct nodig is, dan kan je de taken opsplitsen in kleinere delen. Dit zorgt ervoor dat interacties en zelfs animaties vloeiender gaan, omdat de nodige code hiervoor al is uitgevoerd zonder dat je main thread nog te druk is.

Zorg voor een minder grote DOM

Hoe groot je DOM size is hangt af van hoe er is geprogrammeerd, maar ook welke stack je gebruikt. Voorheen kon je gewoon lekker je gang gaan (eigenlijk ook niet) maar met de INP op komst dient er rekening te worden gehouden met de grootte van je DOM. Sta bijvoorbeeld wat langer stil bij de volgende punten:

• Plak geen tekst in de WYSIWYG-editor (dit brengt vaak stijlen met zich mee en extra classes), gebruik control + shift + V om de platte tekst te plakken).
• Is je onepager te lang aan het worden? Ga dan toch over op een more-pager om niet alles nodig te hebben op één pagina.
• Wanneer je een nieuwe functie wilt toevoegen aan je website kan je eerst kijken of hier al browser support is in plaats van een Javascript library te gebruiken.
  • Zo is er voor lazy loading eigenlijk geen Javascript meer nodig, omdat er genoeg browser-support is.
• Voeg niet te veel CSS classes toe, vaak kan hetzelfde resultaat behaald worden met minder classes.
• En kijk uiteraard uit met welke plugins en thema’s je gebruikt, zijn ze echt zo snel als hoe ze adverteren?

Vermijd requestAnimationFrame()

Vermijd het gebruik van requestAnimationFrame() voor niet-visueel werk. Dit kan de main thread van de browser voor een zeer lange tijd blokkeren, wat resulteert in een slechte interactie, grote vertragingen voor de gebruikers van je website en een verhoogde INP.

Zo hoef je de volgende screenshot niet eens te snappen om te begrijpen dat er te veel gebeurd.

Maak gebruiken van “Yielding” of informeer je developer

Yielden is een techniek die heel veel gebruikt gaat worden voor het fixen van INP issues. Het is niet verstandig om het te veel te gebruiken. 

Yielden is het tijdelijk onderbreken van de uitvoering van een taak die wordt uitgevoerd op de main thread om andere taken te verwerken. Wanneer een taak op de main thread onderbroken wordt, betekent dit dat het vrijwillig de controle opgeeft en andere in afwachting zijn de taken laat uitvoeren (belangrijkere). Dit mechanisme voorkomt dat langlopende taken de main thread bezetten en interactie problemen veroorzaken op jouw site.

Loop je vast met de implementatie? In de SEO Mastermind helpen we je graag verder met al je Core Web Vital vragen.