Render-blocking resources are files, mostly CSS and JavaScript, that the browser has to load and process before it can display page content. MDN notes that render-blocking increases the time until users can see content or interact. Resources blocked by robots.txt are a separate topic.
What does Lighthouse flag?
Lighthouse flags two kinds of URLs as render-blocking:
- a
<script>in the<head>without adeferorasyncattribute - a
<link rel="stylesheet">without adisabledattribute and without amediaattribute that matches the user’s device specifically (media="all"counts as render-blocking)
As of Lighthouse 13, this audit moved into the “Render-blocking requests” insight.
How can the impact be reduced?
For scripts, Lighthouse suggests moving critical code inline, marking non-critical code with async or defer, and removing unused code. web.dev explains that without these attributes the browser blocks parsing and rendering until a script has been downloaded, parsed and executed.
For stylesheets, critical styles can go inline in a <style> block, with the rest loaded asynchronously via preload. Alternatively, styles can be split into files by media query. web.dev also warns that @import makes style sheets late-discovered render-blocking resources, and that a <link> element is usually the better choice.
Example
<script src="app.js" defer></script>
<link rel="stylesheet" href="print.css" media="print">
The script downloads without stopping the HTML parser. The print stylesheet does not hold back the screen display.
Sources
- Render-blocking – MDN Glossarydeveloper.mozilla.org
- Eliminate render-blocking resources – Lighthouse (Chrome for Developers)developer.chrome.com
- Optimize resource loading – web.devweb.dev
Last updated: