What are render-blocking resources?
Answer
Render-blocking resources prevent the browser from painting any content until they are downloaded and processed. CSS files are render-blocking by default — the browser needs all CSS to build the CSSOM before rendering. JavaScript files without async or defer are parser-blocking — they pause HTML parsing and must execute before parsing continues. How to fix: Defer non-critical CSS: load with <link rel="preload" as="style"> and then set as stylesheet in onload. Or use CSS media queries: <link rel="stylesheet" href="print.css" media="print"> — print CSS doesn't block screen rendering. Use async/defer on scripts: <script defer src="app.js"> — defer executes after HTML parsing, maintains order. <script async src="analytics.js"> — async executes as soon as downloaded, any order. Inline critical CSS: put above-the-fold CSS directly in <style> tags. Module scripts: <script type="module"> are deferred automatically. Use Chrome DevTools Coverage tab to identify unused CSS/JS that can be removed.