Kort fortalt: Uden attribut henter og kører browseren klassisk script synkront - det blokerer HTML-parsing (render-blocking adfærd for scripts). defer og async ændrer hvornår filen hentes og hvornår den evalueres.
defer
- Download parallelt med HTML-parse.
- Eksekvering efter dokumentet er parset (før
DOMContentLoaded-lignende timing - se browserdocs for præcis rækkefølge). - Bevarer rækkefølge mellem flere defer-scripts i dokumentet.
Brug til det meste moderne bundler-output og tredjepart der ikke skal køre før DOM findes - men hvor rækkefølge stadig betyder noget.
async
- Download parallelt.
- Eksekveres så snart filen er hentet - kan afbryde parse kortvarigt når det lander.
- Ingen garanti for rækkefølge mellem flere async-scripts.
Brug til uafhængige scripts (fx visse analytics) hvor I ikke har afhængigheder - og hvor tidlig kørsel ikke ødelægger INP ved at fylde main thread i kritisk øjeblik.
Hverken defer, async, eller inline?
Gamle “footer scripts” var et manuelt defer-mønster. I dag: foretræk defer på bundler-output medmindre I har en konkret grund til async - og dokumentér hvorfor.
Typiske fejl
- To scripts hvor B afhænger af A - begge
async→ race condition. - Kritisk inline der forventer et library allerede loaded, men library er
defer→ kør efterDOMContentLoadedeller brug bundler til at samle afhængigheder. - At tro scripts er det eneste der blokerer - CSS og synkrone XHR/fetch i starten kan også skade LCP.
Relaterede begreber
FAQ
Hvad med type="module"?
Module-scripts defer’es som standard og kører i strict mode. Moderne build-output bruger ofte type="module" - tjek stadig rækkefølge og afhængigheder.
Kan defer erstatte critical CSS?
Nej. CSS filer blokerer typisk rendering indtil de er tilgængelige - det er et separat spor fra script-defer. Se [critical CSS](/ordbog/critical-css/) og [render-blocking](/ordbog/render-blocking/).
Hvornår er async farligt?
Når script B afhænger af script A og begge er async - I får race conditions. Brug defer med garanteret rækkefølge eller bundl i ét modul med korrekt importgraf.
Blokerer inline scripts?
Klassiske inline scripts uden defer/async parser-blokerer stadig medmindre I bruger module eller placerer strategisk. Tredjeparts snippets der kræver bestemt placering skal følge leverandørens dokumentation.
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.
Sådan læser du en waterfall og finder flaskehalse i load
Lær at læse en waterfall korrekt og find problemer med TTFB, LCP, render blocking og tredjepart, så du kan prioritere den rigtige optimering.
