Interactie met de volgende verf: wat is het en hoe doe je het?

Heeft u ooit een trage en niet-reagerende website of app ervaren?

Misschien heb je op een knop geklikt en duurde het lang voordat er iets op het scherm verscheen. Dat is een frustrerende ervaring, toch?

Dat is precies waar “Interactie met Next Paint” (INP) over gaat.

Interaction to Next Paint (INP) is een opkomende statistiek die Google gebruikt om te evalueren hoe snel uw website reageert op gebruikersinvoer. Op 12 maart 2024 werd het een van de Core Web Vitals-criteria die van invloed zijn op de Google-ranglijst.

Waarom doet dit er toe?

In het huidige digitale tijdperk verwachten mensen dat dingen onmiddellijk gebeuren. Als een website of app niet snel reageert op jouw acties, zul je waarschijnlijk ontevreden raken en afhaken. Niemand heeft tegenwoordig tijd voor trage apps!

Het optimaliseren van INP is cruciaal voor het leveren van een naadloze, plezierige gebruikerservaring die gebruikers betrokken en tevreden houdt. Hoe lager de INP, hoe hoger de waargenomen prestaties van uw website of app.

Laten we INP diepgaand onderzoeken en onderzoeken hoe u dit kunt meten om uw bestaande score te verbeteren.

Wat is interactie met de volgende verf (INP)?

Interaction to Next Paint (INP) is een webprestatiestatistiek die de tijd telt tussen een gebruikersinteractie (zoals klikken, tikken of scrollen) en de volgende keer dat pixels op het scherm worden geschilderd als resultaat van die interactie.

Simpel gezegd meet INP hoe snel een webpagina of applicatie zichtbaar reageert op gebruikersinteractie. Een lager INP-nummer duidt op een responsievere ervaring, terwijl een hogere INP-waarde duidt op een merkbare vertraging tussen de actie van de gebruiker en de visuele update op het scherm.

Voor de meeste gebruikersinteracties is de voorgestelde INP-waarde minder dan 200 milliseconden (ms). Een INP-waarde van meer dan 300 ms wordt als slecht beschouwd en zal door gebruikers als traag worden beschouwd

Interactie met Next Paint als kernweb essentieel

Interactie met Next Paint werd op 12 maart 2024 geïntroduceerd als een van de drie Google Core Web Vitals-statistieken. Het verving de vorige First Input Delay-statistiek.

Als een Core Web Vitals-statistiek kan een slechte interactie met Next Paint uw Google-zoekrangschikking beïnvloeden.

Hoe verschilt de interactie met de volgende verf van de eerste invoervertraging?

INP is de opvolger van First Input Delay (FID). Beide zijn responsiviteitsstatistieken.

FID en INP variëren op twee manieren:

• FID meet alleen de eerste verwerkingsvertraging, terwijl INP de hele tijd tussen gebruikersinvoer en UI-update meet.
• FID telt eenvoudigweg de initiële gebruikersinteractie op een pagina, maar INP houdt rekening met (ongeveer) de grootste latentie.

First Input Delay schat hoe lang het duurt voordat de browser begint met het verwerken van gebruikersinvoer. De werkelijke tijd die wordt besteed aan het reageren op gebeurtenissen of het wijzigen van de gebruikersinterface is niet inbegrepen.

Zoals de naam al aangeeft, analyseert FID alleen de initiële interactie die de gebruiker met de website heeft. Dit eerste contact geeft mogelijk niet accuraat de algehele gebruikerservaring weer, vooral voor sites die gedurende een langere periode open blijven, zoals applicaties met één pagina.

Interactie met Next Paint evalueert doorgaans de slechtste invoerlatentie op de pagina. Als er echter veel gebruikersontmoetingen zijn, worden uitschieters weggegooid en beoordeelt Google het 98e percentiel op interactievertraging.

Dus als de INP van een pagina 250 milliseconden bedraagt, had 2% van de gebruikersinteracties een latentie die groter was dan dat.

Hoe werkt interactie met volgende verf (INP)?

INP is een responsiviteitsmetriek die zich richt op de tijd die verstrijkt tussen gebruikersinteracties. Het meet hoe snel een webpagina-element reageert wanneer er een specifieke actie op wordt uitgevoerd.

Zo werkt INP:

• Een gebruiker communiceert met een webpagina door op een knop te klikken.
• De browser vraagt ​​nieuwe inhoud aan bij de webserver.
• De webserver levert nieuwe inhoud aan de browser.
• De browser geeft de nieuwe inhoud op de pagina weer.
• De browser berekent de tijd die nodig is om de nieuwe inhoud te maken en rapporteert dit als de INP-score.

Een lage INP-beoordeling geeft aan dat de pagina extreem reageert op gebruikersinvoer. Als onderdeel van Core Web Vitals is INP om de volgende redenen belangrijk:

• Verbeterde gebruikerservaring:Een hoge INP-score geeft aan dat bezoekers lang moeten wachten voordat de webpagina reageert op hun activiteiten, wat vervelend kan zijn.

• SEO (zoekmachineoptimalisatie):INP en andere Core Web Vitals maken deel uit van de pagina-ervaringssignalen van Google, die de positie van een website op zoekresultatenpagina's beïnvloeden. Dit benadrukt het belang van het INPSEO-statistiek.

• Verlaag het bouncepercentage:Trage laadtijden kunnen ervoor zorgen dat klanten de pagina verlaten, waardoor het bedrijfsresultaat afneemt.

Hoe wordt INP gemeten?

INP bewaakt de tijd die verstrijkt tussen gebruikersinvoer, zoals klikken en toetsaanslagen, en de volgende UI-update. Deze vertraging bestaat uit drie componenten:

A. Ingangsvertraging

Wachten op achtergrondbewerkingen op de website om te voorkomen dat de gebeurtenishandler wordt uitgevoerd.

B. Verwerkingstijd

Uitvoeren van eventhandlers in JavaScript.

C. Presentatievertraging

Omgaan met andere lopende bewerkingen, het opnieuw berekenen van de pagina-indeling en het schilderen van de pagina-inhoud. INP's worden gemeten in milliseconden (ms). Een goede benchmark is minder dan 200 ms, en alles tussen dat en 500 ms wordt geacht voor verbetering vatbaar te zijn. Een latentie van 500 ms of meer wordt als slecht beschouwd.

Verschillende variabelen kunnen een INP-waarde beïnvloeden, waaronder de grootte en complexiteit van een webpagina, evenals het aantal geladen JavaScript- en CSS-bestanden.

U kunt veel hulpmiddelen gebruiken om de interactie met Next Paint te evalueren, zoals:

• DebugBear's websitesnelheidstest
• Google-inzichten in paginasnelheid
• Onze Chrome-extensie voor sitesnelheid
• INP-foutopsporing
• Google SearchConsole
• De Web Vitals-bibliotheek

Tools voor het testen van websitesnelheid kunnen u helpen de INP-waarde van een website te bepalen. Dit type applicatie kan informatie verschaffen over hoe uw Core Web Vitals-statistieken presteren en begeleiding bieden bij het optimaliseren ervan.

Google PageSpeed ​​Insights is een populaire tool voor het analyseren van INP enwebsiteprestaties. Het beoordeelt een locatie en doet aanbevelingen voor de beste praktijken die kunnen worden toegepast. U kunt ook onderzoeken hoe snel uw website laadt op mobiele apparaten en desktops.

PageSpeed ​​Insights presenteert twee soorten bevindingen. In het bovenste gedeelte worden de Core Web Vitals-statistieken van een site weergegeven uit het Chrome UX-rapport, een verzameling praktische prestatiestatistieken van Chrome-gebruikers.

De waarden in het onderstaande rapport zijn afkomstig uit een gecontroleerde laboratoriuminstelling die gebruikmaakt van Google Lighthouse. Deze gegevens kunnen worden gebruikt om nieuwe functies te testen voordat ze live gaan.

Als de INP-gegevens van de site niet beschikbaar zijn, kijk dan naar de Total Blocking Time (TBT). Deze statistiek evalueert een nieuwe vorm van responsiviteit. Het richt zich op hoe lang een website niet kan reageren op gebruikersinteractie tijdens het laden.

Helemaal onderaan zijn er ideeën over hoe u de Core Web Vitals-statistieken kunt verbeteren, als volgt:

Hoe optimaliseren voor interactie met Next Paint (INP)?

Om INP te optimaliseren, wil je dus de takenlijst voor de rode draad zoveel mogelijk vereenvoudigen en prioriteren. Hier zijn enkele belangrijke strategieën en manieren om te optimaliseren voor verbeterde Interaction to Next Paint (INP)-waarden en om de responsiviteit te vergroten:

A. Verbeter JavaScript-prestaties

JavaScriptis een belangrijk onderdeel van veel websites. Het biedt veel interactieve elementen; het kan echter ook de snelheid van de site vertragen.

Wanneer JavaScript wordt uitgevoerd, draait het op de hoofdthread, die verantwoordelijk is voor het weergeven van een webpagina. Als de code inefficiënt is, kan dit ertoe leiden dat de thread stopt en dat de website niet reageert op gebruikersinvoer.

Optimaliseer uw JavaScript om de responsiviteit te verbeteren. Je kunt dit bereiken door:

• JavaScript-bestanden verkleinenvermindert de hoeveelheid JavaScript, waardoor het meerkan laden snel.

• Schakel GZip-compressie in.Een andere veelgebruikte manier om websitebestanden en gegevens te comprimeren.

• Een JavaScript-framework gebruiken.Met deze tool kunt u uw JavaScript-code ordenen en efficiënter maken. AngularJS en jQuery zijn bekende voorbeelden.

• CDN gebruiken.Deze technologie, ook wel een content delivery network genoemd, verspreidt uw JavaScript-bestanden vanaf servers in de buurt van uw doelgroep, wat resulteert in snellere laadtijden.

Inefficiënt JavaScript kan de hoofdthread blokkeren, waardoor vertragingen in de weergave ontstaan. Het splitsen van code, lazyloading, het gebruik van webworkers en het vermijden van langlopende bewerkingen op de hoofdthread zijn allemaal opties om JavaScript-vertraging te verminderen.

B. Gebruik webwerkers

Webworkers zijn een service waarmee JavaScript onafhankelijk van de hoofdthread kan worden uitgevoerd. Ze zijn handig voor het uitvoeren van ingewikkelde taken op de achtergrond.

Stel dat u een WordPress-website heeft vol met foto's, video's en gegevens. Webwerkers kunnen deze dure JavaScript-bewerkingen naar een achtergrondthread verplaatsen, waardoor uw interface niet vastloopt.

Een andere manier om te voorkomen dat de rode draad blijft hangen, is door grote JavaScript-taken in kleinere te verdelen.

C. Lange taken opsplitsen

Door grote taken op te splitsen, kan de webbrowser ze in kleinere delen tegelijk afhandelen. Als gevolg hiervan is de rode draad vrij om belangrijkere taken uit te voeren.

Zoals u weet, blokkeren langdurige taken de rode draad, waardoor de browser geen interactiegebeurtenissen kan uitvoeren. Naarverbeter de responsiviteit van uw site, verminder de spanning op de hoofddraad en probeer grote bewerkingen op te splitsen.

Door grote activiteiten op te splitsen in kleinere stukjes kan de rode draad andere taken uitvoeren en sneller reageren op gebruikersinteracties.

Bovendien helpt het opbreken van lange taken het “jank”-effect te minimaliseren, waarbij animaties en overgangen op de website schokkerig of stotterend worden vanwegetot een overbelaste hoofdthread. Door ervoor te zorgen dat elke activiteit in een korter tijdsbestek wordt voltooid, kan de website de gebruiker een meer naadloze visuele ervaring bieden.

D. Prioriteit geven aan invoergereedheid

Invoergereedheid verwijst naar het vermogen van een webpagina om te reageren op gebruikersinteractie. Als dit niet het geval is, betekent dit doorgaans dat de hoofdlijn van de browser bezig is met andere taken.

Hier leest u hoe u prioriteit kunt geven aan invoergereedheid en INP kunt stimuleren:

1. Niet-kritieke JavaScript wordt uitgesteld

Een deel van JavaScript is niet vereist voor het laden van de pagina en kan worden uitgevoerd na de hoofdregelinhoud. Hierdoor kan de hoofdthread prioriteit geven aan gebruikersinteracties en de algehele responsiviteit van de pagina vergroten.

2. Smoren

Deze strategie bepaalt de frequentie waarmee een functie wordt uitgevoerd. Als een gebruiker naar beneden scrolt, kan dezelfde code bijvoorbeeld honderden keren per seconde worden uitgevoerd. Dankzij de beperking kan deze slechts één keer per milliseconde worden uitgevoerd, ongeacht hoe vaak de gebeurtenis wordt geactiveerd.

3. Ontbuigen

Dit verhindert dat een functie opnieuw wordt uitgevoerd totdat een bepaalde periode is verstreken. Wanneer gebruikers bijvoorbeeld het formaat van hun browservenster wijzigen, kan deze gebeurtenis dezelfde procedure vele malen initiëren. Debouncing kan worden gebruikt om de uitvoering uit te stellen totdat de gebruiker gedurende een vooraf bepaalde periode stopt met het wijzigen van de grootte.

4. Evenementluisteraars die niet actief deelnemen

Gebeurtenislisteners zijn computerconstructies die bepaalde gebeurtenissen detecteren, zoals scrollen en tikken. Door ze passief te maken, wordt de browser instrueerd om het wachten op het voltooien van een specifieke functie over te slaan en in plaats daarvan door te gaan met andere activiteiten.

e. Geef onmiddellijke feedback

Bepaalde activiteiten, zoals het invullen van een formulier met verschillende gegevensinvoer, kunnen tot grote vertragingen in de respons leiden.

Dat is waar directe feedback om de hoek komt kijken. Deze strategie biedt klanten een zichtbare indicatie dat de website hun verzoek heeft ontvangen en verwerkt.

Gebruikers hoeven zich niet meer af te vragen of de website hun input heeft geregistreerd als ze snelle feedback ontvangen. Het kan de indruk wekken van snellere prestaties, ook al verkort het de verwerkingstijd niet daadwerkelijk.

Bekijk deze voorbeelden van snelle feedbacksignalen:

1. Laadindicatoren

Geef een spinner of een voortgangsbalk weer wanneer een proces actief is, vooral wanneer u gegevens presenteert of naar een nieuwe pagina overschakelt.

2. Pop-upbevestigingsberichten

Het is een goed idee om een ​​bericht weer te geven waarin wordt bevestigd dat een bewerking, zoals het toevoegen van een artikel aan een winkelwagentje, met succes is voltooid.

3. Validatie van formuliervelden

Als een gebruiker bijvoorbeeld een onjuist gevormd e-mailadres invoert, geef dan onmiddellijk een foutmelding weer in plaats van te wachten tot het formulier is verzonden.

Conclusie

Aan het einde van de dag presenteert u eengeweldige gebruikerservaringop internet komt het op één ding neer: reactievermogen. De snelheid waarmee uw website of app reageert op gebruikersgebeurtenissen, zoals klikken, tikken en browsen, kan bepalen of het een plezierige ervaring is of frustrerend traag.

Daarom is het optimaliseren van een snelle Interaction to Next Paint (INP)-tijd zo belangrijk. INP bewaakt de belangrijke minuten tussen het moment waarop iemand interactie heeft met uw website en het moment waarop hij of zij de visuele bevestiging op zijn scherm ontvangt. Hoe lager de INP, hoe sneller en responsiever alles lijkt.

Dus ga je gang en ontgrendel de kracht van geoptimaliseerde INP!

Ontdek de snelle responsiviteit die gemiddelde websites onderscheidt van websites die er luxueus snel en soepel uitzien. De tevredenheid van uw gebruikers en het succes van uw digitale ervaringen zijn hiervan afhankelijk.

Veelgestelde vragen