renderblocking

Render-blocking describes resources that prevent a web page from rendering content until they are loaded and processed. In practice, the term is used to describe CSS and JavaScript that must be retrieved and executed before the browser can paint meaningful content to the screen. The effect is most visible in the time to first paint and the time to interactive, influencing user-perceived performance.

How render-blocking works: during page load, the browser parses HTML from top to bottom. Stylesheets linked in the head are typically render-blocking because the browser needs to apply CSS before it can render the page. JavaScript placed in the head can also block rendering, since it may manipulate the DOM or CSSOM. If a resource blocks parsing or execution, the browser pauses painting, delaying the visible content until the resource is ready.

Impact: render-blocking resources can significantly increase the time to first meaningful paint and time to interactive. This can degrade user experience, especially on slow networks or devices. Performance budgets and Core Web Vitals emphasize reducing render-blocking work to improve perceived speed.

Optimization strategies: minimize and defer blocking resources. Common approaches include inlining critical above-the-fold CSS and loading the remainder asynchronously, deferring or asynchronously loading non-critical JavaScript, and reducing CSS and JavaScript payloads. Techniques include code-splitting, removing unused CSS, minification, and using resource hints such as preload for critical assets, preconnect to required origins, and switching to async or defer for scripts. Server-side rendering and caching can also help by delivering content more quickly.

Tools and metrics: performance profiling tools like Lighthouse and Chrome DevTools help identify render-blocking resources and measure metrics such as First Contentful Paint, Largest Contentful Paint, and Time to Interactive.