To eliminate render-blocking resources in WordPress, defer or delay non-critical JavaScript, load only the CSS each page needs and remove scripts and styles you do not use. Render-blocking resources are files that stop the browser from showing your page until they finish loading. Find yours with our free website speed test.
Key takeaways
- Render-blocking resources are mostly CSS and JavaScript files in the page head that delay the first paint.
- Deferring JavaScript and trimming unused CSS fixes most warnings.
- Do not block or break critical styles, or your page may flash unstyled content.
- Test again after each change and check the page on mobile.
What are render-blocking resources?
Render-blocking resources are CSS and JavaScript files that the browser must download and process before it can display the page. While they load, visitors see a blank screen. Lighthouse reports them in the performance results, and the audit has been called Eliminate render-blocking resources and, in newer versions of the tool, Render blocking requests.
Why do render-blocking resources slow down WordPress?
WordPress themes and plugins often add their own CSS and JavaScript files to the head of every page, whether the page needs them or not. Each file adds a request and a delay before the first paint. The result is a slower First Contentful Paint and Largest Contentful Paint, and a lower PageSpeed score.
How do you find render-blocking resources?
You find them by running a speed test and opening the render-blocking item in the results.
- Run your page through our free page speed checker.
- Open the performance diagnostics and find the render-blocking warning.
- Note the file names and which plugin or theme each one comes from.
- Mark which files are needed for the visible top of the page.
How do you eliminate render-blocking resources in WordPress?
1. Defer JavaScript
Deferring tells the browser to run a script after the page content has been parsed, so it no longer blocks rendering. Most optimization plugins have a defer JavaScript option. Enable it, then test your site for broken features.
2. Delay non-essential JavaScript
Delaying holds scripts such as chat widgets and trackers until the visitor interacts with the page. This helps when third-party scripts are the main blockers.
3. Load only the CSS each page needs
Many themes and plugins load all their styles everywhere. Use your optimization plugin or a plugin manager to load styles only on pages that use them.
4. Inline critical CSS
Critical CSS is the small set of styles needed for the visible top of the page. Placing it directly in the HTML lets the page render right away while the full stylesheet loads afterward. Many caching and optimization plugins can generate it automatically.
5. Remove unused CSS and JavaScript
Disable theme features, widgets and plugins you do not use. Removing code is faster and safer than trying to optimize it.
6. Minify and combine carefully
Minifying removes extra characters from files. Combining files can help on older setups, but on modern HTTP/2 hosting it often gives little gain and can cause problems, so test before keeping it.
7. Optimize web fonts
Use fewer font families and weights and set font-display to swap, so text appears in a fallback font while the custom font loads.
Which WordPress plugins help with render-blocking resources?
Caching and optimization plugins such as WP Rocket, LiteSpeed Cache and Autoptimize include options for deferring JavaScript, delaying scripts and generating critical CSS. Use only one optimization plugin at a time, because overlapping plugins can conflict and break your layout.
What if fixing render-blocking resources breaks my site?
If your layout or features break, undo the last setting you changed and exclude the affected file from optimization. Common problem files include sliders, menus and form scripts. Change one setting at a time and check the page on mobile and desktop after each change.
Frequently asked questions
Should I remove all render-blocking resources?
No. Some CSS is needed to display the page correctly. The goal is to remove what is not needed for the first view and to load the rest without blocking.
What is the difference between defer and async?
Both load a script without blocking the page. Async runs the script as soon as it downloads, in any order, while defer runs scripts in order after the page is parsed. Defer is usually safer for WordPress scripts that depend on each other.
Will fixing render-blocking resources improve my score?
Usually yes, because it improves First Contentful Paint and often Largest Contentful Paint. The size of the gain depends on how many files were blocking the page.
Why is the warning still there after I enabled defer?
Some files may be excluded from optimization, or a theme may load them in a way the plugin cannot change. Check which files remain in the report and handle them one by one.
Do I need a plugin to fix this?
Not always, but a plugin makes it much easier. Manual fixes need code changes in your theme, which carry more risk.
Conclusion
Eliminating render-blocking resources in WordPress comes down to deferring scripts, loading only needed CSS and removing code you do not use. Make one change at a time and re-test with our free website speed test. For the full list of fixes, read our guide on how to improve website speed, and see how to fix LCP in WordPress for related loading fixes.
