Kort fortalt: Næsten alt hvad klassiske websites gør i JavaScript - event handlers, hydration, tredjeparts-tags - skal igennem main thread (med undtagelse af begrænset arbejde i workers og visse parallelle tråde). Derfor er “optaget hovedtråd” et præcist billede på mange INP-problemer.
Hvad sker der på main thread?
- Parse og evaluering af scripts
- Style calculation, layout, paint for det meste af siden
- Mange typer input-events før de når jeres kode - hvis tråden er optaget, venter inputkøen
JavaScript der kører længe i ét hug bliver til long tasks og bidrager til TBT i lab.
Symptomer for brugeren
- Forsinket reaktion på klik og tastatur
- Raslende scroll på mobil når CPU er mættet
- Første interaktion efter load føles tung selv om LCP var fin - fordi hydration og widgets stadig kører
Strategier der aflaster
- Opdel arbejde i mindre tasks (
scheduler.postTask,requestIdleCallback,setTimeout-chunking) - Flyt tung beregnings- og parse-arbejde til Web Workers hvor DOM ikke kræves
- Reducér og udskyd third-party scripts
- Code splitting så mindre parse ved første besøg
- Undgå unødvendig layout thrashing - læs og skriv DOM i batch
Måling
Chrome Performance-panelet viser flame charts og Main-sporet. Kombinér med Long Animation Frames og feltdata (RUM) for at se om problemer rammer jeres rigtige brugere.
Relaterede begreber
FAQ
Findes der en nedre grænse for main thread-arbejde?
Ikke som en fast tal-værdi. Moderne browsere paralleliserer noget compositing og paint, men det meste af jeres JS og layout kører stadig serielt på main thread. Brug Performance-profil til konkrete flaskehalse.
Er Web Workers altid løsningen?
De hjælper på CPU-tunge beregninger der ikke kræver DOM. Al manipulation af DOM og de fleste frameworks’ event handlers skal stadig køre på main thread - design API’er så arbejde skilles.
Hvordan hænger main thread sammen med INP?
INP måler forsinkelse på interaktioner. Hvis main thread er optaget af lange tasks, forsinkes input. Derfor korrelerer reduktion af long tasks og tredjeparts JS ofte med bedre INP.
Hvad med input delay vs load?
Load-metriker som TBT fokuserer på startfasen. INP dækker hele sessionen - main thread kan stadig være tung efter load ved hydration, lazy chunks og widgets.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Fjern eller udsæt tunge tredjeparts scripts uden at ødelægge funktionalitet
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
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
Lær hvordan du bygger eller justerer cookie bannere, så de ikke skubber indhold, blokerer interaktion eller gør siden tungere end nødvendigt.
Hvordan tredjeparts scripts gør din hjemmeside langsom
Få overblik over hvordan chat widgets, tracking, consent, video embeds og andre tredjeparts scripts påvirker LCP, INP, CLS og TTFB.
Cookie banner og Core Web Vitals: den oversete årsag til dårlig brugeroplevelse
Se hvordan cookie bannere og consent scripts kan påvirke load, layout og interaktion, og lær hvordan du undgår at de ødelægger brugeroplevelsen.
5 grunde til at din hjemmeside er langsom og hvad du gør ved det
Se de mest almindelige årsager til en langsom hjemmeside, hvordan du spotter dem, og hvilke ændringer der typisk giver mest effekt først.
