Speed
Stop scripts holding up the first paint
Some of your scripts load before anything is drawn on screen, so the visitor stares at white space while the browser waits for them.
Why it matters
When a browser meets a script in the page, it stops building the page until that script has downloaded and run. The same happens with stylesheets a page does not immediately need. That is why a site can feel stuck for a second or more even on a fast connection: nothing is being drawn because everything is waiting. The visitor sees a blank screen and decides the site is broken.
How you would notice it
- The page sits blank for a moment, then appears all at once.
- Removing a chat widget or analytics script makes the site visibly faster.
- The site scores badly on speed tests even though the pages are mostly text and images.
What to do
Stage 1
- Find the scripts in your page. Open View Source and look for script tags with a src attribute before the closing head, or anywhere above your main content.
- Add defer to every script that does not need to run before the page is drawn. Most do not, including analytics, chat widgets, and counters.
defer still runs the script in the order it appears, just after the page is ready. This is the safe choice for almost every script.
<script src="/scripts/analytics.js" defer></script>Stage 2
- Use async instead only for a script that is completely independent and does nothing to the page.
async means the script runs the moment it arrives, so it can run before or after other scripts. That breaks anything that depends on another script being ready first.
<script src="/scripts/chat-widget.js" async></script>Stage 3
- Check whether a stylesheet you added is blocking. A print stylesheet or a font stylesheet rarely needs to hold up the whole page.
Only do this for stylesheets that are not needed for the first view. The main stylesheet must load normally, or the page will appear unstyled.
<link rel="preload" href="/styles/print.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/styles/print.css"></noscript>How to check it worked
Confirm it worked
Reload the page with the cache disabled, holding Shift while pressing reload. The content should now appear before the scripts finish, rather than the page appearing all at once. Re-run the Siege Test and confirm the render blocking recommendation is gone.