Webprestaties ontgrendelen

In de snelle wereld van digitale marketing zijn websiteprestaties niet alleen een technische kwestie, maar ook een cruciale factor voor gebruikersbetrokkenheid en conversiepercentages. Heb je er ooit bij stilgestaan dat een vertraging van slechts een seconde bij het laden van een pagina je conversies met maar liefst 20% kan verlagen? Onderzoek van Google onderstreept deze kritieke impact en benadrukt de urgentie van het optimaliseren van de websnelheid.

Met de introductie van Core Web Vitals als een rankingfactor in mei 2021 gaf Google een verschuiving aan en benadrukte het pagina-ervaring als een holistische rankingfactor, waarbij snelheid een cruciale rol speelt. Optimaliseren voor Core Web Vitals lijkt in eerste instantie misschien een uitdaging, maar het is meer dan alleen voldoen aan technische vereisten. Het gaat om het verbeteren van je website op manieren die echt een verschil maken voor gebruikers. Het gaat om het verbeteren van de gebruikerservaring, het voldoen aan prestatienormen en, als leuke bonus, het mogelijk verbeteren van je SEO-klasseringen.

Kom er maar in Interaction to Next Paint (INP), Google's nieuwste metric in de Core Web Vitals suite, gericht op het verfijnen van ons begrip van webresponsiviteit. Maar waarom is dit van belang voor jou als marketeer, producteigenaar of ontwerper? Laten we eens kijken hoe INP niet alleen de grens van webprestatiemetingen vertegenwoordigt, maar ook dient als sleutel tot het ontsluiten van superieure gebruikerservaringen, zodat je digitale aanwezigheid niet alleen gevonden, maar ook gevoeld wordt, in een oogwenk.

Onderdelen:

• INP begrijpen
• Waarom INP belangrijk is voor je bedrijf
• De rol van INP in SEO en online zichtbaarheid
• Voorbereiden op de INP Overgang
• Tips om INP te verbeteren zonder een ontwikkelaar te zijn
• Conclusie

INP begrijpen

Laten we eens uitleggen wat Interaction to Next Paint eigenlijk inhoudt. Stel je voor dat je interactie hebt met een webpagina - klikken op een knop of tikken op een link. INP meet de vertraging tussen jouw actie (zoals het indrukken van een knop) en de webpagina die begint te reageren (die laat zien dat er iets gebeurt).

Zie het als het gebruik van een koffiezetapparaat: Je drukt op de knop om een kopje te zetten. De vertraging voordat de machine in actie komt, niet de tijd die het kost om de koffie daadwerkelijk te zetten, is waar het bij INP om gaat. En we meten dit in milliseconden, waarbij we streven naar een reactietijd van minder dan 200 ms om te zorgen voor een soepele ervaring of een goede score op je web vitals.

Elke interactie op je webpagina wordt bekeken en de langzaamste bepaalt je totale INP-score. Zelfs als de meeste interacties snel zijn, kan een enkele langzame interactie je score beïnvloeden. Het is een verschuiving van het focussen op de 'First Input Delay' (FID), waarbij alleen naar de eerste interactie werd gekeken, naar het vastleggen van het volledige spectrum van gebruikerservaringen, waarbij we ervoor zorgen dat we niet alleen een geweldige eerste indruk maken, maar ook consistent snelheid en reactiesnelheid leveren.

De overgang van FID naar INP klinkt misschien complex, omdat je dan elke interactie op je site moet monitoren. Het is echter een stap op weg naar een beter begrip van wat gebruikers op je site ervaren. En maak je geen zorgen - het optimaliseren voor INP is een uitdaging die we samen kunnen aangaan, zodat je site niet alleen voldoet aan de verwachtingen van gebruikers, maar deze zelfs overtreft.

Waarom INP belangrijk is voor uw bedrijf

In de snelle online wereld beschouwen velen van ons, vooral in technisch onderlegde landen als Nederland, ons snelle internet en onze geavanceerde apparaten als vanzelfsprekend, in de veronderstelling dat vertragingen in webinteracties een zeldzame storing zijn in plaats van een veelvoorkomende frustratie. Dit kan ertoe leiden dat we het cruciale belang van statistieken zoals Interaction to Next Paint (INP) over het hoofd zien, denkend, zoals het gezegde in ontwikkelingskringen luidt, “het werkt op mijn machine”. Dit perspectief gaat echter voorbij aan een bredere realiteit: niet elke gebruiker geniet hetzelfde technologieniveau en zelfs kleine vertragingen kunnen de gebruikerservaring en daarmee de conversie aanzienlijk beïnvloeden.

Neem het afrekenproces op een e-commercesite, een kritiek punt waar een soepele interactie een verkoop kan maken of breken. Elke vertraging of gebrek aan reactie bij het verwerken van gebruikersacties - of het nu gaat om het klikken op een knop of het invullen van een formulier - kan schadelijk zijn. Het is hier dat INP van onschatbare waarde wordt, niet alleen als een andere metriek om te controleren, maar als een cruciaal diagnostisch hulpmiddel dat helpt bij het identificeren en corrigeren van deze valkuilen in de gebruikerservaring voordat ze je bedrijf negatief beïnvloeden.

Door te optimaliseren voor INP verbeteren we niet alleen de cijfers op een prestatierapport; we zetten ons in om alle gebruikers, ongeacht hun technologische context, te voorzien van de snelle, responsieve interacties die cruciaal zijn voor het behouden van betrokkenheid en het stimuleren van conversies. INP moet dus gezien worden als een onmisbare bondgenoot (pun intended) in je zoektocht naar het creëren van naadloze online ervaringen die voldoen aan de verwachtingen van elke gebruiker, om uiteindelijk het conversiepotentieel van je website te waarborgen en te vergroten.

Rol van INP in SEO en online zichtbaarheid

Interaction to Next Paint (INP) heeft niet alleen invloed op de gebruikerservaring, maar speelt ook een cruciale rol in hoe je website wordt waargenomen door zoekmachines, met name Google. Als onderdeel van Core Web Vitals-Google's set meetgegevens die is ontworpen om de algehele prestaties en gebruikerservaring van een webpagina te meten, heeft INP een directe invloed op de online zichtbaarheid en SEO van je site.

Hoewel Core Web Vitals, inclusief INP, niet de enige factoren zijn in Google's algoritme voor plaatsing op de ranglijst, leveren ze wel een belangrijke bijdrage aan het signaal voor 'pagina-ervaring', een belangrijk onderdeel van een grotere set criteria die wordt gebruikt om de kwaliteit van een webpagina te beoordelen. In wezen fungeert INP als een cruciaal stukje in de SEO-puzzel, waarbij elke kleine optimalisatie het rankingpotentieel van je site cumulatief kan verbeteren.

Optimaliseren voor INP en andere signalen van Core Web Vitals laat zoekmachines zien dat je site een superieure gebruikerservaring biedt, een factor die steeds belangrijker wordt in het concurrerende landschap van zoekresultaten. Het gaat om het bouwen van een solide basis die niet alleen de prestaties van je site verbetert, maar je ook gunstig positioneert in de 'ranking race'.

Voorbereiding op de INP Overgang

Om te kunnen werken met INP of andere belangrijke webstatistieken is het belangrijk om het verschil te begrijpen tussen de verschillende velden waarin gegevens worden verzameld. We onderscheiden drie verschillende velden voor het beoordelen van een metriek: CrUx, RUM en Lab-data.

Het landschap begrijpen: CrUX, RUM en Labgegevens

CrUX-gegevens: De brede kijk

Wat het is: Stel je voor dat je een enquête houdt onder een groot publiek om de algemene gezondheid van je website te meten. Dat is CrUX data, die een helikopterview biedt van de gebruikerservaring bij miljoenen interacties.

• **Pros:**Echte inzichten, brede gegevensset, eenvoudige toegang.
• Cons: Algemene gegevens, niet direct beschikbaar.

RUM Data: De diepte in

Wat het is: Dit is vergelijkbaar met één-op-één interviews, waarbij je gedetailleerde feedback krijgt van elke gebruikersinteractie, waardoor je specifieke inzichten krijgt.

• Pros: Gedetailleerd, direct, aanpasbaar.
• Cons: Vereist installatie, kan duur zijn.

Labgegevens: De gecontroleerde test

Wat het is: Zie dit als het testen van een product in een gecontroleerde omgeving, waar je kunt anticiperen op problemen van gebruikers voordat ze die tegenkomen.

• Pros: Consistente omgeving, bruikbare inzichten.
• Cons: Het kan zijn dat niet alle scenario's uit de praktijk worden gebruikt.

Het interessante aan INP is dat het iets is dat we niet echt kunnen meten in een laboratoriumomgeving zoals Lighthouse. Je hebt gebruikersinteractie nodig om te kunnen klikken en tabben op dingen op een webpagina om de vertraging tussen de klik en de reactie van de browser te berekenen. Dus hoe meten we INP in een synthetische omgeving waar niet wordt geklikt? Met de totale blokkeertijd (TBT). De volgende keer dat je Lighthouse uitvoert, zul je zien dat INP niet meer voorkomt in het statistiekenoverzicht. Deze is vervangen door de TBT. Deze geeft aan hoe lang de hoofddraad tijdens het renderen van de pagina geblokkeerd werd door het uitvoeren van scripts. Google heeft aangegeven dat deze TBT een sterke correlatie heeft met INP. Dus eigenlijk zeggen ze dat als je TBT goed is, je INP waarschijnlijk ook goed zal zijn als het gaat om de veldgegevens.

Dit is allemaal leuk en aardig, maar het helpt ons niet om die interacties te identificeren die een vertraging op ons platform veroorzaken. De vertraging die wordt berekend wanneer een gebruiker een actie uitvoert, is totaal anders dan de totale blokkeertijd om een pagina te renderen. Dus helaas kunnen we alleen de TBT gebruiken als indicator voor INP en moeten we een nieuwe aanpak gebruiken om INP te debuggen.

Het eerste wat we moeten doen is uitzoeken waar op onze website INP ontbreekt. De snelste manier om dit te doen is via Google Pagespeed Insights. Maar voor nichtenpagina's heeft het misschien niet altijd gegevens voor die pagina. Dus een ander goed alternatief is Google Search Console. Ik ga er hier vanuit dat je geen toegang hebt tot RUM-metrics van geïnstalleerde tooling. Anders kun je daar de gegevens vandaan halen en pagina's identificeren die een slechte INP-score hebben.

Nu zijn webpagina's vaak geclusterd omdat ze dezelfde lay-out of hetzelfde patroon volgen. Een blogpost heeft bijvoorbeeld voor elke blogpost dezelfde structuur, hetzelfde geldt voor een productdetailpagina. Je hoeft dus niet elke pagina te evalueren, maar controleert een paginacluster door een url uit dat cluster in een van de tools te droppen. Dit geeft je de INP voor die pagina, samen met de andere webwaarden. Onthoud dat ik in het begin zei dat de interactie met de langste duur uiteindelijk wordt berekend als de INP voor die pagina. Dus als je negen hele snelle interacties hebt, maar één langzame. De langzame is je INP.

Als je het paginacluster met een langzame INP hebt geïdentificeerd, is het tijd om die pagina te debuggen. Hiervoor gebruiken we lighthouse in de Chrome browser. Ga naar die pagina, open de console en selecteer lighthouse in de tablijst. Daar wil je Modus: Tijdspanne, Apparaat: Mobiel en Categorieën: Prestaties. De rest kun je allemaal onaangetast laten.

Nu druk je op start timepan en kun je beginnen met de interactie met je pagina. Probeer te klikken op dropdowns, schuifbalken, alles waar een gebruiker interactie mee kan hebben en wat geen navigatie-element is, want je wilt niet weg van deze pagina. Als je op een heleboel dingen hebt geklikt, beëindig je de tijdspanne-modus en begint hij met het berekenen van je score. Vanaf hier krijg je een overzicht van hoe deze pagina presteert. Om in de langzame elementen te duiken kun je de INP-toets aanzetten en dan krijg je in het Diagnostics-rapport een dropdown genaamd: Minimaliseer werk tijdens toetsinteractie. Als je deze keuzelijst aanklikt, krijg je het element met de langste vertraging te zien.

Optimaliseren voor INP heeft een iteratieve aanpak nodig om er zeker van te zijn dat alle langzame elementen zijn geïdentificeerd voordat ze worden opgelost. Het is goed om te onthouden dat een element met een lange vertraging andere elementen met een iets minder lange vertraging kan verbergen, maar nog steeds een slechte INP-score heeft. Het is dus goed om de test opnieuw uit te voeren, zonder te klikken op het element waarvan je al hebt vastgesteld dat het een trage responder is. Op deze manier kun je meerdere INP elementen met een slechte score identificeren en alles in één keer oplossen.

Als je de elementen op je pagina hebt geïdentificeerd die een lange vertraging veroorzaken bij interactie, kun je gaan werken aan een oplossing. Hier wil je samenwerken met ontwerp en ontwikkeling om te zien welke oplossing het beste bij elk element past. Soms ziet een ontwerp er goed uit, maar werkt het niet goed in code. Het veranderen van het ontwerp kan dan een eenvoudige oplossing zijn om de vertraging op te heffen. Ook kan de interactie worden vertraagd doordat er code onder de motorkap wordt uitgevoerd terwijl een gebruiker op een dropdown drukt. Het toevoegen van een eenvoudige laadstatus of het hertekenen van het element kan een oplossing zijn vanuit een ontwikkelingsperspectief. Probeer geen oplossingen te zoeken op basis van wat je ziet, maar probeer samen te werken en de weg van de minste weerstand naar een oplossing te vinden. Uiteindelijk gaat het allemaal om de gebruikerservaring.

Tips om INP te verbeteren zonder een ontwikkelaar te zijn

Zoals onze reis door de fijne kneepjes van INP laat zien, is uitmuntende webprestatie niet alleen de verantwoordelijkheid van SEO's of ontwikkelaars; het is een multidisciplinaire inspanning. Van SEO-specialisten en ontwerpers tot marketeers, productmanagers en ontwikkelaars, iedereen speelt een cruciale rol bij het vormgeven van de gebruikerservaring en daarmee het succes van het product.

Voor SEO's is je vaardigheid in het opsporen van valkuilen in de gebruikerservaring van onschatbare waarde. Door gebruik te maken van tools als lighthouse om vertragende elementen te documenteren en systematisch tickets aan te maken voor ontwikkelingsinterventie, vormen jullie de ruggengraat van onze optimalisatiestrategie. Je iteratieve en gedetailleerde onderzoeken leggen de basis voor impactvolle verbeteringen.

Product Managers, jullie strategisch toezicht zorgt ervoor dat INP optimalisatie tickets niet zomaar een punt op de ontwikkelingsagenda zijn, maar een prioriteit. Jouw rol in het aansturen van deze initiatieven heeft een directe invloed op de tevredenheid van onze gebruikers en het organische bereik van ons platform - belangrijke motoren voor de groei van ons bedrijf.

Ontwerpers, jullie zijn de architecten van de gebruikerservaring. Elk element dat jullie maken draagt niet alleen bij aan de esthetiek, maar heeft ook invloed op de prestaties. Als je rekening houdt met de balans tussen functionaliteit en vorm, vooral bij interactieve elementen, voorkom je mogelijke INP-uitdagingen en zorg je ervoor dat ontwerpen optimale gebruikersinteracties mogelijk maken.

Ontwikkelaars, we vertrouwen op jullie expertise om deze ontwerpen en strategieën tot leven te brengen, zodat ze werkelijkheid worden. Inzicht in het gewicht van elke klikafhandeling of interactief element op de prestaties is cruciaal. Het vereenvoudigen van interacties, het rekening houden met laadstatussen en het handhaven van een gebruikersgerichte aanpak bij het coderen zijn essentieel voor het minimaliseren van vertragingen en het verbeteren van onze INP-scores.

De spil van ons succes ligt echter in onze collectieve actie en wederzijds begrip. Wanneer elk teamlid de impact van zijn werk op INP en het bredere spectrum van Core Web Vitals begrijpt, ontsluiten we een krachtige synergie. Regelmatige interdisciplinaire discussies, het delen van inzichten en het samenwerken aan oplossingen demystificeren niet alleen technische uitdagingen, maar stemmen ook onze inspanningen af op gemeenschappelijke doelen.

Stel je een scenario voor waarbij een ontwerper en ontwikkelaar samen een interactieve functie maken. Door samen te brainstormen vinden ze een innovatieve oplossing die de betrokkenheid van de gebruiker vergroot zonder afbreuk te doen aan INP. Dit tastbare voorbeeld van teamwork onderstreept het potentieel van onze collectieve expertise als we die inzetten voor een gemeenschappelijk doel.

Laten we daarom een cultuur van proactieve betrokkenheid en voortdurend leren bevorderen. Moedig open dialogen aan, deel succesverhalen en omarm feedback - zowel van onze teams als van onze gebruikers. Door een omgeving te stimuleren waarin elke stem bijdraagt aan het optimalisatieverhaal, zorgen we ervoor dat het verbeteren van INP en webprestaties niet alleen een taak is, maar een gezamenlijke missie.

In wezen ligt de magie niet in code of ontwerp alleen, maar in ons vermogen om te communiceren en samen te werken aan het verbeteren van de gebruikerservaring. Met iedereen aan boord en in dezelfde richting, wordt het navigeren door de complexiteit van INP niet alleen haalbaar, maar ook een katalysator voor innovatie en groei.

Conclusie:

Hier heb je het dan, de nieuwste Core Web Vital: INP. De volgende keer dat je een kop koffie haalt, onthoud dan dat de vertraging tussen het indrukken van een knop en het moment dat de computer in actie komt, de Interaction To Next Paint is. Een vertraging die ernstige gevolgen kan hebben voor de prestaties van je site. Om dit op te lossen sta je er niet alleen voor, het moet een gezamenlijke inspanning zijn van verschillende afdelingen. Waarbij idealiter de algehele mindset om gebruiksvriendelijke code te leveren wordt gedeeld door alle gelederen. En vergeet niet dat INP er niet is om je te ergeren, maar om je te helpen. Het is eigenlijk een vermomde zegen die je wijst op die gebieden op je website die niet goed presteren.