This post may contain affiliate links for more info visit my disclosure page.
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 is a common error one gets when you test your site speed on Google’s PageSpeed Test.
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.
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:
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 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.
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.
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.
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.
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:
Let’s make money online!