De Pagespeed-structuur van Google, waar we al jaren aan gewend zijn, is erop gericht ervoor te zorgen dat websites snel worden geladen en weergegeven. Door meetbare parameters te produceren en gebruik te maken van de anonieme gegevens die zijn verzameld over het marktaandeel van Chrome, gebruikt Google deze statistieken als SEO-indicatoren. Met de introductie van Interaction to Next Paint (INP) in 2022 is de focus verschoven van louter de laadsnelheid van pagina's naar een breder perspectief op webprestaties. INP meet niet alleen hoe snel een pagina laadt, maar ook hoe snel gebruikersinteracties op de pagina worden verwerkt. In wezen verandert het de sitenavigatie-ervaring in een Pagespeed-statistiek.
Op de blog van Kerem, wordt de term 'General Interaction Delay' voorgesteld als een goede aanvulling op dit concept, dat Google ook goed uitlegt in zijn eigen video. Om deze statistiek volledig te begrijpen, gaan we in de volgende secties dieper op het onderwerp in.
Wat is de verklaring van de INP-duur?
De duur van INP omvat:
- De tijd tussen de interactie van de gebruiker met de pagina en de uitvoering van de gebeurtenishandler.
- De uitvoeringstijd van het script.
- De tijd vanaf de uitvoering van de code tot de weergave van de uitvoer aan de gebruiker.
Deze processen vinden doorgaans binnen milliseconden plaats, maar op mobiele apparaten, vooral oudere Android-telefoons met een laag CPU-vermogen, kunnen dergelijke vertragingen (latentie) vaak merkbaar zijn. Het is vermeldenswaard dat INP-gegevens, net als andere Lighthouse-gegevens, anoniem worden verzameld en geëvalueerd op basis van de 75e percentiel. Het doel is daarom om applicaties te maken die goed presteren op gemiddelde apparaten, in plaats van alleen op geavanceerde apparaten.
Voorbeelden uit de praktijk van INP-duur
Hier zijn enkele praktijkvoorbeelden van de internetpagina's die we dagelijks bezoeken om dit concept uit te leggen:
Adres invoeren op een e-commercesite
Wanneer u winkelt op een e-commercesite en het verzendadres invoert, selecteert u eerst de provincie. Wanneer u vervolgens op het selectievak klikt om het district te kiezen, wacht u een tijdje totdat het Ajax-resultaat is geladen, en na een bepaalde tijd wordt de districtsinformatie geladen. Dit is een goed voorbeeld van INP. Het verbeteren van de gebruikerservaring in dit voorbeeld zou het toevoegen van een "laadindicator" kunnen inhouden om de gebruiker te informeren over het Ajax-proces.
Selectie sorteren
Als u filters op productvermeldingspagina's gebruikt en de gefilterde producten niet goed worden beheerd nadat u op een selectievakje hebt geklikt, verhoogt dit de INP. Door minder complexe JS te gebruiken en rekening te houden met de gebruikerservaring tijdens filterbewerkingen, kan de INP-waarde zo hoog mogelijk worden gehouden.
Productfotogalerijen
De tijd die gebruikers wachten tot de fotogalerij is geladen nadat ze op een productfoto op de productdetailpagina's hebben geklikt, kan van invloed zijn op INP.
Reserveringsknop
De interactievertraging tussen het klikken op de knop 'Een reservering maken' en de volgende pagina is een voorbeeld van INP.
Toevoegen aan winkelwagentje knop
De milliseconden vertraging bij het klikken op de knop "Toevoegen aan winkelwagen" en het zich afvragen of het item aan de winkelwagen is toegevoegd of niet, definieert INP perfect.
Zoals u in deze voorbeelden kunt zien, zijn INP-traps aanwezig in scenario's die zowel de SEO als de directe conversiepercentages beïnvloeden.
Hoe INP verbeteren?
- Gebruik up-to-date JS Frontend-bibliotheken: Het verbeteren van de prestaties door het gebruik van moderne JS-frontendbibliotheken zoals Vue, React en Angular is nuttig omdat ze voordelen bieden op het gebied van prestaties en herbruikbaarheid.
- Minimaliseer de complexiteit van JS-bibliotheken: Het is raadzaam om minder complexe JS-bibliotheken te gebruiken. Persoonlijk raad ik aan jQuery zoveel mogelijk te vermijden.
Aanvaardbare INP-metrische niveaus
De drempelwaarden voor goede, gemiddelde en slechte INP-niveaus zijn 200 milliseconden en 500 milliseconden. Het onder deze drempelwaarden houden van de INP is cruciaal voor het behouden van een goede gebruikerservaring en algemene webprestaties.
