If you’ve checked how fast your website is on tools like Google PageSpeed Insights or GTmetrix, you might have seen a message that says “Eliminate render-blocking resources.”
When you use PageSpeed Insights, the message looks like this: [Visual representation of the message]
In this article, I’ll explain what render-blocking resources are and how you can get rid of them from your WordPress site.
Getting rid of these render-blocking resources is really important to make your WordPress site load faster.
What Does “Eliminate Render-Blocking Resources” Mean?
Usually, the JavaScript and CSS codes of websites are in the top part of the webpage’s code.
So, when a web browser is showing your site, it has to pause and understand that CSS and JS stuff. Tools that test page speed call this a “render-blocking resource,” because new methods can help prevent this from slowing down your site.
You can check on our example website how CSS and JS files are causing this issue.
To improve this, you should only load the things that are necessary for the part of the page that you can see without scrolling. Fortunately, fixing this in WordPress is quite straightforward, either by using a plugin or by customizing the website.
Let’s move on to using a plugin to fix this problem.
How to Eliminate Render-Blocking Javascript and CSS with WordPress Plugins
There are many plugins that can help remove render-blocking resources in WordPress, but today we’ll look at two of them. The first one is called WP-Rocket, which you have to pay for, and the second one is Autoptimize.
Now, let’s learn how to use WP-Rocket…
Option 1 (Paid): WP-Rocket
My top choice for improving WordPress performance is WP-Rocket. It’s really the simplest method to remove the “Eliminate Render-Blocking Resources” warning and make your site faster.
Just remember, WP-Rocket is a paid plugin. If you’re looking for a free option, check out the second option below.
Once you buy and activate the plugin, you’ll see a new choice for WP-Rocket in your settings. Click on the “File Optimization” tab within the WP-Rocket settings. In this section, we can adjust CSS and JS to avoid blocking our page from loading.
You should turn on CSS minification and select the “Optimize CSS delivery” choice. This will make your CSS files smaller and load them at the bottom of your page. The “optimize CSS delivery” option will create necessary CSS and load it at the top of your site, making it load faster initially.
Scroll down a bit more and you’ll find the options for JS files.
In this section, you should choose to “Minify JavaScript files” and enable the “Load JavaScript deferred” option. This will make your JS files smaller and delay their loading so they don’t block the rendering. jQuery is not included in this process because it can often cause problems with compatibility.
Once you’ve made these adjustments, clear your cache and test your site again. These changes should get rid of most, if not all, of the “Render-Blocking Resources” messages.
Option 2 (Free): Autoptimize + Async JavaScript
If you want a free plugin to fix the issue of JS/CSS causing a delay in WordPress, you can use Autoptimize.
Autoptimize gives you some choices, like making CSS/JS files smaller and putting them together.
The next plugin we’ll use is Async JavaScript, which will bring some extra features to Autoptimize (if you want to use them). Once you have Autoptimize installed and turned on, go to its settings page.
When you tick the boxes for “Optimize JavaScript code” and “Do not aggregate but defer,” the plugin will delay your JS files and fix most of the render-blocking issues. For some websites, CSS files can also cause the same problem. This is when the Autoptimize CSS settings can help.
For the CSS options, you should choose “Optimize CSS Code” and “Inline and Defer CSS.”
Important: If you select “Inline and Defer CSS,” you’ll need to copy and paste critical CSS manually. You can use a tool like a website to generate this crucial CSS. Just copy the CSS the tool provides and paste it in for this to work properly. After that, your CSS files will load later and won’t block rendering.
Autoptimize doesn’t create critical CSS on its own, so whenever you make significant changes to your site, you’ll need to do this manually. Alternatively, you can use Autoptimize’s integration with criticalcss.com (this requires payment) for automatic processing. I should mention that WP-Rocket does this automatically if you use the first option explained earlier.
How to Eliminate Render-Blocking Javascript Manually with PHP in WordPress
If you’re comfortable with PHP and WordPress development, here’s how you can manually resolve the issue of render-blocking resources using PHP.
In your theme, if you’re using the function wp_enqueue_script to add scripts, you can set the last parameter to true. This will make sure the file is loaded at the end of the page. So, if you’re adding your own custom JavaScript, using “true” is the best way to ensure they load at the bottom of the page.
In the code example below, after the jQuery code, I have added “true.” This tells WordPress to place the resource in the footer of the page.
<?php
function wp_da_scripts_method() {
wp_enqueue_script( 'my-custom-script', get_stylesheet_directory_uri() . '/js/your_custom_script.js', array( 'jquery' ), true );
}
add_action( 'wp_enqueue_scripts', 'wp_da_scripts_method' );If you want to apply this not just to a specific theme but to all JavaScript files, you can use a filter that defers them. You can achieve this by using the “script_loader_tag” hook.
You can add this code snippet to your theme’s functions.php file or use the Code Snippets plugin. If you’re not sure how to do this, you can watch my video about adding code snippets to your site.
In simple terms, this code will add the “defer” parameter to all JS files on your website except jQuery, and it won’t affect logged-in users. I’ve included comments in the code so you can adjust it according to your specific needs.
<?php
function da_defer_js_parsing( $url ){
if(is_admin()) return $url; //Skip admin JS files
if(is_user_logged_in()) return $url; //Skip if user is logged in
if(false === strpos($url, '.js')) return $url; //If it's not a JS file skip
if(strpos($url, 'jquery.js')) return $url; //Don't defer jQuery
return str_replace(' src', ' defer src', $url); //defer JS file
}
add_filter( 'script_loader_tag', 'da_defer_js_parsing', 10 );You can also choose to exclude specific problematic JS files by adjusting the script accordingly. I hope this guide assisted you in getting rid of render-blocking resources in WordPress! If you encounter any problems or have questions, feel free to ask in the comments. If you’re interested in achieving a high Google PageSpeed score, you can also check out my Google PageSpeed optimization guide.
Related Articles
Leave a Reply