Render-Blocking Resources

Render-blocking resources are external CSS stylesheets and synchronous JavaScript files that the browser must fully download and process before it can paint any visible content to the screen, directly increasing metrics such as First Contentful Paint and Largest Contentful Paint. By default, any <link rel="stylesheet"> in the document head and any <script> tag without the async or defer attribute will block rendering. Lighthouse flags render-blocking resources as a performance opportunity and estimates the potential savings in seconds. Common remediation strategies include inlining critical CSS for above-the-fold content, loading non-critical styles asynchronously using media attribute tricks or JavaScript, adding defer or async to non-essential scripts, and using HTTP/2 or HTTP/3 to reduce the overhead of multiple requests. Eliminating unnecessary render-blocking resources is one of the most impactful changes a developer can make to improve Core Web Vitals scores.