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:

Inital Site Speed Errors

 

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

Detailed Errors of Render Blocking Javascripts and CSS Above-the-fold Content

 

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:

Autoptimize Plugin Initial Set Up

 

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


Site Speed Results After Initial Set Up of Autoptimize Plugin

 

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:

Autoptimize Plugin Show Advanced Settings

 

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

Autoptimize Plugin JavaScript Advanced Settings

 

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:

Site Speed Results After JavaScript Deferred

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:

Autoptimize Plugin CSS Advanced Settings

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:

Aggregated CSS File

 

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:

Enter Domain URL

 

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:

Paste Code in CSS Box

 

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:

Generated CSS code

 

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:

Autoptimize Plugin Paste Inline Critical Path CSS

 

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!

Site Speed Results Improved & Render Blocking JavaScripts & CSS Gone

 

 

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:

Learn More About Wealthy Affiliate Button

 

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!
Grace's Signature

 

 

 

, , , , , , ,

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

  1. Hari S Nair March 10, 2017 at 8:26 pm #

    This is a very useful post for bloggers. Site speed is one very important thing that many people ignore, how many times it happens that we just leave a site because the speed annoys us.

    I just checked my site’s speed and I have a lot of work to do, I am going to bookmark your page so that I can follow these steps and fix the errors next week.

    You have given a step by step guide to do this and that’s going to really help me, thanks. Autooptimize seems to be a good plugin, we can deactivate it after the work is done right?

    • Grace | Work Anywhere Now March 11, 2017 at 11:29 am #

      Hi Hari, Thanks for visiting this post and glad you think site speed is important as well. I know it’s important to Google and how it ranks sites, so having fast loading speed is very important indeed.

      I’m glad to hear this step-by-step guide will help you and I hope you site speed will improve after implementation of the steps. The Autoptomize plugin needs to be installed at all times for it to work though, so you can’t just install it to fix it and then deactivate because the plugin is continually working for your site.

      Hope this helps!
      Grace

  2. Bruno March 11, 2017 at 7:42 am #

    Hello Grace
    I have been disturbed by this problem for quite sometime now but now I have an understanding on the issue. Thank you for well articulated procedure and explanation. But, Is it possible to have a video showing how to do it?

    • Grace | Work Anywhere Now March 11, 2017 at 11:32 am #

      Hi Bruno, I’m so glad this post has helped you understand better on how to fix the render blocking JavaScript and CSS. I can add a video sure, and I’ll reply to you again here when I’ve got that done. 🙂

  3. Thomas (tudogz) March 30, 2017 at 12:05 am #

    Hi Grace.

    I’m going to try restoring to a previous version, as the site isn’t performing at all well. (G. Site Speed couldn’t load at all)

    In the meantime, can you tell me which part of this is the CSS code you wish me to open?

    I’m scared to go too far in case I completely mess it up. It doesn’t look like yours at all.

    Thomas.

    • Grace | Work Anywhere Now March 31, 2017 at 10:27 am #

      Hi Thomas, the CSS code is in your view source. However, before this step, you need to be able to use the Autoptimize plugin. Because your site is on Wealthy Affiliate’s web host, you won’t be able to use this plugin. However, the good news is that Wealthy Affiliate is going to roll out something that will fix the site speed for you so you don’t even have to worry about this.

      Lucky you!
      Grace

  4. Thomas March 30, 2017 at 6:58 pm #

    I’m still unsure about the last step, as I couldn’t see the code in your screenshot and anyway it was a lot different to what I found in mine.
    I’ll wait for the video lol.
    Where did you go to learn this, btw?

    • Grace | Work Anywhere Now March 31, 2017 at 10:29 am #

      Don’t worry about this, like I said to your previous comment, your site speed will be fixed when Wealthy Affiliate rolls out new updates this year. 🙂

      I learned all this on my own as my site is not hosted there. I had to research for several days to come up with all these fixes.

      Thanks for trying though!
      Grace

Leave a Reply

shares
Scroll Up