About the Render-Blocking Resources Checker
Render-blocking resources are stylesheets and synchronous scripts in the page head that the browser must download and process before it can display anything. This checker runs Lighthouse via PageSpeed Insights on a public URL and lists those files with estimated time savings, along with unused JavaScript and CSS and how many bytes could be saved.
Fixes usually include adding defer or async to scripts that are not needed for the first view, inlining small amounts of critical CSS, loading other styles without blocking, and removing code that a page never uses, which is common with page builders and plugins. Removing render-blocking files mainly helps First Contentful Paint and Largest Contentful Paint. Test after each change, as deferring the wrong file can break layout or features.
How to use it
- Enter a public page URL.
- Review the render-blocking CSS and JavaScript files.
- Check unused JS and CSS and their estimated savings.
- Defer, inline or remove files, then re-test.
Frequently asked questions
What does render-blocking mean?
It means the browser pauses rendering until the file is downloaded and processed. By default, stylesheets and scripts without defer or async in the head are render-blocking. Too many of them delay the moment visitors first see content. Only critical resources should block the first render.
Should I defer all JavaScript?
Most scripts that are not needed to show the first view can use defer, which keeps their order and runs them after parsing. Scripts that other inline code depends on, or that must run early, may need careful handling. Test thoroughly after changing script loading.
How do I remove unused CSS?
Options include splitting styles per template, using a plugin or build tool that removes unused selectors, and avoiding loading entire libraries for a few components. Be careful with styles used only after interaction, such as menus or modals, which automated tools can mistakenly remove.