Defer render-blocking scripts
Sync scripts in <head> delay first paint. Defer or async anything that is not required to render. Follow the steps below on your stack, then re-check the live URL.
Sync scripts in <head> delay first paint. Defer or async anything that is not required to render.
Wir merken uns das in diesem Browser, damit die nächste Anleitung denselben Stack verwendet.
At a glance
| Time | ~15 min |
|---|---|
| Category | Performance |
| Steps | 3 |
| Stacks | WordPress, Shopify, Webflow, Next.js, HTML, more |
Schritte
Add defer to scripts that can wait until HTML is parsed.
Use async for independent third-party tags (ads, analytics).
Move leftover blocking scripts to the end of <body> if defer causes issues.
In HTML / static
Add defer or async on scripts. Combine CSS. Set width/height on images.
Snippet
<script src="/analytics.js" defer></script>
FAQ
- What does “Defer render-blocking scripts” fix?
- Sync scripts in <head> delay first paint. Defer or async anything that is not required to render.
- How long does this usually take?
- About 15 minutes on most CMS and code stacks when you already have access to edit the page.
- Where do I start?
- Start with: Add defer to scripts that can wait until HTML is parsed. Then use the platform picker on this page for placement notes.