Gone are the days, you can simply have a website to attract users. Nowadays, you need to focus on speed optimization in order to stay on top of the Google search results. Though there are many speed optimization issues you can face, render blocking resources is the most popular one. Many bloggers and webmasters struggle to fix render blocking resources in WordPress. In this article, we will explain how you can fix the issue and improve the page speed.

What is Render Blocking?

Whenever you open a webpage, the browser tries to render the page by getting data from web server. In other words, you can call this rendering as a visualization of webpage on the browser’s frontend. Unfortunately, some components on the webpage can block the rendering of a webpage on browser. This will result in delaying and user needs to wait till the time the component is completely loaded. After the blocking components or resources are loaded, users can see the above the fold content visually.

In summary, any resources that blocks rendering of above the fold content of a webpage on a browser is called render blocking resources.    

Render Blocking Issue in Google PageSpeed

Since render blocking resources delay the loading time of a visual content, you have to fix the issue to improve the page loading speed. You can view all render blocking resources in Google PageSpeed Insights tool when testing a page.

Render Blocking Resources

There are multiple resources that can block rendering of your webpage:

• JavaScript – scripts are the major reason for blocking above the fold content. In the above case, you can see the jQuery part of default WordPress core delays 330ms of the page loading time. Though jQuery loads in the footer section, it blocks the webpage rendering thus appearing in the PageSpeed tool as an opportunity to fix.
• CSS – depending upon your site’s setup, sometime CSS can also delay the loading and result in render blocking. This generally happens when you use heavy bloated theme or plugin.
• Third-party files – the best example of third-party files are Analytics tracking and advertising codes. In general, third-party codes are also JavaScript with the only difference that they are not hosted on your server.   

Fixing Render Blocking Resources in WordPress

You have to handle render blocking JavaScript and render blocking CSS separately in order to fix the issue.

• For JavaScript, you can use async attribute in the script tag to load the script in parallel to the content. For example, Google AdSense uses async advertising code for all loading advertisements. Therefore, you will not see render blocking JavaScript errors though you use AdSense advertisement on above the fold area. Alternate option is to use defer parameter with script tag. This will defer loading of the script till HTML the completion of HTML parsing.
• For CSS, you can find the blocking part and inline the styles in the header to eliminate the issue.

Well, you don’t need to worry much about these technical stuffs. WordPress has many plugins for fixing render blocking JavaScript and render blocking CSS files. However, you have to test and make sure these plugins do not break your site’s layout.

Free Plugin Options

Remember, you have to choose the plugin based on the recommendations you see in Google PageSpeed Insights tool. In most cases, you will see render blocking JavaScript and not CSS. There are many free plugins available in WordPress repository that can help you fixing render blocking JavaScript. One of the best options is to use W3 Total Cache.

Fixing Render Blocking JavaScript Issue with W3 Total Cache

After installing and activating the plugin, go to “Performance > Minify” tab. Scroll down to JS section and look under “Minify engine settings”. By default, W3 Total Cache uses “Default (blocking)” setting for both before head and after body options. Though this will help you to avoid breaking your site’s layout, you will see render blocking resources issue in Google PageSpeed with JavaScript files.

What you have to do is to click on the dropdown and select one of the non-blocking options. You have three non-blocking options with W3 Total Script:

• Non-blocking using JS
• Non-blocking using “async”
• Non-blocking using “defer”

You have to test the site’s layout and find which option is working for you. In most cases, the async option should work fine.

Make sure to click on “Save Settings & Purge Caches” to delete the cache when you test the layout. Learn how to check whether W3 Total Cache is working on your site or not.

Fix Render Blocking JavaScript and CSS with Autoptimize

If you see both JavaScript and CSS render blocking files in Google PageSpeed Insights tool then W3 Total Cache will not be helpful. Unfortunately, eliminating render blocking CSS is a premium option in W3 Total cache. You have to purchase $99 yearly subscription to use this feature.

Alternative option for you is to use other free plugins like Autoptimize to defer JavaScript and inline CSS. However, make sure you to use only one plugin, either Autoptimize or W3 Total Cache and not both on a single site.

After installing and activating Autoptimize plugin, go to “Settings > Autoptimize” menu. Enable “Optimize JavaScript Code?” option under “JavaScript Options”.

Similarly, scroll down and enable “Optimize CSS Code?” option under “CSS Options” section.

Click “Save Changes and Empty Cache” button.

With most of the themes, you can get rid of JavaScript issue with simply selecting the default options in Autoptimize. However, the plugin by default excludes files like jQuery and dashicons from optimizing. Hence, you may still see these files as render blocking. You have to test in Google PageSpeed by changing the Autoptimize plugin settings and removing exclusions if necessary in order to get rid of eliminate render blocking resources issue completely.

Note: Unlike W3 Total Cache, Autoptimize does not offer auto purging of cached files. Therefore, avoid using inline options for both JavaScript and CSS. Especially, inlining CSS will help to eliminate render blocking CSS issue. However, it may slow down your page by loading heavy styles in header section. In addition, cached file size will grow to 100% quickly and you have to manually purge the cache frequently.

Paid Plugin Option

The best option in our opinion is to use a premium WP Rocket plugin for fixing render blocking issues in WordPress. The reason is simple that the plugin can help you to fix both render blocking JavaScript and CSS with few simple settings. Unlike W3 Total Cache or Autoptimize, you do not need to spend plenty of time in finding the correct settings for you. In addition, you can get WP Rocket for $49 instead of spending $99 for W3 Total Cache or $10 per month for criticalcss.com to integrate with Autoptimize.

Fix Render Blocking CSS

First, purchase WP Rocket plugin from their website. After uploading and activating WP Rocket plugin, go to “File Optimization” section.

Enable “Optimize CSS Delivery” under “CSS Files” section. This will help you to generate critical CSS and load with above the fold content. It can help you to increase the page speed score drastically and fix eliminate render blocking resources for CSS. You can also generate above the fold critical CSS for each pages separately if required when you are in Gutenberg or Classic editor.

Fix Render Blocking JavaScript

Scroll down on the same page and enable “Load JavaScript deferred” to fix eliminate render blocking resources for JavaScript files. The plugin by default will exclude jQuery from deferring. You can test the layout and remove the exclusion if it is not needed for your site.

With many other options available, WP Rocket is the easy way to fix render blocking resources issue in WordPress.

Do I Need to Fix the Issue Mandatorily?

Remember, as Google PageSpeed indicates “Eliminate render-blocking resources” is an opportunity to improve the loading time. However, it does not directly affect the page speed score. Therefore, it is not always necessary to fix the issue. This is especially true for all jQuery based themes. In addition, WordPress also supplies jQuery as part of the core files and hence deferring it will break the layout in many cases. Similarly, inlining CSS will cause more trouble though it will fix render blocking issue. Here, you can use WP Rocket and generate critical CSS with single setting.

Therefore, first make sure to test whether you site works perfectly and the user experience is good. Even though Google shows render blocking issues, you can safely ignore them as there will be no impact on the speed score with that.