Glossary entry

Async Swap

Async-Swap is the pattern you see when a stylesheet link looks like this in the head:

```html

```

The browser fetches the file but treats it as print-only, so it doesn't add to the [render-blocking](/glossary/render-blocking/) queue that gates first paint. The moment the file finishes downloading, the `onload` handler flips `media` back to `all` and the rules apply to the live page. Pair it with a `` fallback so the stylesheet still loads for the small number of visitors running with JavaScript disabled.

In a WordPress build I usually see Async-Swap deployed alongside inlined [critical-css](/glossary/critical-css/): the first 14 KB carries the above-the-fold rules so [lcp-largest-contentful-paint](/glossary/lcp-largest-contentful-paint/) lands inside the budget, and everything else — block-library styles, theme component styles, plugin CSS — comes in via the swap so it doesn't delay first paint. The trade-off is real: there's a brief window where the page is rendered against critical-CSS only, and any non-critical rule that affects layout can produce [cls-cumulative-layout-shift](/glossary/cls-cumulative-layout-shift/) when it lands. Audit for that before shipping. When I find this pattern in a theme I'm reviewing, it usually means someone has done the byte work properly; when I find it missing on a theme shipping 200 KB of CSS through the head, it's the first thing the [byte-ledger](/glossary/byte-ledger/) flags.

No published articles use Async Swap yet.

When new articles use this term, they will appear here.