Trin-for-trin
Åbn Chrome DevTools, fanen Performance, og optag mens du udfører det flow der føles tungt (fx åbn menu, filtrer liste).
Identificér tasks over ca. 50 ms og zoom ind på Main thread for at se hvilket script der dominerer.
Kobl lange tasks til kilder: egen kode, tredjepart, layout thrashing eller store DOM-opdateringer.
Prioritér den største enkeltårsag: split kode, udsæt arbejde, eller fjern tredjepart.
Gentag optagelse med samme flow og sammenlign varighed og antal lange tasks.
Lange tasks er JavaScript-arbejde på main thread der kører i ét stykke uden at give browseren luft til at reagere hurtigt på input. De er et af de mest praktiske spor når INP er dårlig: brugeren klikker, og intet sker med det samme. Denne guide viser en konkret DevTools-arbejdsgang - ikke teori for sig selv.
Du lærer at optage, læse flammen på main thread, og koble observationer til handling: splitte kode, udsætte arbejde, eller fjerne tredjepart. Den forudsætter Chrome eller Chromium-baseret browser med Performance-panelet.
Hvornår denne guide er relevant
Siden reagerer tungt
Menu, filter eller kurv føles som gummi, især på mobil.
Klik føles forsinkede
Især efter at marketing har tilføjet scripts.
Feltdata eller tests peger mod INP problemer
Brug guiden sammen med INP og JavaScript og INP vs FID.
Det skal du bruge før du går i gang
Browser og DevTools
Opdateret Chrome anbefales.
Den rigtige side eller template
Én URL med kendt tung interaktion.
Et realistisk testflow
Det samme flow hver gang du måler - ellers sammenligner du ikke.
Trin 1: Optag en performance profil
Hvad du skal klikke på
Genskab det problematiske flow: åbn mobilmenu, skift fane, tilføj til kurv. Hold optagelsen kort men repræsentativ.
Hvornår du skal stoppe optagelsen
Efter 5-15 sekunder med de handlinger du vil analysere - for lange optagelser bliver sværere at læse.
Trin 2: Find lange tasks
Sådan ser de ud
I Performance-tidslinjen vises main thread som farvede blokke. Meget lange blokke (ofte markeret som «long task») er dit første filter.
Hvad der er normalt og hvad der er for tungt
Korte spikes ved load kan være ok. Gentagne lange blokke under interaktion er typisk dårlige nyheder for INP.
Trin 3: Find årsagen
Egne scripts
Zoom ind og læs kildenavn og funktion. Er det jeres bundle, event handler eller state-update?
Tredjepart
Ser du gtag, fbq, chat-widget eller tag manager? Kobl til fjern eller udsæt tredjeparts scripts.
Event handlers
Tunge handlers på scroll, resize eller input kan skabe mange tasks.
Rendering og layout-arbejde
Store DOM-opdateringer eller forced sync layout kan også fylde - men ofte udløses det af JS.
Trin 4: Vælg den rigtige løsning
Split kode
Mindre chunks, dynamisk import, route-baseret split.
Udsæt arbejde
requestIdleCallback, setTimeout(0), eller flyt ikke-kritisk logik væk fra klik-stien.
Fjern unødigt JavaScript
Døde features og duplikerede biblioteker.
Flyt arbejde væk fra kritisk interaktion
Debounce, batching, eller flyt tung logik til web worker hvor det giver mening.
Trin 5: Test igen
Samme flow
Gentag præcis samme klik-sekvens.
Sammenlign før og efter
Færre og kortere tasks på main thread under interaktion.
Hvad der skal blive bedre
INP i feltdata over tid - ikke kun én lab-kørsel.
Typiske fejl
Man tester kun på hurtig desktop
Mobil CPU er den reelle dommer for INP.
Man ser kun på én task og ikke mønsteret
Én lang task kan være støj; mange under klik er et mønster.
Man optimerer det forkerte script først
Start med den største bidragyder i profilen.
Checkliste
- Lange tasks identificeret under realistisk flow
- Årsag koblet til kode eller tredjepart
- Ny optagelse viser forbedring
Afslutning
DevTools giver dig hvor det gør ondt - resten er prioritering og samarbejde med ejere af kode og tags.
Fortsæt med INP-guiden, tredjeparts guide og baggrunden i INP vs FID.
Relaterede guides
Fjern eller udsæt tunge tredjeparts scripts uden at ødelægge funktionalitet
2026-03-26Følg en praktisk guide til at finde, vurdere og udsætte tredjeparts scripts, så de ikke ødelægger LCP, INP og den samlede brugeroplevelse.
Optimer cookie banner uden CLS og INP problemer
2026-03-24Lær hvordan du bygger eller justerer cookie bannere, så de ikke skubber indhold, blokerer interaktion eller gør siden tungere end nødvendigt.
Forbedr INP ved at reducere JavaScript og lange tasks
2026-03-05Få bedre interaktivitet ved at trimme JavaScript, splitte bundles og fjerne lange tasks, der gør siden langsom at bruge.
Undgå CLS fra fonts: font-display, preload og stabile fallbacks
2026-03-30Læ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-27Fø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-20Lær hvordan du reducerer CLS med faste dimensioner, aspect ratio, stabile embeds og korrekt font loading, så siden ikke hopper under indlæsning.
FAQ
Hvor lang er en lang task?
Browseren markerer tasks der overstiger ca. 50 ms som lange, fordi de kan blokere input og påvirke INP. Det er ikke en dom i sig selv - kontekst og mønster betyder mere end ét tal.
Er alle lange tasks et problem?
Nej. En enkelt lang task ved initial load kan være acceptabel, mens gentagne lange tasks under klik er et INP-problem. Se på hvornår de sker i forhold til brugerhandlinger.
Kan tredjepart skabe dårlig INP alene?
Ja. Analytics, A/B-værktøjer og chat kan køre meget JS på main thread når brugeren interagerer. Brug [guiden om tredjeparts scripts](/guides/fjern-tunge-tredjeparts-scripts/) når kilden er ekstern.
Næste skridt efter guiden
Brug emnesider, ordbog og blog til at validere og uddybe næste ændring.
