Een goede INP-score voorkomt een hoop frustraties

INP staat voor Interaction to Next Paint en is een van de metrics van de Core Web Vitals. Deze metric meet hoe snel je website reageert op gebruikersacties. Klikt een gebruiker ergens op? Dan wil je direct visuele feedback. Dat hoeft niet het eindresultaat te zijn, als er maar iets gebeurt. Denk aan een laadicoontje, skeleton of een verandering van kleur.

Als gebruikers ergens op klikken en er lijkt niks te gebeuren, kan dat snel voor twijfel en frustratie zorgen. Ze klikken dan vaak meerdere keren, in de hoop dat het wél werkt. En voor je het weet, liggen vijf dezelfde producten in het winkelmandje, wat alleen maar voor meer ergernis zorgt.

Bovendien kunnen gebruikers afhaken en de site verlaten als het (te) langzaam werkt. En dat zorgt voor minder conversie. Hoe sneller je website reageert op interacties, hoe beter de algehele ervaring is, en hoe groter de kans dat je bezoeker een klant wordt.

Google begrijpt dit ook. INP is opgenomen in hun Core Web Vitals en wordt meegenomen in je PageSpeed Insights-score. Deze score heeft niet alleen invloed op de gebruikerservaring, maar ook op je vindbaarheid in Google. Met andere woorden: een slechte INP-score kan direct invloed hebben op ranking de zoekmachine. 

De INP-score wordt per pagina berekend. Het kan dus zijn dat de INP-score voor je homepagina beter is dan voor een landingspagina of productpagina, afhankelijk van de complexiteit van de interacties op die pagina’s.

De score wordt berekend op basis van echte gebruikersdata, de zogenaamde CrUX-data. Een gebruiker met een minder snelle telefoon heeft ook invloed op de score. De INP-score kan op je gloednieuwe, snelle laptop perfect zijn, maar voor Jolanda, die nog een 5 jaar oude Samsung heeft, kan het heel anders zijn. Het is daarom belangrijk om je website te testen in een gesimuleerde omgeving waarbij je je eigen apparaat trager maakt.

Zelfs als één element op je website langzaam reageert, kan dit de INP-score van de hele site beïnvloeden. Denk bijvoorbeeld aan een grote navigatiebalk of een hamburgermenu dat trager opent. Deze elementen komen vaak op alle pagina’s terug.

Bij weflycheap, ons interne label, zagen we dat het openen van de navigatie traag was. Het is een grote navigatie, met veel elementen en een grote DOM die je moet renderen. Dat is zwaar voor de browser. Een gemiddelde laptop kan dat prima aan, maar Jolanda’s oude Samsung heeft het er moeilijk mee. Door dat te simuleren, kwamen we er uiteindelijk achter dat weflycheap best een zwaar menu had. Dat zorgde ervoor dat élke pagina een slechtere INP-score kreeg dan het verdiende.

Door tijdens de JavaScript-berekeningen een laadstatus te tonen, zien gebruikers nu dat het menu aan het laden is. Daardoor hebben we de INP-score flink verhoogd. 

1. Optimaliseer JavaScript

Zware scripts kunnen de tijd verlengen voordat de browser de nodige visuele feedback kan geven. Zorg ervoor dat de scripts die echt nodig zijn voor de actie snel uitgevoerd worden, en dat alles wat niet nodig is, niet in de weg zit. Dit maakt alles sneller en zorgt ervoor dat de gebruiker meteen ziet dat er iets gebeurt.

2. Voeg een loading state toe

Als je iets aan het laden bent of data ophaalt, zorg er dan voor dat de gebruiker weet dat dit gebeurt. Geef dit bijvoorbeeld weer met een laadicoon, skeleton of een animatie.

3. Verklein de DOM

Een te grote DOM (een lange lijst van HTML-elementen) kan de browser vertragen bij het renderen van de pagina. Zorg ervoor dat je je HTML-code optimaliseert en geen onnodige elementen laadt.

4. Test op verschillende apparaten

Zorg ervoor dat je je website test op zowel nieuwe, snellere apparaten als op oudere smartphones en trage netwerken. Met tools zoals Chrome DevTools of Lighthouse kun je de prestaties op trage verbindingen en apparaten simuleren.

5. Test je belangrijkste pagina’s regelmatig

Optimaliseer en meet de INP op je belangrijkste pagina’s zoals de homepagina, productpagina’s en checkout-pagina’s. De interacties op deze pagina’s hebben vaak de meeste invloed op de gebruikerservaring.