Interaction to Next Paint: Wat is het en hoe kun je dit 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.

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.

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.

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.

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.

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.