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!
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?
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!
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?
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.
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.
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?
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!
On Autoptimize CSS setting, I rather to check inline all option than inline and defer like you did above. More simple without editing CSS to external party.
That’s cool, whatever works for you is fine, I was just following someone else’s method so I didn’t want to deviate from it since I don’t know too much technical stuff. Lol.
Thanks for your input!
I just have two words for you…
YOU ROCK !!!
Aww that’s so awesome! You rock too for leaving me such a great message! 🙂
This helped me out of a massive bind, many thanks to you!!
Great to hear! You’re very welcome. 🙂