Top

Fix Render-Blocking JavaScript and CSS In WordPress

Have you just test your WordPress website through Google page speed insight1Google Page Speed Insight is a web based tool to measure website loading time and possible optimizations need to be done in order to comply with Google page speed guidelines. This tool is created by Google for webmasters to identify and analysis their website performance score tool and you are recommended to eliminate render-blocking JavaScript and CSS in above-the-fold content in order to improve page speed score?

Okay! In this blog post we will show you some easy to follow instructions to fix render-blocking JavaScript and CSS in WordPress. But before you start following our instructions, I’d like to explain you about What is render blocking JavaScript and CSS?

What is render blocking JavaScript and CSS?

Every WordPress installation comes with a basic set of feature and design that we extend later by using additional themes and plugins. And most WordPress themes and plugins add some JavaScript and CSS in the front-end of your WordPress website to makes it work properly. That’s cause the render blocking issue.

When a user browse your website, Then the user’s browser loads those JS and CSS files before making the rest of content (HTML, Images, Videos etc.) visible on your website. Since those JS and CSS’s in your website blocking other content rendering until load itself, It’s refereed as render blocking, that increase your website load time and bad user experience as well.

Google recommends webmasters and website owners to eliminate those render blocking JS and CSS’s in above the fold2Above the fold is the portion of webpage that appear first in a web browser without scrolling down and the rest of content that require scrolling referred as below the fold content to make their website load fast and improve user experience in addition to comply with Google page speed guidelines.

If you want to improve your website score on google page speed insight tool, You must have to eliminate those JS and CSS files that blocks above the fold content from being load prior loading those files. Though render blocking JS and CSS’s only take a fraction of second, But you know every millisecond counts on the web, In-addition fast loading website = Better SEO.

Okay! So, how can I fix Render-Blocking JavaScript and CSS in WordPress?

Below is the instructions for elimination render-blocking JS and CSS in WordPress. We have shown many ways of doing that and other recommended plugins that can help you to improve other speed optimization factor for your WordPress.

How To Fix Render Blocking JavaScript and CSS

There’s over dozens of WordPress plugin available that claims to fix render blocking JS, CSS and other speed optimization factors to gain more score on website speed testing tools like Google Page Speed Insight, Pingdom, GTmetrix, YSlow etc.

We make test of some popular WordPress plugin for this manner to find out the best one, that can fix many speed optimization factor including render blocking scripts and CSS. We also run our test website through those website speed testing tool after installing and configuring those plugins.

Anyway, In my next blog post I’ll share my full report and comparison of those plugin, But here we will show you some plugins and it’s configuration that can fix render blocking JS and CSS.

1. Fix Render Blocking JS and CSS Using W3 Total Cache

There is no doubt that W3 Total cache is the most powerful WordPress optimization plugin with more than 1 million installation and average rating is 4.3 out of 5. There a chance that you already have W3 Total Cache installed on your WordPress.

If you are not using or installed W3 Total cache on your WordPress, Install it from WordPress plugin library.

Note: W3 Total cache is an advanced WordPress plugin with many options and features. It requires a little more configuration (Compared with others) to fix render blocking JS and CSS.

Upon installation and activation, W3 Total cache adds a new menu called performance to WordPress menu with sub-menu of 16 different pages of configurations. Anyway, in order to fix render blocking script and css we need to only configure minification settings.

The minify is disabled by default. You need to enable minify first from Performance >> General Settings page.

As minify is a advanced settings of W3 total cache, You will be asked for confirmation upon clicking on the enable checkbox. Click on I Understand the Risks button to disappear the message and enable minify.

Enable minify warning w3 total cache

W3TC Enable Minify Notice

Also make sure to select manual as minify mode like below the screenshot and save all setting:

W3 Total Cache enable minify

W3TC Minify section under General Settings

Next, You need to add those render blocking JS and CSS files in W3 total cache minify. You can find those render blocking CSS and JS file in Google page speed insight report. Hold your mouse over those links and then copy using mouse.

copy render blocking scripts and css

Google Page Speed Insight Tool’s Render Blocking JavaScript and CSS

Now go to Performance >> Minify and scroll down to JS section. In this section we will add JavaScript files that is render blocking and reported by Google page speed insight tool. The JS minify enabled by default, Now we need to select Non-blocking using “async”3Async is a HTML script attribute that tells the web browser to download the resource without slowing down or blocking other HTML element. So the other element can be rendered without finishing downloading the resource for the </head> section under Operations in areas.

Next we need to click on “Add a script” button and then paste the JavaScript’s file URL that you have copied from page speed insight tool. Below is the screenshot of my JS section:

Add a Script in w3 total cache for minification

W3 Total Cache JS minify

Once you are done with JavaScript, Now scroll down to CSS section and add style sheet/CSS by clicking on the “Add a style sheet” button using the same way (we have done for JS) without touching any other configuration.

Add style sheet w3tc minification

W3 Total Cache CSS/Style Sheet minify

Once you are done with JS and CSS, click on the save all settings and Purge Cache to apply your configuration in W3 Total Cache.

You are done, Now test your website through Google Page Speed insight tool to see that everything is fine and render blocking JavaScript and CSS in above-the-fold content is gone.

2. Eliminate Render Blocking JS and CSS Using Autoptimize

Autopmize is a simple yet powerful WordPress Plugin that makes your WordPress website load fast and save bandwidth by aggregating and minimizing HTML, JS and CSS. It also helps you to asynchronously load your JavaScript and optimize CSS. There is no critical settings needed to eliminate render blocking JavaScript and CSS.

Just install Autoptimize WordPress plugin and go to Settings >> Autoptimize and then tick on the Optimize Javascript Code and Optimize CSS Code.

Remove Render Blocking JavaScript and CSS Using Autoptimize

Once you are done with above, click on the “Save Changes and Empty Cache” button.

After that Autoptimize will concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them and more.

Now test your website using Google Page Speed insight and if you are still receiving render blocking JS and CSS warning, then you need to make some changes in Autoptimize’s advanced settings page. The advanced settings can be expanded by clicking on the “Show advanced settings” button at the top right side.

Autoptimize advanced option

Autoptimize Advanced Option

Now scroll down to JavaScript Options and enable “Also aggregate inline JS?”

Autoptimize Advanced JavaScript Option

Autoptimize Advanced JavaScript Option

And for CSS warning, Scroll down to CSS Option and enable “Inline all CSS?”:

Autoptimize Advance CSS Option

Once you are done, click on the “Save Changes and Empty Cache” button and then test your website again on Google Page Speed Insight.

Now the render Blocking JavaScript and CSS in above the fold content should gone.

3. Fix render Blocking JavaScript Using Async JavaScript Plugin

Async Javascript is a simple yet powerful WordPress plugin that adds async attribute to the HTML script element. This plugin works really great for only JavaScript and It doesn’t help in optimizing or eliminating CSS/Style Sheet. Async JavaScript is recommended for those who are receiving JavaScript render blocking warning on Google Page Speed insight tool.

As Async JavaScript is a simple and light plugin, It doesn’t require any critical settings. All you have to do is, Install and activate Async JavaScript plugin and then Enable Async JavaScript from Settings >> Async JavaScript.

Enable Async JavaScript

Async JavaScript Settings Page

That’s all, Now the render blocking JavaScript should be fixed.

There’s dozens of more WordPress plugin available that can help you in fixing render blocking JavaScript and CSS issue’s in WordPress. I’ve not tested all of those but after testing few of those WordPress plugin, I found W3 Total Cache, Autoptimize and Async JavaScript does pretty good job when it comes to eliminating render blocking JS and CSS.

Important: I’ve also tested above three WordPress plugin at a time with some advanced label of configuration and they work great as well.

Hope this tutorial help you fix render blocking JS and CSS in your WordPress too. If you encountered any issue, Please let us know using the comments below. I’ll be more than happy to assist you. Also If you found this tutorial useful, please do share on your social profile and join our newsletter for more tips and tutorials like this.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive website improvement tips and tutorials.

 

We'll periodically send useful information, tips & tutorials to improve your website performance, conversion optimization, SEO and design tweaks to make your website better.

Thank you for signing up!

Please check your email and click the link provided to confirm your subscription.

Powered by Rapidology

References   [ + ]

1.Google Page Speed Insight is a web based tool to measure website loading time and possible optimizations need to be done in order to comply with Google page speed guidelines. This tool is created by Google for webmasters to identify and analysis their website performance score
2.Above the fold is the portion of webpage that appear first in a web browser without scrolling down and the rest of content that require scrolling referred as below the fold
3.Async is a HTML script attribute that tells the web browser to download the resource without slowing down or blocking other HTML element. So the other element can be rendered without finishing downloading the resource
32 Comments
  • abdulsalam aref
    June 18, 2017 at 5:15 pm

    i can’t find the js file management section, is there any setting for that ?

    thank you

    • Michael Miller
      June 18, 2017 at 5:24 pm

      I can’t find that section either. It seems like this tutorial may be based on an older version of the plugin.

    • Ramon
      June 18, 2017 at 5:27 pm

      The file management is only visible when you go do general settings and set minify from automatic to manual in W3 Total Cache.

  • Jose
    June 18, 2017 at 5:30 pm

    Using the first method, I was able to get down to only 3 scripts. With the second method, all of the files showing up on Google, kept showing, as if it was not working. But minify was enabled, I did purge the cache…

    • Bjorn De Clerck
      June 18, 2017 at 5:34 pm

      Your issue probably is the part at the end of the URL being ?123a32 (or something like that). This part should be removed from the URL when adding it in the Minify section in WP.

      Suggestion for the OP to specify this in the tutorial. Thanks for the nice tutorial btw!

      • Gregory Pozo
        June 18, 2017 at 5:35 pm

        That is indeed the solution! Thank you.

        Abu Zafor: when you can put a suggestion to check the end part of the links to see if they contain these ?123324 character structure.

  • Nicole Romero
    June 18, 2017 at 5:36 pm

    Great tutorial! Helped my site a ton!! Appreciate you sharing. Might be helpful to add Bjorn’s tip about the ?1234 because that was the last thing holding me up.

  • Dane Smith
    June 18, 2017 at 5:37 pm

    For some reason, every method I try either doesn’t work or it breaks my slider.

  • Thomas O'Rourke
    June 18, 2017 at 5:37 pm

    Unfortunately I tried both methods & neither have worked for me.

    Used the Async JS & CSS plug-in a while back & while it does asynchronously load your own web properties, it doesn’t make a difference with third party ones. It also introduces the ‘prioritise visible content’ issue, whereby Google cannot render any above-the-fold content. This means it actually reduces your score in the Pagespeed Insights tool.

    With your second solution, I followed every setting in W3 cache to the last detail & it still made no difference. Made sure the URL’s were correct as suggested above. Shame as I thought I had finally found the fix!

  • Kelly Rice
    June 18, 2017 at 5:38 pm

    This was an awesome find. We will be incorporating this into our web training. Thank you. I do have one questions.

    We tried this out on our website and can’t seem to eliminate one js as well as several css files.

    Do you have any suggestions on why it would work on some but not all?

  • Leyna
    June 18, 2017 at 5:39 pm

    I follow your instructions to REMOVE RENDER-BLOCKING JAVASCRIPT AND CSS IN WORDPRESS but my issue till stay the same:Your page has 4 blocking script resources and 3 blocking CSS resources. This causes a delay in rendering your page.
    i do not know why ? thanks

  • Lars
    June 18, 2017 at 5:41 pm

    After i did it with Async JS and CSS my whol site is broken. Pic do not show anymore.

  • kalifa
    June 18, 2017 at 5:42 pm

    hi

    thanks for this great article

    can i add the link for script from another website like amazon affiliate widget ,?

    thanks again

  • melbrk27
    June 18, 2017 at 5:44 pm

    I have followed all of the above instructions (im not technical so really pleased i had found something i could follow) installed w3 cache and then added all the links as per instructions and it hasnt worked. the end numbers on the links are 18674.

    Is there anything else i can do as its still saying i have the javascript and css problems, im still only at a speed of 47 out of 100.. thanks in advance

  • Stef
    June 18, 2017 at 5:46 pm

    Same problem here: after tweaking w3 as recommended in your other post.

    purging cache,

    adding all scripts and css from PageSpeed to W3 and
    again purging cache,

    these js and css keep appearing in the pagespeed Eliminate render-blocking JavaScript and CSS in above-the-fold content.

    Although looks all straight forward, no visible result.

    Any advice appreciated,

    Warm regards

  • Maks
    June 18, 2017 at 5:47 pm

    I dont know what plug in you use but none of the options you described are in W3 total cache. It only allows you to enable the minifi. Where is the add a script or stylesheet options?

  • Arun Kumar
    June 18, 2017 at 5:48 pm

    very usefull for me. Thank you for sharing

  • Kari Turbeville
    June 18, 2017 at 5:49 pm

    Hi, Abu. Same problem. I’ve purged all cache, Save All Settings and Remove Cache, tested and retested, purged again, changed settings. I’ve jumped through several hoops. No luck or change. Do you have another solution?

  • tejas sahu
    June 23, 2017 at 8:24 am

    from a long time i was facing issue for removing render blocking css and js. this is great tutorial it helped me to achieve 90+ score in google page speed insights thanks for this tutorial

  • Cory Beevers
    June 29, 2017 at 3:26 pm

    You have to click the manual button. This was a brilliant blog thank you. I bought the pro because i thought id need it. Do i need the pro to be able to do this?

Post a Comment