Render-blocking resources are files that stop the browser from rendering content to the screen. The browser must download and process these files before displaying anything, delaying the time until users see the page. and synchronous JavaScript in the document head are the most common render-blocking resources.
How Render-Blocking Works
When parsing HTML, the browser builds the DOM tree. If it encounters a synchronous script, parsing stops until the script downloads and executes. CSS blocks rendering by default because the browser needs styles to display content correctly, preventing a flash of unstyled content.
Lighthouse flags render-blocking resources in the head that lack async or defer attributes for scripts, or lack media queries that exclude the current device for .
Render-Blocking vs Parser-Blocking
Render-blocking resources prevent visual display but allow HTML parsing to continue. CSS is render-blocking by default. Parser-blocking resources stop both rendering and HTML parsing. Synchronous JavaScript is parser-blocking, which is more severe because it prevents the browser from processing any resources that follow.
Solutions
For JavaScript: Add the async attribute to download scripts during parsing and execute when ready. Use defer to download during parsing but execute after parsing completes. Inline small scripts that must run immediately.
For CSS: needed for above-the-fold content directly in the HTML head. Load remaining styles asynchronously using with onload handlers. Add media attributes to stylesheets that only apply to specific devices or conditions.
General approaches: Minify all resources to reduce download time. Use a for faster delivery. Remove unused CSS and JavaScript entirely.
