Async er et HTML-attribut på et eksternt JavaScript-tag: <script async src="…"></script>. Browseren kan hente filen parallelt med HTML-dokumentet, men stopper HTML-parseren kortvarigt og udfører scriptet, så snart downloadet er færdigt. Det kan reducere ventetid for et selvstændigt script, men udførelsestidspunktet er bevidst uforudsigeligt.

Async, defer og den kritiske rendering

Et almindeligt script uden attribut kan blokere browserens HTML-parser, mens filen hentes og køres. Async undgår ventetiden under hentningen, men scriptet kan stadig afbryde parsing på det tidspunkt, hvor det bliver klar. Med defer hentes filen også parallelt, men kører først efter HTML’en er parsed — og flere defer-scripts bevarer rækkefølgen.

Det gør async til et dårligt standardvalg for temaets JavaScript, jQuery-afhængige plugins og kode, der forventer en færdig DOM. Brug det i stedet til et script, der virkelig kan stå alene, eksempelvis en måling, en annonceintegration eller en widget, som først aktiveres senere. Selv der skal man vurdere, om scriptet bør vente til samtykke eller brugerinteraktion.

Async i WordPress

WordPress indlæser scripts gennem enqueue-systemet, hvor afhængigheder og placering typisk er registreret. Et optimeringsplugin, der blindt tilføjer async til alle filer, kan derfor bryde menuer, formularer, checkout eller editorfunktioner. Start med en kort liste over scripts, der må være uafhængige, og undtag resten.

  • Bevar afhængigheder mellem tema, plugins og biblioteker med defer eller normal indlæsning.
  • Udskyd ikke cookie-samtykke eller sikkerhedskritiske scripts uden at teste deres krav.
  • Indlæs chat, video, kort og marketing-tags efter samtykke eller første interaktion, når det er muligt.
  • Fjern scripts, der ikke giver målbar værdi, frem for kun at flytte deres indlæsning.

Sådan måler og retter du

Åbn Chrome DevTools’ Network-panel med cache slået fra. Kontroller både downloadtid og rækkefølgen af scriptets eksekvering i Performance-panelet. Google PageSpeed Insights kan pege på JavaScript, der bidrager til blokeret hovedtråd, men testen viser ikke, om async er kompatibelt med din kode.

Test derfor hver ændring på mobil, i inkognito og gennem centrale flows: navigation, søgning, formularer, indkøbskurv og cookie-banner. Sammenlign Total Blocking Time og fejl i browserkonsollen før og efter. Hvis effekten udebliver, er scriptet måske ikke flaskehalsen; mindre JavaScript eller senere aktivering er ofte den bedre løsning.