Render-blocking resources slow down the perceived page load times of your WordPress site by forcing visitors' browsers to delay rendering above-the-fold content while the browser downloads files that aren't needed right away. In this article, we are going to show you exactly how you can eliminate render-blocking resources on WordPress sites quickly and efficiently.
Render means loading, so if something is render-blocking, it means that it is keeping the page from loading as quickly as it could. Your WordPress site might be taking a toll with slow loading speed if you have too many render-blocking scripts.
When your website takes a long time to load, it will be less favorable to search engines and website visitors.
A fast loading website typically takes under 2 seconds to load (and that should be your ultimate target) when it comes to speeding up your website.
Lucky for you, there are some quick steps you can take to remove render-blocking codes and snippet from WordPress. The task usually involves either one of these:
If you don't know coding, the easiest way is to use the Asset Cleanup plugin. This plugin allows you to enable, disable any files from loading on your page.
In other words, you can control what's being loaded and the lesser files being loaded, the faster your website will load. Using this plugin, you can easily enable or disable the files in just a few clicks/toggle.
Asset CleanUp plugin allows you to perform multiple tasks, including controlling how a file or code snippet would perform either globally (whole site) or just a specific page. If you find Asset CleanUp plugin useful, there is a paid version that offers even more control.
If you want a faster WordPress site, you need to minify and optimize the JS files. One of the easiest way is to use cache plugin — most cache plugin allows you to minify JS files easily and quickly.
At WP Maven, we are a huge fan of WP Rocket and Autoptimize. With used correctly, large files could easily be configured and minimized to reduce the size of it. All in all, making your WordPress site loads faster.
An important step to remember is that WP Rocket and Autoptimize does about the same thing. Therefore, enable optimization in either one of the plugins and not both.
The next step is to use delay loading render-blocking scripts. This can be done quickly with plugins such as Flying Scripts. This particular plugin handles only JS files and could easily delay the loading of the script by seconds.
After installing the plugin, you need to specify the keywords for the plugin to work correctly. For example, specifying the keyword "gtag" or "ga" would allow the plugin to delay loading any scripts with these keywords in it.
You can easily delay the loading between 1 to 10 seconds. Personally, we find delaying 2 to 5 seconds is a nice golden range.
There are many ways you can eliminate render-blocking JS scripts in WordPress. While all of these methods work, deciding on one or two methods is often sufficient to speed up your website.