How to Eliminate Render-Blocking Resources in WordPress  💥
1. Remove Render-Blocking files in WP with plugin
Although there are several good cache plugins available to do this, I strongly advise to use WP-Rocket for it. The reason for this is the fact that the plugin is very easy to operate and understand. In addition, everything works exactly as it should. There is no free version of this plugin, but it doesn't cost that much and is well worth the money.
Okay, install the plugin via your backend and activate it. This plugin does its job without setting anything in terms of caching files, but to define JS and CSS you have to go to "Settings". Then go to chapter "File Optimization". Just scroll down and mark the boxes to defer. Don't forget to save the settings. See screenshot below.
Screenshot for deferring CSS
As you can see on the screenshot above, there is also an option to use async instead of defer. This plugin has it all and is to easy to use. But always check how your website responds to the diffent options as not all the options can be applied to all different themes with breaking the site.
2. Remove Render-Blocking files in WP with Elementor
A lot of people like to work with Elementor. In case you have the Elementor page builder in your website, you can solve the render-blocking problem right away with it. Even for those who do not yet work with Elementor, it is recommended to install the page builder in your site. This way you solve the render-blocking problem and at the same time you have a top page builder in your site that will make your work easier.
3. Remove Render-Blocking files in WP with Divi Theme
And who doesn't know the Divi Theme yet? For years, the most popular theme for Wordpress has rightly been. You can solve the render-blocking problem right away in Divi itself.
4. Remove Render-Blocking files in HTML site
When working with HTML there are no plugins, Divi or Elementor available and you have to eliminate render-blocking files by hand. In a Wordpress website this would be a lot of work, and everything must also be done via a child theme because otherwise everything would be overwritten with a WP upgrade. How to eliminate render-blocking resources for HTML you can read in another short article from me.
Finding Render-Blocking files
When using a good plugin that does the work for you, there is no real need to find the render-blocking files. Use a plugin when you just quickly want to solve the issues. The fastest way to identify all your render-blocking files is to use the free service on WebPageTest.
To determine the critical rendering path, and to analyze critical resources
- Run a test on WebPageTest, and then click on the "waterfall” image.
- Concentrate on all resources that were requested and downloaded prior to the green "Start Rendering" line.
Once you have identified a render-blocking resource (potentially), test it by removing it. This will allow you to determine if any above-the-fold content is affected. It's possible to remove scripts from files that are critical. This will allow you to see how the site's shifting elements affect your experience.
You can reduce the number of CSS files that you have for non-critical files by compressing and combining them. A file that is faster to download and has a lower impact on your page's rendering speed can be created.
Common Render-Blocking Resources are:
- CSS files
- JS files
- 3rd party code