Forbedr INP ved at reducere JavaScript og lange tasks

Målet

At gøre klik/tap mere responsivt ved at reducere arbejde på main thread.

På mange sites opleves problemet sådan: siden “loader”, men når brugeren klikker, er der forsinkelse før UI reagerer. Det er typisk et INP-problem, og ofte skyldes det for meget JavaScript tidligt eller for tung kode i event handlers. Denne guide er handlingsorienteret: den erstatter ikke blogartiklen om INP vs FID, men bygger videre på den med konkrete trin du kan udføre i kodebasen og i tag-manager.

Før du går i gang

• Vælg 1–2 kritiske flows (fx mobilmenu, produktfilter, kurv) - optimer dem først.
• Sørg for at du kan måle i DevTools Performance (optagelse under reel interaktion).
• Hvis du bruger et tag-management-system, dokumentér hvilke tags der skyder scripts ind - ofte er det her tredjepart skjuler sig.
• WordPress og page builders: hvert plugin kan tilføje globale scripts. Tjek med Coverage/Performance om aktive plugins på alle sider er nødvendige; brug betinget indlæsning hvor tema tillader det, og undgå kombinationen «tung slider + mange widgets + fuld tracking» på samme skabelon uden måling.

Hvad du bør måle før du ændrer noget

Før du optimerer, skal du have et baseline:

• Hvilke interaktioner føles langsomme? (menu, filter, søgning, formular)
• Hvilke sider er vigtigst for brugerne? (landingssider, guides, kontakt)
• Er problemet værst på mobil?

Brug:

• DevTools Performance (trace under interaktion)
• PageSpeed Insights/Lighthouse som supplerende signal
• Eventuelt RUM, hvis du har det

Trin-for-trin

1. Find tunge scripts (DevTools Coverage, Performance panel)
2. Fjern eller udskift store biblioteker der ikke er kritiske
3. Split kode så kun det nødvendige loader på den aktuelle side
4. Skub tredjeparts scripts til efter interaktion eller efter load

Trin 1: Find tunge scripts og long tasks

I DevTools Performance:

• optag en trace
• udfør en relevant interaktion
• find long tasks omkring interaktionen

Det du leder efter er:

• tung script evaluation
• event handlers der bruger for lang tid
• layout/style recalculation i loops

Trin 2: Fjern eller erstat tunge dependencies

Mange sites har dependencies der fylder meget, men bruges lidt.

Typiske syndere:

• store date-libraries
• komplette utility-libraries hvor kun få funktioner bruges
• tunge UI-komponentpakker

Praktisk:

• fjern det du ikke bruger
• erstat med mindre alternativer
• undgå “import alt”

Trin 3: Split kode konsekvent

Code splitting bør ske på:

• route-niveau (hent kun JS til den aktuelle side)
• feature-niveau (fx filter, søgning, modal)

Målet er at initial load kun indeholder det nødvendige for første visning og første interaktion.

Trin 4: Udskyd tredjepart

Tredjepart er ofte den største INP-bremse.

Praktisk:

• load tracking efter consent
• load chat først når brugeren åbner den
• begræns AB-test scripts på sider hvor de ikke er kritiske

Ekstra optimering (når basis er på plads)

Optimer event handlers

• debounce input-events (søgning)
• throttle scroll-events
• undgå tunge operationer i click handlers

Undgå unødvendige re-renders

• memoization hvor det giver mening
• undgå global state-opdatering for små lokale ændringer

Flyt arbejde væk fra main thread

• web workers til tung beregning (filtrering af store lister, tunge JSON-transform)
• requestIdleCallback til ikke-kritiske opgaver - men brug det ikke til ting der skal ske før brugerinteraktion

Realistisk forventning: Workers og idle-callbacks er nyttige, men de fleste INP-gevinster kommer fra mindre JS og færre tredjeparts scripts i kritisk path - ikke fra mikrooptimering alene.

Sådan kontrollerer du resultatet

1. Optag en ny Performance-trace på de samme interaktioner som før - long tasks skal være kortere eller færre.
2. Kør PageSpeed Insights i felt (hvis I har nok trafik) og følg Search Console over uger.
3. Test på mobil med throttling; INP forbedres ofte mest på svage enheder.
4. Regressionstest: checkout, formular og analytics må ikke være i stykker efter udskudte scripts.

Praktisk checkliste før du går live

• Kritiske interaktioner er målt før/efter
• Bundle-størrelse er reduceret eller splittet
• Tredjepart i critical path er minimeret
• Long tasks er reduceret i interaktionstraces
• Mobiltest er gennemført (ikke kun desktop)

Tjekliste

• Ingen store bundles uden code splitting
• Tredjepart minimeret
• Long tasks reduceret

Relateret

• Ordbog: Long task, JavaScript bundle, code splitting
• Guide: Fjern render-blocking (hvis meget JS blokerer første render)
• Blog: Sådan læser du en waterfall

Relaterede guides

Fjern eller udsæt tunge tredjeparts scripts uden at ødelægge funktionalitet

2026-03-26

Følg en praktisk guide til at finde, vurdere og udsætte tredjeparts scripts, så de ikke ødelægger LCP, INP og den samlede brugeroplevelse.

Sådan finder du lange tasks i DevTools og forbedrer INP

2026-03-25

Lær hvordan du bruger DevTools til at finde lange tasks, tunge event handlers og JavaScript der gør siden træg at bruge.

Optimer cookie banner uden CLS og INP problemer

2026-03-24

Lær hvordan du bygger eller justerer cookie bannere, så de ikke skubber indhold, blokerer interaktion eller gør siden tungere end nødvendigt.

Undgå CLS fra fonts: font-display, preload og stabile fallbacks

2026-03-30

Lær at undgå layout-hop (CLS) fra webfonts med font-display, fallback-strategi og korrekt preload. Guiden er til dig der vil have pæn typografi uden at ødelægge stabilitet.

Sådan fejlsøger du LCP fra start til slut

2026-03-27

Følg en praktisk arbejdsgang til at finde årsagen til høj LCP, fra serverrespons og render blocking til billeder, prioritering og netværksrækkefølge.

Fix CLS: sådan gør du layout stabilt uden hop i indholdet

2026-02-20

Lær hvordan du reducerer CLS med faste dimensioner, aspect ratio, stabile embeds og korrekt font loading, så siden ikke hopper under indlæsning.

FAQ

Hvad er den hurtigste måde at forbedre INP på?

På de fleste sites flytter det mest at reducere JavaScript i critical path og udskyde tredjeparts scripts. Start med de interaktioner brugeren rammer først, og mål før/efter i DevTools Performance.

Skal jeg fjerne mit framework for at få god INP?

Nej. Du kan ofte få store forbedringer med code splitting, færre dependencies og mindre hydration. Framework-skift er sjældent første skridt.

Hvorfor er INP dårligere på mobil end desktop?

Mobilenheder har ofte lavere CPU-kapacitet, så parsing og execution af JavaScript tager længere tid. Derfor bliver long tasks tydeligere på mobil.

Næste skridt efter guiden

Brug emnesider, ordbog og blog til at validere og uddybe næste ændring.

Se relaterede emnerLæs forklarende blogindlægTjek begreber i ordbogSe hele ordbogen (A–Å)