Core Web Vitals 2026: INP-optimering för komplexa React-appar

De flesta team har lärt sig att klara LCP och CLS - laddningstid och layoutstabilitet är välkända problem med kända lösningar. Men INP, Interaction to Next Paint, är ett annat djur, och det är där komplexa React-appar oftast fastnar. INP mäter hur snabbt sidan svarar när användaren faktiskt gör något - klickar, skriver, öppnar en meny - och en tung React-app kan ladda snabbt men ändå kännas trög så fort man rör den. Den här guiden handlar om att få ner just det måttet.

Vad INP faktiskt mäter

INP tittar på fördröjningen mellan en interaktion och nästa gång skärmen uppdateras som svar. Om du klickar på en knapp och det tar 300 millisekunder innan något händer på skärmen, är det din INP. Till skillnad från laddningsmått handlar det här om hela sessionen, inte bara första intrycket - och det är därför det är svårt. Problemet uppstår mitt i användningen, inte vid start.

Den vanligaste orsaken är att huvudtråden är blockerad. JavaScript körs på en enda tråd, och medan den tråden är upptagen med att räkna kan den inte rita om skärmen. En tung omrendering eller en dyr beräkning som triggas av ett klick blockerar svaret. Att hitta dessa flaskhalsar är ofta det första jag gör i ett prestandauppdrag inom webbutveckling.

Mät verkliga användare, inte bara labbet

Ett vanligt misstag är att enbart titta på syntetiska tester i en snabb labbmiljö. INP är ett fältmått - det är de verkliga användarnas upplevelse på deras enheter som räknas, och en låg end-telefon beter sig helt annorlunda än din utvecklardator. Samla in fältdata från riktiga användare och titta på den långsamma svansen, inte medianen. Det är de värsta interaktionerna för de svagaste enheterna som drar ner ert betyg.

Bryt upp långa uppgifter

När du hittat en interaktion som blockerar tråden är grundgreppet att dela upp arbetet. Behöver allt verkligen ske direkt vid klicket, eller kan en del skjutas upp tills skärmen hunnit rita om? React har verktyg för det här - att markera vissa uppdateringar som mindre brådskande så att ett knapptryck känns omedelbart medan det tunga arbetet sker strax efter. Ofta räcker det att flytta en dyr beräkning bort från den synkrona klickhanteraren för att INP ska falla dramatiskt.

Mindre JavaScript är fortfarande den bästa medicinen

Det enklaste sättet att inte blockera tråden är att ha mindre kod som körs på den. Skicka mindre JavaScript till klienten, ladda tunga delar först när de behövs, och flytta arbete till servern där det går - med Server Components hamnar mycket logik aldrig i webbläsaren alls. INP-optimering hänger på så vis ihop med hela arkitekturen: en app som skickar mindre till klienten har färre INP-problem från början.

Optimera det användarna faktiskt gör

Till sist - jaga inte ett perfekt betyg på sidor ingen interagerar med. Lägg energin på de interaktioner som sker oftast och betyder mest: söket, formuläret, den centrala knappen. Att förbättra INP på era tre viktigaste interaktioner ger mer verklig nytta än att finputsa marginalfall. Hur en sådan prioritering ser ut visar jag i kundcase.

Relaterat

• React Server Components i produktion: Vad som faktiskt funkar 2026
• Monorepo med Turborepo: Dela kod mellan Next.js och React Native
• Testing-pyramid för Next.js: Unit, integration och E2E med Playwright

Vill du ta det vidare?

Jag hjälper team att få ner INP i komplexa React-appar - genom att hitta vad som blockerar tråden och åtgärda det som faktiskt påverkar användarna. Boka ett samtal så tittar vi på era mätvärden.