Render-blocking resources
What are render-blocking resources?
Render-blocking resources are files a browser must download and process before it can show any of the page — usually stylesheets and scripts loaded at the top of it. Until they arrive, the visitor sees nothing. PageSpeed Insights lists them with an estimate of the time they cost, and removing the delay is development work on the theme or the site’s code.
Example
A WordPress site loads 14 CSS stylesheets and 9 scripts at the top of every page: the theme’s, the slider’s, the contact form’s and those of several more plugins, most of them unused on that page. Together they weigh 600 KB after compression. PageSpeed Insights tests the mobile version on a simulated 1.6 Mbps connection, roughly 200 KB a second, so downloading those files alone takes about 600 ÷ 200 = 3 seconds, and the screen stays empty the whole time.
After the fix, the styles the first screen needs (the critical CSS, about 15 KB) are written straight into the page. The rest of the CSS loads once the page is showing, the scripts carry the defer attribute, and files from plugins the page does not use are not loaded at all. The first paint now waits for 15 KB instead of 600.
Why it matters for a business
Render-blocking files hold back first contentful paint (FCP) and largest contentful paint (LCP), the two moments when a visitor decides whether to stay. On WordPress sites and off-the-shelf themes they are often near the top of the PageSpeed Insights suggestions, which is why owners forward the line to whoever looks after the site. It helps to know that the fix is development, not a switch. An optimisation plugin can combine and defer files, but it can also break a slider, a form or the basket if nobody checks the site page by page.
How to improve it
- Critical CSS: inline the styles for the first screen and load the rest after the page appears.
deferandasyncon scripts:deferruns a script once the HTML has been parsed, keeping the files in order;asyncruns it the moment it arrives. A script the first screen does not need should never hold the page back.- Remove what is unused: plugin and library files loaded everywhere but needed on a single page.
- Minify and compress (gzip or Brotli): smaller files download faster. That shortens the block; it does not remove it.
- Count outside stylesheets too: the Google Fonts stylesheet, for one, is a request to another server before anything appears.
In the PageSpeed Insights report the line now reads “Render-blocking requests”; older reports called it “Eliminate render-blocking resources”. Our website speed optimisation work measures before and after every step, so you can see which change bought which milliseconds.