Identify Render-Blocking Resources

Render-blocking resources are CSS and JavaScript files that prevent the browser from displaying any content until they have fully downloaded and executed. Every render-blocking resource adds latency to your First Contentful Paint, meaning users stare at a blank screen longer.

Lighthouse identifies every resource that blocks rendering and estimates how much time each one adds. Common offenders include large CSS frameworks loaded synchronously, non-critical JavaScript in the document head, and third-party scripts that load before your own content.

The fixes are well-understood: inline critical CSS, defer non-critical stylesheets, add async or defer attributes to scripts, and use resource hints like preload and prefetch. ToolRouter's audit surfaces exactly which resources to target, making optimization straightforward rather than guesswork.