Render-blocking resources
What are render-blocking resources?
Render-blocking resources are files, mainly CSS stylesheets and synchronous JavaScript in the head of a page, that a browser must download and process before it can draw anything on screen. Until they arrive, the visitor sees a blank page, even if the HTML has already loaded.
Stylesheets block rendering by default, because the browser does not want to show unstyled content. Scripts in the head without async, defer or type="module" block the HTML parser, because a script might change the page. Each blocking file adds at least one network round trip before the first paint, and more if it loads further files such as fonts or imported CSS.
Why render-blocking resources matter for SEO
Render-blocking resources delay First Contentful Paint and Largest Contentful Paint, which is a Core Web Vital. They hurt most on mobile networks, where each round trip takes longer. Lighthouse and PageSpeed Insights report them as a performance opportunity, with an estimate of the time you could save.
How to eliminate render-blocking resources
- Find them in the Lighthouse or PageSpeed Insights report, which lists each blocking request.
- Add defer to scripts that do not need to run before the page is shown, or async for independent scripts such as analytics.
- Inline the small amount of critical CSS needed for the first screen in the head, and load the rest without blocking.
- Use media attributes so print or large-screen stylesheets do not block other devices.
- Remove unused CSS and JavaScript, and cut third-party scripts in the head.
- Self-host or preload key fonts and use font-display: swap so text shows while fonts load.
Render-blocking resources example
<head>
<!-- Blocking: the browser waits for these -->
<link rel="stylesheet" href="/css/all.css">
<script src="/js/app.js"></script>
<!-- Not blocking -->
<style>/* critical CSS for the first screen */</style>
<link rel="stylesheet" href="/css/print.css" media="print">
<script src="/js/app.js" defer></script>
<script src="/js/analytics.js" async></script>
</head>Render-blocking resources FAQ
What is the difference between async and defer?
Both download the script without blocking the HTML parser. async runs the script as soon as it arrives, in any order; defer waits until the HTML is parsed and runs scripts in order.
Is all CSS render-blocking?
Stylesheets that apply to the current device block rendering by default. Stylesheets with a non-matching media attribute, such as print, do not block the first render.
Related SEO terms
Page speed is how quickly a page loads, shows its content and responds to input. Google measures it mainly through Core Web Vitals.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) is a Core Web Vital that measures when the largest image or text block in the viewport appears. Good is 2.5 seconds or less.
Core Web Vitals are Google’s three metrics for real-world page experience: Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift.
Lighthouse is Google’s open-source tool that tests a page in a lab and scores its performance, accessibility, best practices and SEO.
PageSpeed Insights is Google’s free tool that shows a page’s real-user Core Web Vitals and a Lighthouse lab test with suggestions, for mobile and desktop.
JavaScript SEO is the work of making sure search engines can crawl, render and index content and links that a site builds with JavaScript.