Interaction to Next Paint: Wat is het en hoe kun je dit verbeteren?

Datum: juli 6, 2023, Auteur: Patrick, Categorie: SEO

De Core Web Vitals van Google gaan er vanaf 2024 iets anders uit zien dan we gewend zijn. De Cumulative Layout Shift (CLS) en Largest Contentful Paint (LCP) blijven net zo belangrijk als dat deze nu al zijn, maar vanaf maart 2024 wordt de First Input Delay (FID) vervangen door de Interaction to Next Paint (INP). Hoe deze wijziging precies vorm krijgt, wat het verschil tussen FID en INP is én hoe jij de INP-score voor je website controleert en verbetert, dat lees je in dit blog. Hoewel maart 2024 nog ver weg lijkt, is het toch slim om dit alvast mee te nemen in de plannen voor komend kwartaal.

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

Voor we de diepte induiken, is het van belang om duidelijk te hebben waarom het essentieel is om de Core Web Vitals – waar de Interaction to Next Paint vanaf maart 2024 dus onder valt – te verbeteren. De Core Web Vitals van Google gaan over het verbeteren van de gebruikerservaring op websites, dus dit is de belangrijkste focus bij het optimaliseren van je website.

Door de gebruikerservaring op je website te verbeteren, verbeter je ook de algemene kwaliteit van je website. Dit zal normaal gesproken tot betere rankings in de organische zoekresultaten leiden. Ook voor Google Ads is een betere kwaliteit interessant, aangezien dit de kwaliteitsscore van pagina’s verbetert en daarmee de kosten per klik verlaagt en voor hogere posities zorgt.

FID versus INP: wat is het verschil?

Zowel de FID als de INP gaan over de responsiveness van de website. Oftewel: over hoe snel een webpagina reageert op interacties van de sitebezoeker. Op dit vlak verandert er dus niks. Maar op andere vlakken kennen deze twee waardes wél grote verschillen. Om hier een helder beeld van te krijgen lees je hieronder per waarde welke theorie hierachter schuilgaat.

1. De theorie achter First Input Delay (FID)

De First Input Delay (FID) is een meetwaarde van de Core Web Vitals die vaststelt hoe snel na een interactie een bepaalde actie wordt gestart. Bij zo’n interactie kun je denken aan een klik op een knop, link of iets anders dat vaak javascript gedreven werkt.

Concreet wordt er bijgehouden hoeveel tijd er zit tussen het moment dat de interactie plaatsvindt en het moment dat de reactie hierop start; de ‘Event Handler’. De tijd die nodig is voor het uitvoeren van die reactie en het daadwerkelijk tonen van het gewenste resultaat, wordt dus niet meegenomen bij de FID.

2. De theorie achter de Interaction to Next Paint (INP)

Bij de Interaction to Next Paint (INP) wordt er – in tegenstelling tot bij de FID – wél gekeken naar hoe snel de browser een reactie toont na een interactie tussen de websitebezoeker en de website. Dit is dus een optelsom van de First Input Delay, de tijd dat het duurt om de input te verwerken en de tijd dat het kost om de visuele verandering te tonen.

“De INP houdt bij hoeveel tijd er zit tussen het moment van de interactie door de websitebezoeker en het moment dat er ook echt iets visueels binnen de website verandert.”

Met andere woorden wordt er bij de INP dus bijgehouden hoeveel tijd er zit tussen het moment van de interactie door de websitebezoeker en het moment dat er ook echt iets visueels binnen de website verandert. Deze meetwaarde is een stuk passender dan die van de FID. Als websitebezoeker verwacht je immers dat er iets visueels gebeurt wanneer je op een object klikt waar een interactie achter zit. Wanneer dit visuele resultaat langer op zich laat wachten, heeft de websitebezoeker het idee dat dit object niet werkt.

Conclusie: dít is het grootste verschil

Het grootste verschil tussen FID en INP zit dus echt in het gemeten resultaat. Bij de FID wordt er gekeken naar het moment dat de opdracht is gegeven om een taak uit te voeren, terwijl de INP kijkt naar het moment dat deze taak is afgerond en visueel een verandering tot gevolg heeft.

Dit houdt de verandering precies in

Waar de INP nu geen onderdeel is van de Core Web Vitals, wordt dat het dus straks wel. De INP gaat de FID vervangen. Net als de FID wordt de INP ook een ranking factor voor de organische vindbaarheid. Daarbij heeft de INP straks ook invloed op de kwaliteitsscore van een pagina voor Google Ads én speelt het – als onderdeel van de volledige gebruiksvriendelijkheid van de pagina – ook een rol voor het uiteindelijke conversiepercentage.

Meer aandacht besteden aan de Core Web Vitals dan voorheen

Concreet betekent dit dat bedrijven genoodzaakt zijn veel meer aandacht te besteden aan deze Core Web Vital dan voorheen. De FID was binnen de Core Web Vitals altijd een beetje een ondergeschoven kindje. Waar veel websites bijvoorbeeld grote CLS- en LCP-problemen hebben, voldoet zo’n 95% hiervan alsnog aan de FID-normen. Zonder dat hier dus echt aandacht aan wordt besteed.

Met de introductie van de INP binnen de Core Web Vitals komen websites daar straks niet meer zo makkelijk vanaf. De INP is als meetwaarde immers veel meer allesomvattend en aan de normen voldoen is een stuk lastiger.

Welke INP-score heb je nodig om te voldoen aan de Core Web Vitals?

Het beste is natuurlijk als jouw website direct reageert als iemand een interactie doet. Niet alleen scoor je zo supergoed op de INP, ook houd je je jouw websitebezoekers zo tevreden. Die hebben namelijk een hekel aan wachten. Maar: welke INP-score heb je nu minimaal nodig om aan de Core Web Vitals te voldoen?

De data die wordt gebruikt om de INP-score te meten is echte velddata (Real User Monitoring of RUM). Oftewel: data van echte websitebezoekers. Omdat niet elke websitebezoeker een snelle internetverbinding of een snelle computer of telefoon heeft, is een perfecte score in de praktijk erg moeilijk om te behalen. Daarom heeft Google bepaald dat:

  • Een INP-score goed is als er binnen 0,2 seconden na de interactie een visueel resultaat getoond wordt.
  • Er verbetering nodig is als die tijd tussen de 0,2 en de 0,5 seconden ligt.
  • De INP als ‘slecht’ wordt bestempeld als het langer dan 0,5 seconden duurt.

Hoe controleer je de INP-score van je website?

Het controleren van de INP-score doe je net iets anders dan het controleren van andere Core Web Vitals-meetwaarden. Die andere waarden zijn namelijk alleen gefocust op het laadproces van de webpagina en kunnen daarom eenvoudig in kaart worden gebracht.

Voor de INP ligt dit net iets anders: deze wordt tijdens het volledige bezoek bijgehouden. Vanaf het moment dat je een pagina begint te laden tot het moment dat je de pagina weer verlaat. Omdat de INP-meetwaarden dus vastgesteld worden op basis van het hele paginabezoek, is het niet mogelijk kortstondig een test te doen en zo direct je resultaten in te zien.

Hoe wordt deze score vastgesteld?

Voordat ik dieper inga op hoe je je INP-score dan wél kunt inzien, is het goed om een beeld te krijgen van hoe deze score precies wordt bepaald.

Gemiddeld heeft een pagina zo’n 10 verschillende interacties. Voor zo’n pagina geldt dat de traagste interactie je INP-meetwaarde bepaalt. Maar heb je een pagina met extreem veel interacties –  denk aan configurators of uitgebreide formulieren – dan ligt die manier van meten net weer anders. Speciaal voor dat soort pagina’s heeft Google bepaald dat per 50 interacties de traagste interactie wordt geschrapt. Dus stel, je hebt een pagina met wel 120 interacties, dan wordt de INP-waarde bepaalde op basis van de op twee na langzaamste interactie.

Vier tools om jouw INP-waarde te controleren

1. Search Console of CrUX: krijg inzichtelijk of er verbetering noodzakelijk is

Wanneer je data wilt hebben over hoe Google jouw website op basis van INP ziet, moet je natuurlijk bij Google zelf aankloppen. Sinds eind juni 2023 kun je in het Search Console van Google zelf terugvinden of er problemen zijn op gebied van INP. Ga hiervoor naar het sitevitaliteit-tabje, kijk bij de mobiele of desktop resultaten en onderaan de pagina die volgt vind je of er problemen zijn gevonden op je website.

Een andere mogelijkheid om dit soort data te vergaren is door middel van het CrUX dashboard van Google gebruiken. Ga in dit rapport naar de tab ‘Interaction to Next Paint’ en krijgt direct een totaaloverzicht van je website. Het voordeel van deze mogelijkheid is dat je meer historische data in kunt zien en een site niet geverifieerd hoeft te hebben in het Search Console.

Hoewel het Search Console en CrUX ideaal zijn voor het krijgen van een totaaloverzicht van de INP-meetwaarden, geeft het weinig extra informatie als je ziet dat er ruimte is voor verbetering. In het Search Console zie je wel url’s die het probleem zouden veroorzaken, maar – net als bij LCP en CLS-problemen – worden deze url’s vaak gebundeld en dat kan je op een dwaalspoor brengen.

2. Web Vitals extensie: analyseer zelf je INP-meetwaarden

De Web Vitals extensie voor de Chrome-browser is een goede manier om zelf inzicht te krijgen in hoe je pagina presteert. Standaard geeft deze browser al weer hoe een pagina op de Core Web Vitals scoort tijdens je bezoek, vergeleken met de velddata, maar om echt een goede test uit te voeren kun je een overlay met data aan een pagina toevoegen. Dit doe je door de volgende stappen te doorlopen:

  1. Klik met de rechtermuisknop op de extensie en ga naar opties.
  2. Klik op ‘Display HUD overlay’ en klik op ‘Save’.
  3. Je ziet dat er nu rechtsbovenin een venstertje bijgekomen is. Loop door je website en voer alle interacties uit om te zien of daar trage interacties tussen zitten.

3. DevTools: krijg inzicht in de precieze meetwaarden per interactie

Een andere goede manier om te zien hoe goed je website scoort op de INP is via de DevTools in de Chrome-browser. Hier kun je namelijk per element zien hoe deze presteerde op het gebied van de INP. Om dit inzichtelijk te maken, volg je de volgende stappen:

  1. Ga naar de DevTools door met de rechtermuisknop op de site te klikken klik vervolgens op ‘Inspecteren’.
  2. Ga naar het ‘Performance’-tabblad en vink hier bovenaan ‘Web Vitals’ aan.
  3. Klik op het ronde icoontje om een opname te starten.
  4. Voer tijdens de opname alle verschillende interacties op een pagina uit. Klik op ‘Stop’ als je klaar bent.
  5. Ga in de resultaten naar de ‘Interaction’. Hier krijg je al snel een visueel overzicht van welke interacties langer duren dan andere. Klik op een resultaat om te zien om welke interactie het gaat en wat de totale INP-meetwaarde was.

4. Lighthouse: krijg voorstellen om de INP-score te verbeteren

De laatste manier om de INP-meetwaarde in kaart te brengen is met de Lighthouse-tool in de DevTools-tab van de Chrome-browser. Deze tool lijkt veel op de bekende pagespeed-tool van Google, met als verschil dat je hier tegenwoordig ook opnames kunt maken om bijvoorbeeld de INP-meetwaarde in kaart te brengen. Om dit te doen volg je de volgende stappen:

  1. Ga naar de DevTools door met de rechtermuisknop op de site te klikken en klik vervolgens op ‘Inspecteren’.
  2. Ga naar het ‘Lighthouse’-tabblad en selecteer hier bij ‘Mode’ de optie ‘Timespan’. Kies vervolgens of je mobiele of desktopresultaten wil en vink uiteindelijk bij ‘Categories’ de optie ‘Performance’ aan.
  3. Klik op ‘Start timespam’ om de opname te starten.
  4. Voer alle verschillende interacties uit op de betreffende pagina en klik op ‘End Timespan’ als je klaar bent.
  5. Je krijgt nu de resultaten van de test te zien en de INP-meetwaarde wordt inzichtelijk gemaakt.

De Lighthouse-optie is in vergelijking met de andere genoemde opties trager en beperkter. Maar Lighthouse heeft daarentegen dan wel weer als voordeel dat hij op basis van de webpagina voorstellen doet om de prestaties te verbeteren. Voor INP zijn die voorstellen voor verbeteringen op het moment van schrijven van dit blog (juni 2023) nog erg beperkt, maar vermoedelijk zal dit uit worden gebreid nu dit onderdeel van de Core Web Vitals wordt.

Let op: zie labdata niet aan voor velddata

Tot slot goed om rekening mee te houden als je je INP-waarde gaat meten: labdata kun je niet per definitie aanzien voor velddata. De resultaten van tests in je eigen browser betreffen labdata. Resultaten zullen in de velddata – welke Google uiteindelijk gebruikt – anders zijn. Niet iedereen gebruikt namelijk hetzelfde apparaat of dezelfde internetverbinding om je website te bezoeken. In de meeste gevallen kun je er echter wel vanuit gaan dat de langzaamste interactie in deze tests ook de langzaamste interactie in de velddata is.

Hoe verbeter je een slechte INP-meetwaarde?

Is de INP-meetwaarde van je website niet goed? Helaas is het niet heel eenvoudig om deze te verbeteren. Het verbeteren van de CLS of de LCP is bijvoorbeeld een stuk makkelijker. Waar bij die Core Web Vitals een probleem namelijk eenvoudig opgelost kan worden door het aanpassen van laadprioriteiten en een stukje css, zit een INP-probleem vaak dieper in de website verstopt.

Vaak wordt een slechte INP-score veroorzaakt door javascript. Een browser kan pas een resultaat tonen als het volledige javascriptbestand uitgevoerd is. Voor een goede INP-score wil je dus dat de javascriptbestanden op je website zo efficiënt mogelijk werken.

Om die efficiëntie te vergroten heb je onderstaande vijf mogelijkheden.

1. Verwijder niet-gebruikte javascript

Veel ontwikkelaars willen binnen zo min mogelijk tijd zo veel mogelijk bereiken. Dit doen ze vaak door hele javascript-libraries in te laden. Oftewel: een hele ‘bibliotheek’ aan javascript. En dat is precies waar de problemen ontstaan. Want waar het voor de ontwikkelaar lekker makkelijk en snel gedaan is als je voor enkele functies een hele bibliotheek inlaadt, is het voor de prestaties van je website minder positief.

Verwijder om deze reden niet-gebruikte javascript uit je javascriptbestanden. Óf, nog beter: houd hier direct rekening mee bij het bouwen van je website. Dit achteraf oplossen is namelijk best lastig.

2. Splits javascriptbestanden op

Soms ontkom je er niet aan om veel javascript te gebruiken voor je website. Het is namelijk zo dat je pas resultaat kunt krijgen als een javascriptbestand volledig is uitgevoerd. Wat de oplossing is als je het bestand niet kleiner kunt krijgen door javascript te verwijderen? Het javascriptbestand in kleinere stukken opdelen.

Stel, je hebt een bestand van 100kb, dan kun je deze beter opdelen in vijf losse bestanden van 20kb. Let er hierbij natuurlijk wel op dat je dit de juiste plekken in de code doet, zodat niet de ene helft van een functie in het eerste bestand staat en de andere helft in het tweede bestand. Let ook op functies die van elkaar afhankelijk zijn. Worden die van elkaar gescheiden, dan zorgt dat voor problemen. Aan te raden is dan ook om deze wijzigingen door een kundige ontwikkelaar te laten doorvoeren.

Het opsplitsen van javascriptbestanden heeft als voordeel dat je meerdere delen tegelijkertijd kunt downloaden. Dit is niet mogelijk als het één groot bestand is.

3. Optimaliseer het laadproces van javascript met isInputPending()

Kies je ervoor een groot javascriptbestand op te splitsen? Dan kun je je INP-code nog eens extra verbeteren door het laadproces van javascript te optimaliseren met isInputPending().

Bij een opgesplitst javascriptbestand controleert de browser telkens tussen het uitvoeren van de verschillende bestanden of er input van de gebruiker is waar iets mee moet worden gedaan. Waar dit enerzijds voordelig is – bij één groot javascriptbestand zijn de interacties namelijk geblokkeerd totdat deze volledig uitgevoerd zijn door de browser – neemt dit ook een nadeel met zich mee.

Doordat de browser tussen het uitvoeren van de verschillende bestanden telkens een kort moment wacht om te kijken of er interacties zijn van de websitegebruiker, neemt de volledige laadtijd van het javascript toe.

De ontwikkeling van een oplossing: isInputPending()

Dit was één van frustraties van de ontwikkelaars van Facebook, dat zelf uiteraard bol staat van de javascript. Om deze reden stapten deze ontwikkelaars naar de ontwikkelaars van Google Chrome om hier een oplossing voor te ontwikkelen: isInputPending().

Deze Chrome API houdt in de gaten wat voor interacties de websitebezoeker uitvoert. Standaard gaat het hierbij niet om bijvoorbeeld het verplaatsen van de muis, maar bijvoorbeeld het klikken op een button of een veld in een formulier. Wanneer dit gebeurt, krijgt het uitvoeren van de reactie op deze interactie prioriteit en wordt het laadproces van de overige javascript kortstondig stilgezet. Pas wanneer de reactie volledig is uitgevoerd – en de websitebezoeker het idee heeft dat de website goed werkt – wordt het inladen van de overige javascripts weer opgepakt.

isInputPending(): het resultaat is precies zoals je deze wilt hebben

Doordat isInputPending() de interacties in de gaten houdt, hoeft de browser tussen het downloaden van javascriptbestanden geen tijd meer te reserveren om te controleren of er interacties in de wachtrij staan. Het resultaat is dus dat het uitvoeren van de opgesplitste javascriptbestanden even snel wordt uitgevoerd als dat er één groot javascriptbestand wordt uitgevoerd, tenzij er tussendoor een reactie op een interactie moet worden uitgevoerd.

Het resultaat is precies zoals je deze wilt hebben: tijdens het laadproces laadt alles zo snel als mogelijk, maar de website is wel zo snel mogelijk responsive. Je hebt dus letterlijk het beste van beide werelden.

Eén nadeel van deze oplossing

Er is één nadeel van isInputPending(): het is alleen beschikbaar in op Chromium gebaseerde browsers, waarbij Google Chrome, Microsoft Edge en Opera de populairste browsers zijn. Andere populaire browsers als Safari en Firefox hebben nog geen intenties getoond om isInputPending() te integreren.

De optie isInputPending() is vooral geschikt voor websites die serieus veel javascript nodig hebben om te functioneren.

4. Breng prioriteiten aan binnen je javascript

Niet elk javascriptbestand binnen de website is even belangrijk voor de weergave of interacties van de website. Vraag je daarom altijd af: wat is nú echt het belangrijkst? Is dat bijvoorbeeld de javascript van Facebook om een tijdlijn te tonen, de javascript van een chatwidget of de javascript die bepaalt dat je bij een kledingstuk een kleur kunt kiezen? Uiteraard is het laatste het belangrijkst.

Om je INP-waarde nog eens extra te optimaliseren, kun je prioriteiten aanbrengen binnen je javascriptbestanden. Dit kan door onderscheid te maken in de locatie van deze bestanden in de broncode van je pagina (belangrijke scripts in de head, niet belangrijke scripts in de footer). Maar ook via fetchpriorities en defer attributen kun je onderscheid maken.

Voor bijvoorbeeld chatwidgets (welke vaak enorme hoeveelheden javascript meenemen), is het prima om deze zelfs uitgesteld in te laden. Bijvoorbeeld vijf tot tien seconden na het afronden van het laadproces. Zo worden deze processen uitgevoerd op het moment dat de websitegebruiker er geen last van heeft.

5. Houd alles zo simpel mogelijk

De laatste manier om de INP-meetwaarde te verbeteren is er één die voor vrijwel alles op gebied van de performance van je website geldt: houd alles zo simpel mogelijk. Maak je Document Object Model (DOM) niet onnodig zwaar, maak je css niet te complex en zorg ervoor dat de SQL-queries niet onnodig zwaar worden.

De beste website is een website die efficiënt met zijn bronnen omspringt en dus zo min mogelijk onnodige data inlaadt. Ook wil je zo min mogelijk afhankelijk zijn van externe bronnen, helemaal wanneer die bronnen van belang zijn voor van het deel boven de vouw en uiteraard de reacties op interacties.

In een tijd waarin veel sitebuilders komen met eenvoudig te realiseren standaard thema’s, ligt hier het gevaar wanneer het neerkomt op de prestaties van de website. Deze thema’s moeten altijd veel kunnen, maar vaak worden al deze opties wel ingeladen, ook al worden deze niet gebruikt. Daarom is het altijd beter om iets meer geld uit te geven voor een website die niet met standaardthema’s worden gebouwd, maar waarbij de ontwikkelaar alleen opties inlaadt die echt noodzakelijk zijn.

De verschuiving van FID naar IND: pas jouw website tijdig aan

Al met al kan de verschuiving van FID naar IND best wat verandering teweegbrengen. Het is daarom goed om jouw website tijdig aan te passen en gereed te maken zodat je zo min mogelijk negatieve gevolgen ervaart van deze verandering. Wij zijn ervan overtuigd dat je met bovenstaande informatie zelf grote stappen kan zetten. Lees alles nog een keer rustig door en neem contact met ons op voor vragen.

Met onze tips laat jij jouw collega’s versteld staan
Marketingtips, inzichten en best practices, zo in je mailbox!

Beter vindbaar zijn én betere leads met jouw online marketing
Inzichten uit SEO, SEA, Social Ads en CRO
Vind je het niets? Uitschrijven is ook zo gedaan
Interaction to Next Paint: Wat is het en hoe kun je dit verbeteren? Interaction to Next Paint: Wat is het en hoe kun je dit verbeteren? 2024-02-01
DoubleSmart
DoubleSmart