Render-Blocking Resources

Render-blocking resources are files, usually CSS stylesheets and synchronous JavaScript in the page head, that the browser must download and process before it can display anything. Until they finish, visitors see a blank screen, which delays key loading metrics.

Written by Paul Hoda, SEO consultant since 2005. Last updated 8 November 2026.

Why browsers block rendering

When a browser reads HTML, it builds the page step by step. Stylesheets block rendering because the browser does not want to show unstyled content and then redraw it. Classic <script> tags without async or defer block too, because the script might change the page, so the browser pauses to download and run it first. Each blocking file adds a round trip to the server before the first paint.

Why they matter for SEO

Render-blocking files directly delay First Contentful Paint.

They often delay Largest Contentful Paint too, because the main image or heading cannot appear before the page starts rendering.

LCP is one of the Core Web Vitals, which form part of Google’s page experience signals. Slow first paints also make people leave before the page appears. The effect is greatest on mobile connections, where each extra request takes longer.

How to find them

  1. Run a page through Lighthouse or PageSpeed Insights and look for the render-blocking requests diagnostic, which lists the files and estimated savings.
  2. Open the browser developer tools, record a performance profile and see which files load before the first paint.
  3. Use the Coverage tab in Chrome developer tools to see how much of each CSS and JavaScript file is actually used on that page.

How to fix them

  • Defer scripts: add defer to scripts that can run after the HTML is parsed, or async to independent scripts such as analytics.
  • Inline critical CSS: place the small set of styles needed for content above the fold directly in the head, then load the full stylesheet without blocking. Critical CSS is the minimum styling needed to display what a visitor sees first.
  • Remove unused code: stop loading plugin or theme files on pages that do not need them.
  • Split CSS by media: stylesheets marked with a media query, such as print styles, do not block rendering for screens.
  • Shrink files: use minification so blocking files are smaller.
  • Compress transfers: serve CSS and JavaScript with Brotli compression so they download faster.
  • Handle fonts carefully: preload key font files and use font-display: swap so text is not hidden.

Common mistakes

Deferring everything blindly can break pages, for example when a script that other code depends on runs too late. It can also cause a flash of unstyled content if all CSS is loaded asynchronously without critical styles inlined. Test changes on real templates, check that menus, forms and tracking still work, and remember that removing a file entirely beats deferring it. On WordPress, performance plugins can automate much of this, but their settings still need checking page by page.

Key Takeaways

  • Render-blocking resources stop the browser painting until they load.
  • Stylesheets and synchronous scripts in the head are the main offenders.
  • They delay FCP and LCP, especially on mobile connections.
  • Lighthouse and PageSpeed Insights list them with estimated savings.
  • Defer scripts, inline critical CSS and remove unused files, then test carefully.

Related Terms

Want to know where your site stands? Book a free SEO health check, or keep learning in the SEO Encyclopedia.