Interaction to Next Paint – Bereid je website voor!

Onder het mom van ‘laadt het niet, dan rankt het niet’ spoort Google website-eigenaren aan om alleen gebruiksvriendelijke websites te publiceren. In 2021 kwam het daarom met de Core Web Vitals. Dit zijn drie metrics die een beeld geven van de gebruiksvriendelijkheid van websites. Deze drie metrics hebben dus invloed op de ranking van individuele pagina’s. Vanaf maart 2024 komt Google met een nieuwe metric, Interaction to Next Paint (INP). INP vervangt dan First Input Delay (FID). Sinds mei heeft INP de status pending en is het uit de experimentele fase en klaar om FID te vervangen. 

Waarom is het van belang dat website-eigenaren zich vast voorbereiden? En wat is INP precies en waarom wordt FID vervangen? Wat kun je nu al doen voor een goede score en voor wie is INP extra belangrijk? Lees snel verder!

Waarom zijn de Core Web Vitals belangrijk?

Core Web Vitals zijn de basisfactoren die Google gebruikt om de gebruiksvriendelijkheid van een website te beoordelen. Ze zijn belangrijk omdat ze direct invloed kunnen hebben op hoe hoog je website in de zoekresultaten komt. Op deze manier stimuleert Google website eigenaren om gebruiksvriendelijke websites te publiceren. Natuurlijk zijn er nog tal van andere factoren (bekend bij de redactie) die ook meespelen in de ranking. De Core Web Vitals liggen echter als website eigenaar binnen je directe invloedssfeer, dus zorg dat je ze goed voor elkaar hebt. 

Bij een SEO strategie van Onder zijn de Core Web Vitals een belangrijk onderdeel. We geven concreet aan hoe je de website kunt verbeteren. Voor de doe-het-zelver schreven we eerder al een blog over de andere Core Web Vitals. 

Waarom wordt First Input Delay vervangen?

First Input Delay (FID) was een prima metric als onderdeel van de Core Web Vitals, maar het had zijn beperkingen. Het keek alleen naar de eerste interactie en stopte met meten zodra de browser begon te reageren. INP gaat een stap verder door naar alle interacties op een pagina te kijken en te meten tot het moment waarop de browser het resultaat laat zien. Kortom, INP geeft een veel completer beeld van de gebruikerservaring.

Wat is Interaction to Next Paint?

INP staat dus voor Interaction to Next Paint. Dit is een nieuwe manier om te meten hoe snel een website reageert op een interactie. Interacties die hieronder vallen zijn:

• Een muisklik op een knop / link
• Een ‘tik’ op een touchscreen of pad
• Een fysieke druk op een knop op een toetsenbord 

Stel je voor dat je een online webshop bezoekt om een nieuwe laptop te kopen. Je ziet een model dat je leuk vindt en besluit om op de “winkelwagen” knop te klikken. Vanaf het moment dat je op die knop klikt, begint de INP-meting. De meting kijkt naar hoe lang het duurt voordat de browser reageert en het volgende beeld laat zien, zoals een pop-up die bevestigt dat het product aan je winkelwagen is toegevoegd. Zo zullen er meer interacties zijn op dezelfde pagina. De interactie die het langst duurt op de pagina is bepalend voor je INP-score.

Wat zijn goede INP Scores?

Google houdt dit schema aan. 

• Een INP van 200 milliseconden of minder betekent dat je website goed en snel reageert.
• Een INP tussen 200 en 500 milliseconden betekent dat je website beter kan reageren. Er is dus ruimte voor verbetering.
• Een INP van meer dan 500 milliseconden betekent dat je website niet goed en snel reageert.

De interactie die het langst duurt op de pagina bepaalt dus de INP waarde. Het kan dus voorkomen dat je een hele snelle website hebt met één vertragende interactie waardoor je INP score toch slecht uitpakt. Aan jou de taak om deze op te sporen.

Hoe krijg je een goede INP score?

7 goede gewoontes om een goede INP-score te krijgen en te behouden

1. Minimaliseer activiteiten in de main thread: De main thread is het onderdeel van de browser dat verantwoordelijk is voor het uitvoeren van JavaScript, het verwerken van styles en het weergeven van de pagina. Door het werk op de main thread te minimaliseren, kan de browser sneller reageren op gebruikersinteracties. Ga dus niet all the way met je lettertypes, knipperende icoontjes en fade-outs. 
2. Optimaliseer JavaScript: Verwijder onnodige JavaScript of stel het uit tot na de eerste weergave van pagina. Gebruik “code splitting” om alleen de noodzakelijke JavaScript voor een bepaalde pagina of functie te laden. Overweeg ook om JavaScript buiten de main thread uit te voeren. 
3. Gebruik efficiënte CSS-selectors: Dit zijn ‘regels’ in CSS waarmee je specifieke delen van je website kunt kiezen en stijlen. Door deze regels slim en efficiënt te schrijven, zorg je ervoor dat je website sneller laadt en reageert. 
4. Vermijd het veroorzaken van layout verschuivingen (CLS) tijdens gebruikersinteracties. Dit doe je door afmetingen te specificeren in de html attributen van de afbeelding. Reserveer ook ruimte voor advertenties als je die hebt.  
5. Gebruik de “contain CSS-eigenschap” om de hoeveelheid werk die nodig is voor stijl- en layout berekeningen te beperken. Als je deze eigenschap gebruikt dan vertel je de browser om alle veranderingen binnen een specifiek gebied van de pagina te houden. Het heeft dan geen invloed op andere delen van de pagina. Zo hoeft het niet steeds opnieuw te berekenen hoe de hele pagina eruit moet zien als er iets verandert binnen het afgebakende gebied.
6. Gebruik browsercaching: Door bronnen zoals JavaScript en CSS in de cache op te slaan, kan de browser deze sneller laden bij volgende bezoeken, wat de INP kan verbeteren.
7. Houd je INP regelmatig in de gaten: Gebruik hulpmiddelen zoals het Chrome User Experience Report (CrUX) om INP-gegevens van echte gebruikers te verzamelen en te analyseren. Dit helpt je te begrijpen hoe je site presteert in het echt en waar verbeteringen nodig zijn. Omdat INP dus kijkt naar alle interacties op je pagina kun je het beste ook regelmatig testen. Gebruik ook hulpmiddelen zoals Lighthouse om de INP-prestaties van je site te beoordelen en specifieke aanbevelingen voor verbetering te krijgen.

Voor welke websites is INP extra belangrijk?

Uiteraard is een goede gebruikerservaring voor elke website van belang. Maar INP is vooral belangrijk voor websites die veel interactie hebben met de gebruiker. Denk bijvoorbeeld aan webshops, online games, websites met teksteditors, en social media platforms. Op deze sites klik je veelvuldig op knoppen, vul je formulieren in, of doe je andere acties waar Javascript een rol speelt. Als de website dan traag reageert, kan dat erg vaak erg vervelend zijn voor de gebruiker. Voor dit soort websites is een goede INP-score dus extra belangrijk om de gebruiker een fijne en snelle ervaring te bieden. Maar eigenlijk is INP belangrijk voor alle websites die goed willen scoren in Google, omdat het een van de factoren is die Google gebruikt om te bepalen hoe gebruiksvriendelijk een website is.

Conclusie

INP is er eigenlijk al en wordt dus erg belangrijk. Het optimaliseren is een continu proces en het is daarom verstandig om er nu al mee te beginnen. Het komt de gebruiksvriendelijkheid van je website sowieso ten goede. Het is echter geen toverdrankje om je slecht geoptimaliseerde website uit het slob te trekken. Daarvoor zijn er te veel andere factoren die eveneens belangrijk zijn.

Heb je hulp nodig bij het optimaliseren van je INP of andere SEO-zaken? Dit is precies wat wij graag doen. Neem contact met ons op om te kijken hoe wij meer uit jouw website kunnen halen!