Eliminate Render-Blocking JavaScript and CSS in Above-The-Fold Content in WordPress

By | October 6, 2019


Hi today were going to learn how to improve
the speed of a slow moving website. We’re going to be using the https://developers.google.com/speed/pagespeed/insight/
tool or you can just Google “Page Speed Insights” and it will take you to that tool. You can see that this is a very low score
for the website we are going to be working on and I am primarily recording this video
for myself so I can remember how to do this because I thought I would remember all of
these steps when I went to do it again and I had forgot, so… When you use this tool it teaches you all,
well it doesn’t teach you, it shows you all of the things that you need to fix and it
will give you details on how to fix them – or what’s going wrong Essentially it is telling me I need to optimize
my images, eliminate render-blocking JavaScript and CSS in above-the-fold content, reduce
server response time, leverage browser caching and if I click it will show you how
to fix these things but that doesn’t always make sense to to a non-techie person like
myself. But there is a lot of fun in learning so I
went ahead and figured out how to do it. I’m going to focus on this step on this video
“Eliminate render-blocking JavaScript and CSS in above-the-fold content” and essentially,
I was able to fix a lot of the problem by installing this Plug-in “Autoptimize” without
the extra “O” in there. It does a lot of the work for us by concatenating the CSS and JavaScript code and compressing it. If you aren’t understanding anything that I’m saying
right now, welcome to the club! You don’t have to understand this – I do think
you can follow these steps though and figure this out. First of all, go install the plug-in. Then you are going to want to activate it. But I want to show you some things before
you do that. So this is exactly what the source code looks
like on this website before the “Autoptimize” is activated. You can see that there are a lot of spaces
in here and it’s going to remove all of the spaces that aren’t required when I load that. And how you can view your page source by the
way is to just go to your website, and then right click, go to “view page source” and
bingo, there you go, you see it. So, anyway, that is how I got there. So that is what we see. We’re going to activate the plug-in and show
you what it does. Once it’s activated, I’m going to be able
to refresh – oops, I’m sorry, wrong page. So refresh and you can see a lot of the spaces
have been taken out. But that does not fix the problem. If you go back and run a speed test you’ll
see that this is all still here and all these problems are all still here. By the way, I fixed a lot of this there were
a ton of problems listed in here but a lot of this got fixed individually when I entered
the “Autoptimize” plug-in and then ran this test, and then it fixed a lot of them but
it was still giving me these other problems that is why the score is still so low but
there were a whole host of things in here. So anyway, it will still give you this problem and I want to thank my unknown friends at WPfaster.org they also have a video on how
to eliminate render-blocking CSS in above-the-fold content, which was very
helpful to me but it didn’t actually fix all of the problems for my site which is why I am recording
my own video so that I will remember the steps. Anyway, one of the things you have to do – you
have to use this Critical Path CSS Generator – and you can access it at that URL that you
see above (https://jonassebastianohlsson.com/criticalpathcssgenerator/) So copy that URL that you see this is what you have to use in able to find
the critical path, and this is how we do this, we go to our source and you can see right before “style sheet” at
the very top you can see this file http:// name of the website) – all of these things
that are here before the style sheet. grab that (URL) copy that, excuse me, click the URL
it and copy all of all of it. Every single last bit of it. Move it into this box. Oops, I have some other stuff in here let
me clear that out. Move it into this box and then make sure the
webpage that you want to create the critical CSS for is listed up here and then hit “Create
Critical Path” generator. Once that is done, this is all that is needed
to fix the problem that we had eliminating render-blocking JavaScript and CSS This is going to help a great deal We grab and copy all of this and we take it
to our plug in. So go and click “settings”. And when you first open this up by the way
(I have advanced open) you will open this up and it will look like this. You are going to want to click all of the
boxes – and ignore the bottom. And we’re working in advanced settings so
we’re going to be clicking on “inline and defer CSS” which will pop open a box that
I pasted all of this information into. And another thing, and then you would want
to save this, and another thing to make sure that all of the “exclude scripts” from Autoptimize it
– somehow it automatically inserts things in here – take all of that out. Take out the exclude CSS because it will automatically
pop in some code in there, take all of that out and then you also need to click just about
as many boxes as you can. Your also going to aggregate inline JSS, I
found that I get a higher score when I remove Google fonts. You might have to do some changes in CSS to
make your website look pretty again but for some reason, sometimes that will slow up a
website considerably. Generate URI’s for images, also aggregate
inline CSS, and that’s everything and this was automatically already clicked. And then I hit “save changes and empty cache”
and now we have fixed something. Let’s just take a look and see what we’ve
done. Much higher score. You can see that there is still a code that
that is in here that they want me to fix but it has taken away a lot of the other things
that were in there on my original list. Sorry I don’t have a screen shot of that. And so, that has considerably reduced the
problem and increased the score so that is all for this video. Thank you for watching!

Leave a Reply

Your email address will not be published. Required fields are marked *