What Does “Eliminate Render-Blocking Resources” Mean?
In order to understand what render-blocking resources are and why they hurt your site’s load times, we need to start with a basic look at how a web browser renders a web page.
When a visitor lands on your site, their web browser basically starts at the top of your site’s code and reads down. Top-to-bottom, got it?
How to Test If Your Website Has Render-Blocking Resources
To assess whether or not your WordPress site currently has render-blocking resources, you can use Google PageSpeed Insights.
All you do is enter the URL that you want to test. Then, if you have a problem with render-blocking resources, PageSpeed Insights will list each individual resource in the Eliminate render-blocking resources section under Opportunities:
- Choose between Apply Async and Apply Defer in the Quick Settings box.
- If the Async option causes problems on your site, we’d recommend trying Defer or excluding jQuery, which the plugin gives you an option for.
- Check the box to Optimize CSS Code
If you wanted to eliminate even more of those files, you could further use Autoptimize to manually inline your critical CSS. This requires some development knowledge, though, so it’s not something non-developers should try.