Eliminate Render-Blocking JavaScript & CSS In Above-The-Fold Content

Recently, I’ve been looking at my site speed and had to fix many errors, and in this post, I’m going to show you how to fix one of these errors which is eliminating the render blocking JavaScript and CSS in above-the-fold content.

By removing these render blocking scripts, it will increase your site speed which in turn will get you more traffic and rank better for your website.

This post is will take you step-by-step on how to eliminate your render blocking javascript and CSS in above-the-fold content.  It’s a really involved process so take it slow.

This is a common error one gets when you test your site speed on Google’s PageSpeed Test.

 

 

WHAT IS RENDER BLOCKING JAVASCRIPTS AND CSS SCRIPTS?

---

I’m going to be brutally honest here.  I don’t know about how all this works but I’ve found a solution and that’s all I can explain to you.

In plain English, it seems there are both javascripts and CSS scripts that load when people go on your website.  However, these scripts take up a lot of the load time and what you want to do is to defer these scripts from loading until your above-the-fold content has loaded.

The one WordPress plugin that seemed to work is the Autoptimize.  They owner of this plugin is very helpful as well.

Below, I will show you how to configure it with my other site, My Mickey Life, as a case study for my site speed posts since I’ve already done it for this site.

Clicking on any image below will enlarge them for a closer look.

 

 

HOW TO SET UP THE AUTOPTIMIZE PLUGIN

---

Typically when you first test your site, you’ll get a low score like this in the red:

 

When I open up the first error to eliminate render-blocking JavaScript and CSS in above-the-fold content, I get these errors:

 

So, let’s install the plugin by going to Plugins > Add New and search for Autoptimize.  Press Install button and then the Activate button.

 

Initially, this is what you want to do:

• Check the “Optimize JavaScript Code?” box under JavaScript Options

• Check the “Optimize CSS Code?” box under CSS Options

• Press the “Save Changes and Empty Cache” button like this:

 

Once you do this step, your errors will be reduced to something like this:

 

There are a few things you still need to do to totally get rid of these two last blocking scripts.

What that plugin did so far was block all the JavaScripts I had but this last one.

As well, for the CSS, it minimized all those CSS scripts I had there before into one aggregated file which you’ll need to use later on to get rid of this last error and that’s why I’ve highlighted it in the screenshot to show you.

 

 

REMOVING LAST RENDER BLOCKING JAVASCRIPT

---

Now, you’re going to open up more settings by clicking on the “Show Advanced Settings” shown here:

 

Once opened, look at the “Exclude scripts from Autoptimize:” and remove the “js/jquery/jquery.js” from that section:

 

After you remove it, please remember to press “Save and Empty Cache” button on the bottom again.  When I checked my case study site, here is the result after removing that script from there:

Now we’re just left with the CSS portion to fix, which is a bit more involved but I will walk you through it!

 

 

REMOVING LAST RENDER BLOCKING CSS

---

This step is a little more involved and will have to go step by step.

Again, there are things I’m doing here that I don’t fully understand how it all works but it gets rid of these problems and that’s all it matters to me and my site is still fine after implementing this.

 

First, with your advanced settings still open, go to CSS Options and:

• uncheck the box “Also aggregate inline CSS?”

• check the box “Inline and Defer CSS?”

• DO NOT PRESS THE SAVE BUTTON at this point.

 

You will see a box open up like this after the above:

You don’t want to press Save yet at this point because you need to grab the code to paste in that box.  Also, if you pressed saved now, I don’t know if that aggregated CSS file that we need will still be there.

When we first installed this plugin and checked the Optimize CSS Code, it automatically checked “Also aggregate inline CSS” which created an aggregated CSS file for you in the main header area of your site.

This is the CSS file still listed in your PageSpeed test error that I screenshot in the above section after I intially installed the plugin.

We are going to grab this CSS file, and use another resource to extract only the above-the-fold CSS script that is needed to load first which will make the script much smaller.

 

HOW TO FIND THIS CSS FILE AND GET THE INLINE CSS ABOVE-THE-FOLD CODE:

Go to your website, mydomain.com, and right click to select “View Source” on a PC, or “Show Page Source” on a Mac under the “Develop” Safari menu.

You will see that CSS file like this near the beginning of your source code:

 

I’m using a MacBook and when I click on it, it opens up.  So if you’re not able to click on it to open up this file, do it another way like saving that file on your desktop and open it with notepad or something.

Once opened, select the entire code in that file and copy it.

Now, go to https://jonassebastianohlsson.com/criticalpathcssgenerator/ – this site will extract just the above-the-fold CSS for you.

When you’re on that site, you will enter your domain URL first:

 

Then in Step 2, you will Clear what’s in the box and paste your entire CSS code that you just copied from your aggregated file there like this:

 

You will notice that my original code has 186,000 characters in it shown on the bottom left of the above image.

Now, click on that Step 3 button “Create Critical Path CSS” and watch it generate the inline CSS code you’ll need to paste into the Autoptimize plugin!  You will notice how much less characters this new code has, 15,321 characters vs 186,000 characters:

 

Now copy that Critical Path CSS code on the right in its entirety and paste that in the Autoptimize plugin under the CSS Options section, in the “Inline and Defer CSS?” box like this:

 

After pasting, now you can safely press the “Save Changes and Empty Cache” button on the bottom of the settings page.

The result is that there will be no more render blocking javascript and css above-the-fold errors to fix and my site speed for this case study is now at yellow of 65 versus a 57 red in the beginning!

 

 

OTHER ERRORS TO FIX

---

As you see I still have 3 more things to fix, you can read this post here to see what I did to get rid of them all.

I’ve learned so much researching all these errors and grateful that the site speed for Work Anywhere Now so much faster now, as well as share my knowledge with you!

 

I Owe This Knowledge To:

Just want to mention that I found out about my low Site Speed from a member at Wealthy Affiliate!  If I didn’t know about my site speed, I wouldn’t have looked into how to fix all those errors and go from a site speed mobile score from 41 to 94!

Not only you get great training on how to build your online business on that fantastic platform, you get to learn from so many other members in its very active community.

Without Wealthy Affiliate, I wouldn’t have the site I have today, and you would not be reading this post about how to fix your render blocking javascripts and css in above-the-fold content! 🙂

I’ve been a member there since September, 2016 and I’ve gained so much knowledge from the short time I’ve been there so far.

If you haven’t had much success with your site, I highly recommend you check them out and see what you can learn there:

 

If you have any questions on the steps I described in this post on how to eliminate render blocking JavaScript and CSS in the above-the-fold content or questions about Wealthy Affiliate, please let me a comment below.

 

Let’s make money online!