Render-Blocking Resource

A render-blocking resource is one the browser must process before it can perform the page's initial render under the current conditions. Stylesheets that match the active media conditions are render-blocking by default because the browser needs the CSS object model to construct the render tree. Synchronous scripts can block HTML parsing and may also wait for earlier stylesheets. Images and fonts can affect visible loading but are not automatically render-blocking in the same sense.

Why it matters: Use a performance trace for the actual page and viewport to identify requests on the initial critical path and measure their effect on First Contentful Paint or Largest Contentful Paint. Remove unused code, keep necessary first-paint CSS small and available early, apply accurate media conditions, and load scripts with `defer`, `async`, modules, or later execution only when their ordering and behavior permit it. Inlining a small critical subset can remove a request, but broad inlining can duplicate bytes, weaken caching, complicate security policy, or cause unstyled content and maintenance bugs. Test cold and repeat visits, responsive states, JavaScript behavior, and visual correctness after each change. The goal is a shorter critical path and better user timings, not simply a tool audit with zero flagged requests.