by Luka Markovic |

• E-commerce
• News
• SEO

november 20, 2023

Google’s nieuwe metriek: hoe u uw Magento webshop kunt optimaliseren voor INP

In de huidige competitieve wereld van de e-commerce betekent voorblijven dat je je voortdurend moet aanpassen aan nieuwe statistieken en standaarden. Eén zo’n metriek die veel opzien baart is Interaction to Next Paint (INP). INP gaat de First Input Delay (FID) vervangen in Google’s Core Web Vitals en wordt een van de cruciale factoren voor de ranking van websites en de gebruikerservaring. Laten we eens dieper ingaan op INP, waarom het van vitaal belang is voor elke website, maar ook voor je Magento webshop, en hoe je het kunt optimaliseren om de prestaties van je website te verbeteren.

Wat is INP?

Interaction to Next Paint (INP) is een centraal onderdeel van Google’s Core Web Vitals en zal vanaf maart 2024 een ranking factor worden. Door visuele feedback te geven, meet het hoe snel een webpagina reageert op gebruikersinteracties, zoals klikken, tikken of toetsenbordinvoeringen. Deze feedback kan bijvoorbeeld bestaan uit het bijwerken van het winkelwagen pictogram, het veranderen van de kleur van een product of het weergeven van een keuzemenu. In tegenstelling tot andere statistieken zoals Largest Contentful Paint (LCP) en FID, richt INP zich op de interacties die plaatsvinden op de pagina na de eerste keer laden.

INP meet de exacte tijd die de pagina nodig heeft om visueel te reageren na interactie met de gebruiker, zoals wanneer een gebruiker bijvoorbeeld op een knop klikt of een optie selecteert.

 

Waarom is INP belangrijk voor de gebruikerservaring?

Volgens gebruiksgegevens van Chrome wordt maar liefst 90% van de tijd die een gebruiker op een webpagina doorbrengt, doorgebracht nadat deze is geladen. Deze statistiek benadrukt hoe belangrijk het is om er niet alleen voor te zorgen dat uw webpagina snel laadt, maar ook dat deze snel reageert op interacties van gebruikers.

Een lagere INP-score wijst op een responsievere website, waar gebruikers snel visuele feedback krijgen om aan te tonen dat hun interactie succesvol was. Denk hierbij bijvoorbeeld aan het pictogram van het winkelwagentje dat wordt bijgewerkt om aan te geven dat het product dat ze hebben geselecteerd aan het winkelwagentje is toegevoegd.

Omgekeerd kan een webpagina met een hoge INP-score ervoor zorgen dat de gebruiker zich afvraagt of zijn interactie, zoals klikken of tikken, enig effect heeft gehad. Een vertraging in het weergeven van de resultaten van hun actie kan de gebruiker dwingen om nogmaals op de knop te klikken, waardoor het item onbedoeld voor een tweede keer aan het winkelwagentje wordt toegevoegd. Trage INP’s kunnen zeer frustrerend zijn voor uw klanten. Ze kunnen de indruk krijgen dat uw site gerepareerd moet worden, wat leidt tot minder vertrouwen en dus minder verkoop.

 

Hoe wordt INP gemeten?

INP meet de latentietijd van de reactie van een pagina op gebruikersinteracties, zoals muisklikken, tikken op het aanraakscherm of drukken op toetsen op het toetsenbord. In deze context verwijst latentie naar de tijd die de pagina nodig heeft om visuele feedback weer te geven na de interactie van de gebruiker.

Stel bijvoorbeeld dat een gebruiker op een kleur-optie van uw productpagina klikt, waardoor het product van kleur verandert. De tijd die nodig is om deze verandering weer te geven, wordt gemeten als deel van de INP van de pagina.

Voor een goede INP-score moet de INP voor een pagina onder de 200 milliseconden blijven. Een INP-score boven 200 ms maar onder of op 500 ms geeft aan dat de reactiesnelheid van je pagina verbetering behoeft. Een INP van meer dan 500 ms is een teken van slechte reactiesnelheid.

Het INP-resultaat is een enkele waarde voor een pagina, die aangeeft dat alle of bijna alle interacties onder deze waarde vallen. Als er echter niet genoeg gegevens zijn voor een individuele pagina of URL op je site, worden de geaggregeerde INP-gegevens voor alle pagina’s van het oorspronkelijke domein weergegeven. Als een specifieke productpagina bijvoorbeeld geen INP heeft, wordt de INP voor je hele domein weergegeven.

Omdat INP wordt gemeten door echte Chrome-gebruikers die uw site bezoeken, is het een metriek die u een betrouwbare indicatie geeft van hoe responsief uw site is.

 

Hoe uw INP bekijken

Hoewel INP nog niet wordt gebruikt als ranking factor, wordt het nog steeds gerapporteerd. Hierdoor kun je eventuele INP-gerelateerde problemen aanpakken voordat het in maart 2024 een ranking factor wordt.

Er zijn verschillende manieren om de INP-beoordeling van uw site en de pagina’s te bekijken:

• Google PageSpeed Insights: Door de URL van een pagina in Google PageSpeed Insights in te voeren, kunt u inzicht krijgen in uw INP-rating en andere prestatiecijfers.
• Google Search Console: Als u uw site hebt toegevoegd aan Google Search Console, kunt u de INP-status van uw site controleren in het gedeelte Core Web Vitals.
• Web Vitals Chrome-extensie: Als u de Web Vitals Chrome-extensie installeert, kunt u uw INP meten door een pagina te bezoeken en interacties uit te voeren.

Het gebruik van de Chrome-extensie is voornamelijk handig als er meer gegevens zijn om resultaten te verkrijgen uit andere bronnen of als je interacties op je webshop persoonlijk wilt testen.

 

Wat veroorzaakt INP-problemen?

Het is cruciaal om te begrijpen wat de oorzaak kan zijn van problemen met uw INP voordat u gaat kijken hoe u deze kunt verbeteren. Verschillende factoren kunnen bijdragen aan slechte INP beoordelingen, waaronder:

• Hosting: Hosting met te weinig vermogen of van lage kwaliteit kan de prestaties aanzienlijk beïnvloeden.
• Thema’s en ontwerp: Alleen geoptimaliseerde thema’s of site ontwerpen kunnen de INP-waardering positief beïnvloeden.
• Extensies: Opgeblazen of verkeerd geconfigureerde extensies kunnen uw site vertragen en resulteren in slechte INP-scores.
• Overbelasting door JavaScript: Overmatig gebruik van JavaScript, vooral in onnodige gebieden, kan sterk bijdragen aan problemen met INP.
• Ongebruikte tags: Tags die niet langer nodig zijn, zoals die van diensten van derden, kunnen uw INP negatief beïnvloeden.

 

Hoe kunt u uw INP verbeteren

Let op, hiervoor moet u misschien contact opnemen met uw ontwikkelingsbureau en als u hulp nodig heeft van een vertrouwde partner, kunt u hier contact met ons opnemen. Nu we mogelijke eerdere problemen hebben geïdentificeerd die een slechte INP-score kunnen veroorzaken, gaan we onderzoeken hoe je de INP-score van je webwinkel kunt verbeteren:

• Invoervertraging beperken: Vermijd terugkerende timers, zoals setTimeout en setInterval, die gebruikersinteracties kunnen verstoren, om invoervertraging te beperken.
• Vermijd lange taken: Lange taken kunnen de hoofdthread blokkeren, waardoor de browser interactie events niet kan uitvoeren. Om de reactiesnelheid te verbeteren, kunt u lange opdrachten opdelen in kleinere, beheersbare stukken.
• Overlapping van interacties aanpakken: Overlapping van interacties kan optreden wanneer een gebruiker meerdere interacties uitvoert voordat de eerste interactie het volgende frame kan renderen. Debounce inputs en gebruik mechanismen zoals AbortController om fetch requests te annuleren om vervolgens overbelasting van de hoofdthread te voorkomen.
• Optimaliseer event-callbacks: Evalueer de noodzaak van event-callbacks en stel hun uitvoering uit als ze niet essentieel zijn. Het verwijderen van onnodige callback-functies kan uw INP ook verbeteren.
• Niet-renderend werk uitstellen: Stel taken uit die niet gerelateerd zijn aan veranderingen aan de gebruikersinterface om vertragingen bij het renderen van het volgende frame te voorkomen.

Presentatie Vertraging minimaliseren

Om presentatie vertraging tot een minimum te beperken en je INP-score te optimaliseren, kun je de volgende werkwijzen overwegen:

• DOM verkleinen: Een grote DOM kan leiden tot slechte INP-scores. Probeer de DOM-diepte te verkleinen en onder de 1400 knooppunten te houden. Dit kan worden bereikt door slecht gecodeerde plugins en thema’s te vermijden, op JavaScript gebaseerde DOM-knooppunten te minimaliseren en meer.
• Vermijd overmatig werk in requestAnimationFrame callbacks: RequestAnimationFrame callbacks kunnen de rendering van het volgende frame beïnvloeden. Beperk het werk in deze callbacks om de INP te verbeteren.
• Off-screen animaties uitstellen: Off-screen animaties bij de initiële load hoeven niet onmiddellijk uitgevoerd te worden. Stel ze uit tot ze in beeld komen, waardoor INP-vertragingen worden beperkt.
• Optimaliseer het laden van afbeeldingen: Afbeeldingen die in eerste instantie niet zichtbaar zijn, moeten lui worden geladen om vertragingen bij het renderen van het volgende frame te voorkomen.
• Gebruik efficiënte CSS: Complexe en inefficiënte CSS kan het renderproces beïnvloeden. Optimaliseer je CSS om render vertragingen te verminderen.

 

Conclusie

Het optimaliseren van je Magento webshop voor Interaction to Next Paint (INP) is essentieel om concurrerend te blijven in de e-commerce omgeving. Nu Google INP vanaf maart 2024 tot een belangrijke ranking factor gaat maken, moeten Europese webwinkeliers deze metriek verbeteren om de prestaties, gebruikerservaring en conversieratio’s van hun webshop te verbeteren.

INP zorgt ervoor dat gebruikers snelle visuele feedback krijgen en door uw INP-score te optimaliseren, kunt u een responsievere, efficiëntere en prettigere winkelervaring creëren voor uw klanten, zodat zij nu kopen en later terugkeren voor een nieuwe aankoop. Dat is toch het uiteindelijke doel?