What Render-blocking resources means
If a page waits on several large files before showing anything, visitors stare at a blank screen. Deferring non-essential scripts and inlining critical styles lets content appear sooner. This is a frequent finding in speed audits.
Why it matters for your website
When the browser has to wait on scripts and stylesheets, visitors stare at a blank screen. Cutting down render-blocking files helps your page appear sooner, which keeps people from leaving. It's one of the most common items in speed reports.
Example
A craft store's site loads chat, slider and social sharing scripts in the head of every page. Moving them to load later lets the page content show up much faster.
Tips
- Add defer or async to scripts that don't need to run before the page shows.
- Inline the small amount of CSS needed for the top of the page.
- Remove scripts and styles that aren't used on a given page.
Common mistakes
- Deferring scripts without testing, which can break menus, forms or sliders.
- Loading every plugin's CSS and JavaScript on every page, even where it isn't used.
Questions about Render-blocking resources
What is Render-blocking resources?
Scripts and stylesheets the browser must load before it can display the page.
How do I find render-blocking resources on my site?
Run your page through PageSpeed Insights or Lighthouse. They list scripts and stylesheets that delay the first paint, along with estimated savings.
What is the difference between async and defer?
Both download scripts without blocking the page. Async runs the script as soon as it downloads, while defer waits until the HTML is parsed and keeps scripts in order.
