Interaction to Next Paint (INP) is een nieuwe kernmetriek voor webvitals (CWV's) die zich richt op het meten van de responsiviteit van een webpagina vanaf het moment dat een gebruiker ermee interacteert tot het punt waarop de visuele respons wordt weergegeven.
Deze metriek is essentieel voor het begrijpen en verbeteren van de gebruikerservaring (UX) van een website, omdat het direct verband houdt met hoe snel een pagina kan reageren op gebruikersinvoer.
Google introduceerde INP als vervanging voor First Input Delay (FID) in de CWV's als onderdeel van zijn voortdurende inspanningen om de webprestaties en UX te verbeteren. De aankondiging benadrukt het belang van INP bij het meten van de responsiviteit van webapplicaties en -sites, en markeert een stap in de richting van een meer gebruikersgerichte website.
In dit artikel gaan we dieper in op de complexiteit van INP, de betekenis ervan en de methoden om het te optimaliseren voor een soepelere webervaring. Of je nu een webontwikkelaar, website-eigenaar bent of gewoon geïnteresseerd bent in webprestaties, de kennis en tools die je hier vindt, zouden je moeten helpen de INP-metriek effectief te gebruiken.
Wat is Interactie met Volgende Verf?
Interaction to Next Paint (INP) is de nieuwste toevoeging aan Google's belangrijkste webvitalstatistieken en meet de responsiviteit van een website of webapplicatie op gebruikersinteracties.
Het kwantificeert specifiek de tijd die verstrijkt tussen een door de gebruiker geïnitieerde actie (zoals klikken, tikken of een toetsaanslag) en het moment waarop de pagina visueel wordt bijgewerkt als reactie op die actie. Deze statistiek is cruciaal om te evalueren hoe snel en effectief een website kan reageren op gebruikersinvoer.
Een belangrijk aspect van INP is dat het de responsiviteit meet gedurende de gehele levenscyclus van een gebruikersbezoek aan een pagina, niet alleen tijdens de eerste interactie. Dit maakt het een uitgebreidere metriek dan zijn voorganger, Eerste invoervertraging (FID) , die alleen rekening houdt met de vertraging bij het verwerken van de eerste invoer.
INP is vooral relevant voor pagina's waarmee gedurende een langere periode interactie is, zoals applicaties op één pagina. Het biedt hierbij een nauwkeuriger beeld van de algehele gebruikerservaring (UX).
Hoe wordt de interactie met de volgende verflaag (INP) gemeten?
Om te begrijpen hoe Interaction to Next Paint (INP) wordt gemeten, moet het proces worden opgesplitst in de kerncomponenten. INP gaat niet alleen over de eerste reactie op een interactie, maar omvat de volledige reeks, van de actie van de gebruiker tot de visuele update op de pagina.
Stappen bij het meten van INP
- Gebruikersinteractie vastleggen: de meting begint op het moment dat een gebruiker interactie heeft met de pagina. Deze interactie kan een klik, een tik op een touchscreen of een toetsaanslag op het toetsenbord zijn. INP richt zich op dit soort interacties, omdat het directe en bewuste acties zijn die een reactie van de pagina vereisen.
- Invoervertraging : De volgende fase in de meting is de invoervertraging. Dit is de tijd die nodig is voordat de pagina de interactie begint te verwerken. Tijdens deze fase kan de browser bezig zijn met andere taken, wat de verwerking van de invoer van de gebruiker kan vertragen.
- Verwerkingstijd : Zodra de invoer is verwerkt, is de volgende fase de verwerkingstijd. Dit omvat het uitvoeren van de event handlers die aan de interactie zijn gekoppeld. Deze event handlers zijn doorgaans JavaScript-functies die worden uitgevoerd als reactie op de actie van de gebruiker. De verwerkingstijd kan variëren afhankelijk van de complexiteit van de taken die deze handlers uitvoeren.
- Presentatievertraging: De volgende fase is de presentatievertraging na het verwerken van de invoer. Dit is de tijd die de pagina nodig heeft om de visuele respons op de interactie weer te geven. Dit omvat taken zoals het opnieuw berekenen van de lay-out van de pagina, het uitvoeren van CSS-wijzigingen en het opnieuw tekenen van de pagina-inhoud om de interactie weer te geven.
- Visuele update: De laatste stap is de visuele update op de pagina, het hoogtepunt van het interactieproces. Dit is wanneer de gebruiker het resultaat van zijn actie ziet, zoals het openen van een menu, een indicatie dat een formulier is verzonden of een andere visuele verandering op de pagina.
- Berekening van INP: De totale INP wordt berekend door de invoervertraging, verwerkingstijd en presentatievertraging bij elkaar op te tellen. Dit geeft een compleet beeld van de tijd tussen de eerste interactie van de gebruiker en de volgende tekenbewerking, wat de visuele update op de pagina weerspiegelt.
Wat is een goede INP-score?
Om een bevredigende gebruikerservaring (UX) te garanderen, moeten websites streven naar een INP van 200 milliseconden of minder. Deze benchmark wordt door de meeste gebruikers als een goede drempel beschouwd en geeft aan dat de website responsief is en interacties snel worden verwerkt.
Bij het evalueren van INP-scores is het belangrijk om rekening te houden met de variabiliteit van gebruikerservaringen op verschillende apparaten en onder verschillende omstandigheden. Een praktische aanpak is daarom om het 75e percentiel van paginaweergaven te meten, rekening houdend met zowel mobiele als desktopapparaten. Deze methode helpt om een completer beeld te krijgen van de gebruikerservaring en zorgt ervoor dat de meeste gebruikers een responsieve ervaring ervaren.
Een hoge INP-score kan de gebruikerservaring aanzienlijk beïnvloeden, vooral op websites met veel interactieve elementen, zoals teksteditors of games. In deze gevallen wijst een hoge INP-score op een risico op een slechte gebruikerservaring vanwege vertraagde reacties op gebruikersinteracties. Een lage INP-score daarentegen suggereert dat de website consistent responsief is, wat bijdraagt aan een soepelere en prettigere gebruikerservaring.
Verschil tussen First Input Delay (FID) en Interaction to Next Paint (INP)
Het begrijpen van het verschil tussen First Input Delay (FID) en Interaction to Next Paint (INP) is cruciaal voor webontwikkelaars en website-eigenaren die de gebruikerservaring (UX) willen optimaliseren. Hoewel beide meetmethoden zijn ontworpen om interactiviteit en responsiviteit te meten, richten ze zich op verschillende aspecten van gebruikersinteracties.
Eerste invoervertraging (FID)
First Input Delay meet de tijd vanaf het moment dat een gebruiker voor het eerst interactie heeft met een pagina (bijvoorbeeld door op een koppeling te klikken of op een knop te tikken) tot het moment waarop de browser daadwerkelijk gebeurtenis-handlers kan gaan verwerken als reactie op die interactie.
FID helpt de UX te begrijpen tijdens de laadfase van een pagina. Het draait allemaal om de eerste indruk: hoe snel een pagina een interactie kan verwerken nadat een gebruiker er voor het eerst mee probeert te interacteren.
Denk bijvoorbeeld aan een gebruiker die op een dropdownmenu klikt zodra de pagina laadt. FID meet de tijd vanaf het moment dat de gebruiker klikt tot het moment dat het dropdownmenu verschijnt. Als de browser bezig is met het laden van de pagina, kan er een merkbare vertraging optreden, wat leidt tot een slechte gebruikerservaring.
Interactie met Next Paint (INP)
Interaction to Next Paint (INP) daarentegen is een uitgebreidere metriek. Deze meet de latentie van alle gebruikersinteracties gedurende een paginabezoek, niet alleen de eerste. INP registreert de volledige duur vanaf het moment dat de gebruiker met de pagina interageert tot het moment dat de visuele respons van die interactie op het scherm wordt weergegeven. Dit omvat de tijd die nodig is voor invoervertraging, de verwerking van de interactie en de presentatievertraging.
Ter illustratie: stel je voor dat een gebruiker interactie heeft met verschillende elementen op een webpagina, zoals typen in een zoekveld, items selecteren in een menu en op links klikken. INP meet de responsiviteit van elk van deze interacties en biedt zo een breder beeld van de algehele interactiviteit van de pagina gedurende het bezoek van de gebruiker.
Hoe meet je de interactie met de volgende verflaag (INP)?
INP kan alleen worden gemeten met veldtools, omdat hiervoor echte gebruikersinteractiegegevens nodig zijn. Deze tools omvatten:
- PageSpeed Insights : biedt een gebruiksvriendelijke interface om INP-scores te bekijken. PageSpeed Insights toont de 75e percentielscore van de afgelopen 28 dagen.
- Google BigQuery (CrUX Dashboard) : biedt een meer historische context voor INP-scores. Google meet alle interacties van echte Chrome-gebruikers met een pagina en slaat deze op in de CrUX-dataset.
- Lighthouse Tool : Handig voor het realtime debuggen van INP tijdens de ontwikkeling.
Hoewel de CrUX-dataset de uiteindelijke bron is voor INP-statistieken, is deze sterk geanonimiseerd en biedt deze geen realtime monitoring of gedetailleerde filtering. Webperformanceconsultants vertrouwen doorgaans op real-user monitoring (RUM) voor meer gedetailleerde inzichten.
Hoe optimaliseer je de interactie met de volgende verflaag?
Het optimaliseren van Interaction to Next Paint (INP) is essentieel voor het verbeteren van de responsiviteit en gebruikerservaring (UX) van een website. Hier zijn gedetailleerde tips voor het optimaliseren van INP:
1. Minimaliseer de CPU-verwerking op uw pagina
- Asynchrone code-uitvoering : voer meer van uw code asynchroon uit om ervoor te zorgen dat de gebruiker direct een update van de gebruikersinterface krijgt, zelfs als er nog achtergrondverwerking plaatsvindt.
- Profielwebsitecode : gebruik hulpmiddelen zoals de DevTools-prestatieprofiler om inzicht te krijgen in wat er op de hoofdthread gebeurt en om gebieden te identificeren die geoptimaliseerd moeten worden.
- Controleer scripts van derden: beoordeel of scripts van derden van invloed zijn op de responsiviteit van uw site en configureer ze of stel ze indien nodig uit.
2. Verminder de invoervertraging
- Taken van de hoofdthread opsplitsen: verminder en verdeel de CPU-achtergrondactiviteit op de hoofdthread om de invoervertraging te minimaliseren.
- Metriek voor totale blokkeringstijd (TBT): Gebruik deze metriek in laboratoriumgegevens om achtergrondactiviteiten te identificeren die gebruikersinteracties kunnen blokkeren.
- Optimaliseer code van derden: Als scripts van derden vertragingen veroorzaken, kunt u opties onderzoeken om de impact hiervan te verminderen of ze alleen te laden wanneer dat nodig is.
3. Optimaliseer de verwerkingstijd
- Efficiënte code-uitvoering: onderzoek waar de browser de meeste tijd doorbrengt en optimaliseer die onderdelen van uw applicatie.
- Vermijd onnodige renders: zorg ervoor dat componenten in frameworks zoals React niet onnodig worden gerenderd.
- Vermindering van lay-outwerk: Als lay-outwerk een groot deel van de CPU-activiteit met zich meebrengt, zoek dan manieren om lay-outs en herschilderingen te verminderen.
4. Werk de gebruikersinterface bij vóór intensieve verwerking
- Directe feedback: Geef visuele feedback (bijvoorbeeld een spinner) voordat u CPU-intensieve taken start.
- Gebruik webworkers: voor intensieve JavaScript-verwerking kunt u overwegen om webworkers in te zetten om taken buiten de hoofdthread uit te voeren.
5. Vermijd het blokkeren van dialogen
- Niet-blokkerende UI-elementen : vervang de oorspronkelijke waarschuwings-, bevestigings- en promptdialoogvensters, die de hoofdthread blokkeren, door niet-blokkerende UI-elementen.
6. Verminder presentatievertraging
- Vereenvoudig pagina-updates : als het weergeven van de pagina-inhoud langzaam verloopt, concentreer u dan op het eerst weergeven van de belangrijkste inhoud, zodat het volgende frame sneller wordt weergegeven.
- Beheer wachtrijinteracties: wees u ervan bewust hoe wachtrijinteracties kunnen bijdragen aan de vertraging van de presentatie en beheer ze efficiënt.
7. Algemene best practices
- Controleer de prestaties regelmatig: controleer voortdurend de prestaties van uw site met hulpmiddelen zoals Google PageSpeed Insights, Lighthouse en Real User Monitoring (RUM)-oplossingen.
- Blijf op de hoogte van CWV's : blijf op de hoogte van wijzigingen in de belangrijkste webvitaliteitsstatistieken en pas uw optimalisatiestrategieën dienovereenkomstig aan.
Door deze strategieën te implementeren, kunt u de INP van uw website aanzienlijk verbeteren, wat leidt tot een responsievere en gebruiksvriendelijkere ervaring. Onthoud dat optimalisatie voor INP een continu proces is dat regelmatige monitoring en aanpassingen vereist op basis van gebruikersinteractiepatronen en website-updates.
Laatste gedachten
Interaction to Next Paint (INP) is een belangrijke maatstaf voor het beoordelen van de responsiviteit van webpagina's. Het biedt een compleet beeld van hoe snel een site reageert op gebruikersinteracties en overtreft daarmee de reikwijdte van First Input Delay (FID) door de latentie van alle interacties te meten, niet alleen de eerste.
We hebben besproken hoe je INP kunt meten met tools zoals PageSpeed Insights en Lighthouse, en strategieën voor optimalisatie onderzocht, zoals het minimaliseren van CPU-verwerking en het verminderen van invoervertraging. Deze stappen zijn cruciaal voor het verbeteren van de gebruikerservaring (UX) en websiteprestaties.
Het optimaliseren van de siteprestaties kan uitgevers ook helpen hun advertentie-inkomsten te verhogen. Een goed geoptimaliseerde site zal het publiek immers eerder aanmoedigen om meer dan één keer te bezoeken. Wilt u de inkomsten uit uw site verbeteren? Neem dan contact met ons op voor meer informatie over hoe we sinds 2015 meer dan 350 uitgevers in 60 landen hebben geholpen hun inkomsten te verhogen.
Veelgestelde vragen
Wat betekent gebruikersinteractie?
Gebruikersinteractie verwijst naar elke actie die een gebruiker op een webpagina uitvoert, zoals klikken op een knop, tikken op een link of typen in een tekstveld. Deze interacties zijn de manier waarop gebruikers met een website communiceren en een reactie of wijziging op de pagina initiëren. Gebruikersinteracties zijn essentieel voor de functionaliteit van webapplicaties, omdat ze gebeurtenissen activeren die leiden tot dynamische wijzigingen, contentupdates of navigatie binnen de site.
Is INP een Core Web Vitals-metriek?
INP vervangt First Input Delay (FID) als Core Web Vitals-statistiek in maart 2024. CWV's zijn een reeks statistieken waarmee Google de gebruikerservaring (UX) van een webpagina evalueert. Hierbij ligt de nadruk op aspecten zoals paginalaadtijd, interactiviteit en visuele stabiliteit.
Welke gebruikersinteracties houdt INP in gedachten?
INP houdt rekening met interacties zoals muisklikken, tikken op een touchscreen en het indrukken van toetsen. Dit zijn directe acties die gebruikers ondernemen om met een website te interacteren. INP omvat geen passieve interacties zoals zweven of scrollen. De metriek richt zich op actieve interacties waarbij de gebruiker een reactie van de website verwacht, waardoor het een waardevolle maatstaf is voor de interactieve prestaties van een site.
Wat zijn cookies?
Cookies zijn kleine gegevensbestanden die door een webbrowser op het apparaat van een gebruiker worden opgeslagen wanneer deze websites bezoekt. Ze worden gebruikt om informatie over de gebruiker te onthouden, zoals inloggegevens, voorkeuren en browsegeschiedenis.
Cookies helpen de gebruikerservaring te personaliseren, sessiestatussen te behouden en gebruikersgedrag te volgen voor analyse- en advertentiedoeleinden. Hoewel cookies essentieel zijn voor veel webfunctionaliteiten, brengen ze ook privacyoverwegingen met zich mee, wat leidt tot regelgeving met betrekking tot het gebruik ervan en de toestemming van gebruikers.
Wat is een voorbeeld van interactie met Next Paint?
Een voorbeeld van Interaction to Next Paint is een gebruiker die op de knop 'Verzenden' op een formulier klikt en de tijd die het kost voordat het bevestigingsbericht op het scherm verschijnt. INP meet de duur van de klik tot de visuele update van de bevestiging. Deze statistiek helpt bij het identificeren van trage interacties, wat essentieel is als u de gebruikerservaring van uw site wilt verbeteren.