Interaction to Next Paint (INP) ersätter FID i Core Web Vitals – så här förbereder du dig.

I en digital era där användarupplevelsen på webbsidor är av allt större vikt, strävar teknikföretag som Google ständigt efter att förbättra och förtydliga de metoder som används för att mäta webbplatsens prestanda. En sådan förändring som har väckt uppmärksamhet är övergången från First Input Delay (FID) till Interaction to Next Paint (INP) som en del av Core Web Vitals. Denna förändring, meddelad av Google, har skapat en del frågor och förväntningar bland webbplatsägare och utvecklare världen över. Det är viktigt att notera att denna övergång planeras att träda i kraft i mars 2024, vilket har intensifierat intresset och behovet av förberedelser bland webbplatsägare. I detta omfattande artikeln ska vi utforska vad denna övergång innebär, varför den sker, och viktigast av allt, hur du kan förbereda din webbplats för den.

INP development stages

INP evolution since 2022

Introduktion till Core Web Vitals

Core Web Vitals är tre mätvärden som hjälper till att mäta och förbättra användarupplevelsen på webbsidor. Med övergången från FID till INP blir fokus på att mäta alla interaktioner på sidan för att ge en mer komplett bild av responsiviteten och användbarheten. Det är viktigt för webbplatsägare och utvecklare att anpassa sina strategier för att möta dessa nya krav och säkerställa en snabbare och mer interaktiv upplevelse för användarna.

Largest Contentful Paint (LCP): Mäter hur snabbt det största innehållet på en sida laddas.

Cumulative Layout Shift (CLS): Mäter visuell stabilitet genom att kvantifiera hur mycket innehållet rör sig när sidan laddas.

First Input Delay (FID) – blir snart Interaction to Next Paint (INP): FID mäter tiden det tar från användarens första interaktion med sidan till respons, medan INP inkluderar alla interaktioner under användarens session på sidan för att ge en mer komplett bild av responsiviteten.

Vad är Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) är ett mätvärde som introducerades av Google för att mäta responsiviteten på en webbsida. Interaction to Next Paint är inte bara ett mätvärde utan en omdefiniering av hur vi mäter responsivitet på webbsidor. Medan FID fokuserade på användarens första interaktion med sidan, såsom det första klicket på en knapp eller länk, strävar INP efter att ge en mer komplett bild av hur snabbt sidan svarar på alla interaktioner som sker medan användaren är på sidan. Detta innebär att INP fångar alla handlingar som användaren utför, från klick och tryck på enhet med pekskärm till tangenttryckningar, och ger därmed en mer rättvis bedömning av användarupplevelsen. Det slutliga INP-värdet är den längsta interaktionen som observerats, bortser från extremvärden.

*Exempel från Google som visar hur dålig respektive bra responsivitet ser ut:

en gif som visar hur dålig respektive bra responsivitet ser ut

Vad är ett bra INP värde?

Att förstå vad som utgör en bra INP-poäng är avgörande för utvecklare och webbplatsägare som strävar efter att optimera sin webbplats responsivitet. Att sätta etiketter som ”bra” eller ”dålig” på INP-poäng kan dock vara en nyanserad uppgift, med tanke på det varierande utbudet av enheter som användare använder och de olika förväntningarna dessa enheter medför.

För att fastställa riktmärken för god responsivitet är det klokt att analysera verklig data, specifikt den 75:e percentilen av sidbelastningar över både mobila och stationära enheter. Här är en uppdelning av vad dessa tröskelvärden innebär:

INP Under eller På 200 Millisekunder: Detta indikerar att din sida har utmärkt responsivitet och möter eller överträffar användarnas förväntningar på snabba interaktioner.
INP Över 200 Millisekunder och Under eller På 500 Millisekunder: Även om det inte är optimalt, signalerar en INP som ligger inom detta intervall måttlig responsivitet. Det finns dock utrymme för förbättring för att säkerställa smidigare användarupplevelser.
INP Över 500 Millisekunder: En INP som överstiger 500 millisekunder antyder dålig responsivitet och indikerar betydande förseningar i användarinteraktioner. Att åtgärda problem som bidrar till sådana förseningar är avgörande för att förbättra den övergripande användarupplevelsen.

Bild som förklarar vad ett bra och dåligt INP värde är

Vad är en Interaktion?

Huvuddrivkraften för interaktivitet är ofta JavaScript, även om webbläsare också tillhandahåller interaktivitet genom kontroller som inte drivs av JavaScript, såsom kryssrutor, radioknappar och kontroller som drivs av CSS.

När det kommer till INP observeras endast följande typer av interaktioner:

  1. Klick med en mus.
  2. Tryck på en enhet med pekskärm.
  3. Tryck på en tangent på antingen ett fysiskt eller virtuellt tangentbord.

*Att hovra över och scrolla påverkar inte INP. Scrollning med tangentbordet (mellanslagstangenten, sida upp, sida ner osv.) innebär dock en knapptryckning, vilket kan utlösa andra händelser som INP inte mäter. Eventuell scrollning till följd av detta tas inte med i beräkningen av INP.

bild som förklarar vad en interaktion är i INP perspektiv

Hur förbereder du din webbplats för denna förändring?

Att förbereda din webbplats för övergången från FID till INP kräver en noggrann analys och optimering av flera aspekter av sidans prestanda och användbarhet. Här är några åtgärder du kan vidta för att säkerställa att din webbplats är redo för den nya mätvärdet:

Optimera din JavaScript-kod: En av de främsta orsakerna till långsamma INP-värden är ineffektiv JavaScript-kod. Genom att optimera din JavaScript-kod och minimera onödiga beräkningar kan du förbättra sidans responsivitet betydligt.

Använd content-visibility för lazy loading: Genom att använda CSS-elementet content-visibility kan du fördröja inläsningen av icke-synliga element på sidan, vilket minskar laddningstiden och förbättrar INP-poängen.

Undvik onödiga JavaScript-filer: Var noga med att endast inkludera JavaScript-filer som är absolut nödvändiga för sidans funktionalitet. Onödiga JavaScript-filer kan öka laddningstiden och därmed påverka INP-nivån negativt.

Använd Real User Monitoring (RUM): Genom att använda RUM-tjänster kan du samla in faktisk användardata och identifiera problemområden på din webbplats som kan orsaka för höga INP-värden. Detta ger dig värdefull insikt i hur användarna interagerar med din webbplats i verkliga scenarier.

Utforska Core Web Vitals-rapporten i Google Search Console: Google Search Console erbjuder en Core Web Vitals-rapport som låter dig övervaka dina sidors INP-värden och identifiera områden som behöver förbättras. Genom att regelbundet granska denna rapport kan du hålla koll på din webbplats prestanda och vidta åtgärder vid behov.

core web vitals från en webb producerad av wasabiweb

Core Web Vitals från en Wasabiweb sajt

Slutsats

Målet med INP är att få tiden från det att en användare initierar en interaktion tills nästa bildruta syns på skärmen är så kort som möjligt, för alla eller de flesta interaktioner som användaren gör.

Övergången från FID till INP markerar ett viktigt steg framåt i mätningen av webbsidans användarupplevelse. Genom att förbereda din webbplats för denna förändring och vidta lämpliga åtgärder för att optimera sidans prestanda och användbarhet kan du säkerställa att den fortsätter att leverera en snabb, responsiv och användarvänlig upplevelse för dina besökare. Med rätt åtgärder och en helhetsinriktad strategi kan din webbplats inte bara uppfylla Googles krav utan också öka dess rangordning och förbättra användarupplevelsen övergripande.

Optimera din webbplats enligt Googles riktlinjer för maximal synlighet och användarupplevelse. Kontakta vår webbyrå idag för att säkerställa att din webbplats håller sig i framkant av webbutveckling och når sina fulla potential i sökresultaten.

Nyhetsbrev

Följ vad som händer på Wasabi Web

Få uppdateringar kring vad som händer på Wasabi Web och få de senaste nyheterna direkt i inkorgen. På så sätt riskerar du inte att missa något viktigt inom digital marknadsföring, design och säkerhet.

  • Prenumerera

Obligatorisk

Flera nyheter

Utmärkelser & media

Redo att öka er digitala försäljning?


Ange era kontaktuppgifter
så kontaktar vi er så snart vi kan

Obligatoriskt
Vi använder reCaptcha för att undvika få in spam.