WordPress Tutorial

How to Eliminate render-blocking JavaScript and CSS on WordPress

How to Fix Eliminate render-blocking JavaScript and CSS on WordPress

Introduction

Website speed is one of the most important factors in attracting and retaining visitors. All other things being equal, a faster website is much more likely to land users. This is because search engines take site speed into consideration when ranking results. So, if you want to leave your competition biting the dust in SEO, make site speed a priority.

Of course, judging your site’s speed can be a problem. There are a ton of variables that might affect your testing methodology – internet connection speed, geographical location etc. This is where Google’s PageSpeed Insights comes in. It is a free service offered by Google, which assigns a score to websites based on their loading speeds. Ideally, you want to score as high as possible on PageSpeed. And if you’ve already used the online tool, you may have encountered the infamous Eliminate render-blocking JavaScript and CSS in above-the-fold content suggestion for your website.

[optin-monster-shortcode id="cgx87nzwxn0himxw62bn"]

What Eliminate render-blocking JavaScript and CSS in above-the-fold content means

To understand this suggestion, we must look at Google’s criteria for scoring sites on PageSpeed Insights. There are ten speed rules defined by Google, and failure in any one of these results in a reduction of points.

Render-blocking JS and CSS in above-the-fold content is one of these rules. Typically, JS and CSS scripts force the web browser to delay loading the HTML page. Of course, this is not an issue. In fact, that is precisely what you would want; no one desires to look at content that hasn’t been styled.

Render-blocking JS and CSS, however, refers to those scripts, that introduce load latency but are not used in above-the-fold (ATF) content. ATF content refers to that part of the web page that is visible when the page loads; any part of the page that you have to scroll down to reach is non-ATF. So, with this suggestion, Google is letting you know that there are JS and CSS scripts on this web page that are slowing it down needlessly, as the part of the page they affect isn’t even observable to the user yet.

In this WordPress tutorial, we will use Google PageSpeed Insights to identify render-blocking scripts. Then, we will show you how to fix this issue for your WordPress site, using 3 different methods. In addition to this guide, you should also look at other ways of speeding up your WordPress site for an optimal user experience.

What you’ll need

Before starting this tutorial, you’ll need the following

  • Access to WordPress admin area

Fixing Eliminate render-blocking JavaScript and CSS in above-the-fold Content error

JS and CSS are crucial for any modern website to not only function at a high level but also look the part. However, there is a trade-off – performance. While there are a few measures you could take to make your site faster, like defer parsing of JavaScript, sometimes that may not be enough. We are, of course, talking about render-blocking JavaScript and CSS. To take care of this issue, we must first make sure that it even exists. After we have confirmation of render-blocking scripts on our website, we can move on to looking at possible fixes.

Step 1 – Using Google PageSpeed Insights to Find Render-blocking JS and CSS

The first step in fixing render-blocking is testing your site’s speed using Google PageSpeed Insights. Simply visit the page, and in the input field, paste your site’s URL. Click Analyze to get a report of your site. Most sites score between 50-70; this should serve as a benchmark for your score. Along with the score, Google will also list suggestions to improve the performance of your site.

Eliminate render-blocking JavaScript and CSS in above-the-fold Content Error on PageSpeed Insights

In order to show how to fix render blocking error, we will use a real website. In the above screenshot, you can see that it currently contains quite a few blocking JS and CSS resources.

If after testing your website with PageSpeed Insights tool you also find the suggestion Eliminate render-blocking JavaScript and CSS in above-the-fold content, then you should continue reading this WordPress tutorial. Keep this tab open in your web browser, as you may need it when fixing this issue.

An important thing to keep in mind – your goal here should not be to score a perfect 100 on PageSpeed Insights. Rather, it should be to try your best to get a good score, without sacrificing user experience. If there are scripts on your WordPress site essential for a robust UX, you shouldn’t remove them just to get a slightly higher score on PageSpeed Insights. The rules on which Google scores your sites are merely guidelines, and should be taken as such.

Step 2 – Fixing render-blocking JavaScript and CSS

Option 1 – Using W3 Total Cache

Now that you are aware of render-blocking code on your website, you have a few options on how to fix it. We recommend downloading a plugin that makes your life easy in taking care of this problem. One of our favorites is the W3 Total Cache plugin. Install and activate it. Once you have it setup, follow these steps:

  1. Go to Performance -> General Settings. Find the Minify heading on the page.
  2. You will see a few options under this heading. The first one is titled Minify; check the Enable box in front of it.
  3. In the Minify mode option, choose Manual, and then click Save all settings button.
    W3 total Cache Minify Settings Section
  4. At this point, you must fetch all the JS and CSS scripts causing render-blocking. You will find these scripts through Google PageSpeed Insights. If you kept the PageSpeed tab open as suggested in Step 1, you will find the Show how to fix clickable text under the render-blocking suggestion. Click on it. This will list all those scripts and stylesheets causing render-blocking.
  5. Go back to WordPress. Navigate to Performance ->Minify. You will have to minify both JS and CSS files separately.
  6. First, let’s take care of JS. On the page, find the heading JS, you will then see Operations in areas section. There, choose Non-blocking using defer as the embed type for the before <head> tag.
    W3 total cache JS minify Settings
  7. Then, under the sub-heading JS file management, choose your active theme and click on the Add Script button. Now, simply copy the URLs of JS scripts from the PageSpeed tab, and paste them here one-by-one. This completes the fix for JS files.
    Adding JS to eliminate render-blocking javascript and css in above-the-fold content in WordPress
  8. Moving on to CSS. Scroll down further on the same page to find the CSS section. Under the CSS file management sub-heading, choose your active theme and click on Add a style sheet. Similar to JS scripts, copy/paste CSS stylesheets from PageSpeed Insights to this section.
    eliminate render-blocking javascript and css in above-the-fold content WordPress
  9. Finally, click the Save settings and purge cache button.

You should now head back to Google PageSpeed Insights to check whether render-blocking has been fixed. From the below screenshot you can see that adjusting W3 total cache settings fixed render-blocking JavaScript and CSS in above-the-fold content error for our test site.

Eliminate render-blocking JavaScript and CSS in above-the-fold content fixed on WordPress

If you want even more control over your above-the-fold content, do check out Above The Fold Optimization. This plugin is designed specifically for ATF content and works with other popular plugins like W3 Total Cache and Autoptimize.

Option 2 – Using Autoptimize

A comparatively easier method of resolving the render-blocking problem is through another plugin called Autoptimize. Download and install the plugin, which shouldn’t take long. Once you’re done with the installation, go to the Settings -> Autoptimize area of WordPress. Here, simply check the boxes titled Optimize JavaScript Code? and Optimize CSS Code? and press Save Changes and Empty Cache button.

autoptimize settings to fix render blocking js and css

In most cases, this is enough to fix render-blocking (it depends on your theme and active plugins). To find out if you’re one of these people, run your site through PageSpeed Insights again.

1 blocking script resources and 1 blocking CSS resources left after Autoptimize

As you can see from the above screenshot, Autoptimize left 1 blocking JS resources and 1 blocking CSS resources.

If you want to take the optimization even further, head back over to Settings -> Autoptimize. Click on the Show Advanced Settings button. From here, check the options Also aggregate inline JS and Also aggregate inline CSS. Finish by clicking on Save changes and Empty Cache. To see if this worked, visit PageSpeed Insights once again.

Option 3 – Using Speed Booster Pack

Another popular plugin that you may find useful in fixing render-blocking for your WordPress site is Speed Booster Pack. Download and activate the plugin. You will find its options in the Settings ->Speed Booster Pack section of the WordPress admin area.

For JS scripts, you have to enable Move scripts to the footer and Defer parsing of JavaScript files.

Speed Booster Pack Settings

For CSS render-blocking, go to the Still need more speed? menu. Here, you will find additional settings pertaining to CSS optimization; minifying CSS, moving CSS styles inline to the footer and loading CSS asynchronously.

Speed Booster Pack Need More Speed Settings

You should experiment with these optimizations to find a happy medium – simply enabling all of them will load your site faster, but may also introduce the unwanted Flash of unstyled content (FOUC) artifact. This happens when the browser loads the web page without waiting for the stylesheet to load, causing a momentary flash any styling off of the page. To ensure that render-blocking is not an issue anymore, check back with Google PageSpeed Insights.

Conclusion

Render-blocking can prove to be detrimental to your WordPress website’s speed and performance. In this WordPress tutorial, we learned how to fix Eliminate render-blocking JavaScript and CSS in above-the-fold content for your website. While your site might still contain a few necessary render-blocking scripts and stylesheets, we hope that this tutorial helped you in addressing at least part of the issue.

If any of the above fixes broke your site’s functionality in some way, then make sure to follow render-blocking code. Remember, site speed only goes so far in improving your website; you shouldn’t have to compromise on core functionality. So, if there’s still some render-blocking code dangling on your site, don’t worry about it. Found this tutorial useful? We have much more for you at hostinger.com/tutorials/wordpress.

9 Comments

Click here to post a comment

  • Nice.
    I’ve used some of the technics here to improve my performance. Still, there are some minor issues but overall it looks good.
    Thnak you.

  • Hi there,
    Thank you for the tutorial, I managed to fix the only one .css I had. It increased the page speed to ‘green’ both for mobile and desktop. But when I re-checked the PageSpeedInsight got a new warning that I have another CSS to optimize “/wp-content/cache/minify/” (in the first check it didn’t show up).
    As this one has no extension .css I am not sure if I have to repeat the procedure you explain above for .css.
    Thank you in advance for reply

  • I still have the warming from Google Pagespeed and I see that W3TC has that function for pro version only

    Your page has 1 blocking CSS resources. This causes a delay in rendering your page.

  • Hello

    It’s a great tutorial, simple and effective
    Only two or three extensions, to fix Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Thanks

  • This plugin broke my website in a big way.. I use beaver builder.

    Luckily, disabling the plugin undid the damage.. but boy… that was scary.

  • Hi. I was really pleased to find your easy to follow instructions. However, I have had very little success. I was already using W3 Total Cache, so I was familiar with the general interface. I did exactly as you suggested and pasted in the js and css URLs. However, when I purged the cache and saved and ran the page speed test again, I got a warning “The URL was fetched, but nothing was rendered. Ensure that the URL points to an HTML page that loads successfully in a web browser.” Sure enough, the site was now not loading at all. I have now deactivated both JS and CSS minification so the site is working, but the speed is now ‘Poor’.

    I then tried your suggestions of Autoptimise and Speed Booster Pack. These produced similarly disappointing results, and effectively broke the site.

    I would like any advice you can give me as I’m sure I’m missing something very simple, I hope!

    Thank you.

Join thousands of subscribers worldwide

and get awesome deals & the newest tutorials to your email

Please wait...

Thank you for sign up!

More in WordPress Tutorial
How to fix WordPress Syntax Errors
How to fix WordPress Syntax Errors

Close