All right guys.
So in this lecture we're gonna go ahead and move on to the next issue we have with our Web site.
In order to make it perform better and load faster now the next thing for us to move on to is under
the Performance tab.
And it is this one.
And it says eliminate random blocking javascript and see assess in above the fold content.
OK so let's break that down what it is now javascript is a computer language is the language that the
computer and the web browser understands and Javascript is basically what executes the many of the effects
on our Web site.
The design of our web.
Right.
See assess are the codes we've been using to do different changes on our Web site like we've been using
a certain code for our mail poet forum we've been using a code for a sticky menu etc. Those are CSX
codes which are codes.
Now the problem with this is that they are render blocking.
So what does render blocking mean it means that these need to execute before the Web site can load properly.
Right.
And they take their time to execute.
And because it takes a while it increases the loading speed.
So what we want to do is eliminate the render blocking javascript and see yeses in above the fold content.
And the reason we only want to eliminate it in above the full content is because when you load a Web
site doesn't really matter how long it takes for all of this to be loading or any of this because the
only thing that you'll be seeing on your Web site or on your mobile if you're loading the Web site there
on your screen is going to be the above the full content.
So everything here you want to load as quickly as possible.
So let's go ahead and eliminate those javascript and those C assesses.
So what we're gonna do is move over to our dashboard because we're gonna use plug ins for this and then
we're going to keep testing to make sure we get the responses that we want.
Now we're going to move down to plug ins and click on Add a new plug in and we are going to search for
our two team Miles.
It's sounds kind of like all too optimized but it only has a single Oh so it's oped auto optimization
kind of a mouthful.
So here it is it has over 900 thousand active installations and it's going to be helping us with the
the javascript and to see assess where we're going to go ahead and install it and then I'm going to
click on activate and now we're going to move over to settings and this is where we start activating
the different functions.
So we're also able to optimize the HDMI line even though we don't have any issues with that optimizations
generally tend to be.
You can decide for yourself if you want to activate this or not.
Now then we have the javascript options and the C says options.
I'm gonna go ahead and click this one in and I'm gonna go ahead and click this one in as well so that
they get optimized.
Then I'm going to click on save changes.
Now if we look back and we look at our test results right here and I click down here we can see that
there are four javascript there are blocking and a C in CSX resources now because there are so many
see us as resources the auto optimized generally isn't enough on its own to take care of all of them.
So what I'm gonna go ahead and do as well is move over once again to plug ins and click on add new.
And now I'm going to search for auto demise again.
I mean that word is really hard to say.
And now I'm going to use the other plug in called Critical c.
SS Now what this is gonna do is take care of even more C CSX and even more specifically the above the
fold CSX.
So I'm gonna go ahead and click on install now and then I'm gonna click on activate perfect it is installed
now in order to get to it.
All we need to do is go to auto optimize in here and click on settings again because it's the same company
who's been doing it is gonna be added in.
You can see here with this critical CSX.
But it will also be added in the main and this is where we have the main features.
So now we are in here and we have the critical CSX ad and then it will be added in the main.
If you don't see these changes all you need to do is click on the refresh button up here and it will
solve itself.
Now there is one thing specifically we want to do in here and that is to scroll down and we're gonna
see that there is something here that says in line above the fold CSX while loading main optimize C
it says only after page load.
So we want specifically the above the fold content to have their CSX optimize.
And the way that a lot of plug ins does this even though this is a bit of extra information is that
they prefer to put the CSX in the footer and you will know that the food is all the way down.
Right.
So that means it's going to load later but it doesn't matter because what is important is that the above
the fold.
Sexual lows as quickly as possible because the second that lowers that second your website becomes available
and visitors can start using and that's gonna take a couple of seconds.
And by then the rest of the website will already have been loading itself and functioning.
So what I'm gonna go ahead and do here actually in order to get this sea assessed from above the fold
is to use a website called Site low city.
And I'm gonna put this of course in the resources so you can easily just grab it.
Now all we need to do here is write our site like that and then click on generate critical path c assess.
And this is gonna give us all the four above the fold CSX which is that is gold honestly.
And now we just scroll down and we're gonna have it all in here you just need to click on this once
it's all gonna select itself right click and I'm gonna copy this.
Okay now I'm gonna go back to or to optimize in here and I am going to paste it in.
There we go.
And now I'm gonna scroll all the way down and click on save changes settings has been saved.
So what do you want to do now.
Well of course we want to do a new test to make sure that it is loading properly and that we have less
request and we can see that these issues are disappearing.
So I'm just going to write in our website here and then click on Start testing.
And as we can see there is a lot of really nice improvements going on look at these requests have gone
down to thirty one do we see the previous one.
Now the previous one had sixty requests going on and now this one is having thirty one.
Now the total size we see has gone down as well but I'm noticing that this is loading slightly different
sizes.
What's important to know is that it is under one megabyte right.
And it's quite well below one megabyte and the loading speed has improved as well which is amazing.
And it's a lot loading from London UK.
Incredible absolutely incredible stats right now our performance grade is up from 56 to 63.
But most importantly let's go down and check this out.
We can see that the only issue right now is that we have one blocking javascript and that is the g requiring
that G S and actually this one generally is the themes javascript.
So the theme wants to be loading itself before we actually execute and showed the website and there
are ways around this but honestly in my experience this is not a problem.
If you have a theme that really wants to use this javascript and not defer it we can use this one.
So I'm gonna leave this and I am actually super happy with these stats.
Now guys if you've installed this plug ins and you are still having javascript which are an issue right
here there is one more thing that you can do now if you don't have that issue you can move onto the
next lecture but if you do stay around and I will show you.
So we're gonna go back in here and we're going to move over and install yet another plug in.
I mean if there's a problem there's no blogging right.
So we're gonna click on add new and now we're going to search for a sync javascript.
And here we go and we are gonna click on install.
Now we don't actually need this this is for demonstration purposes.
Right.
And then I'm gonna click on activate and then we're going to move over to settings and then all you
need to really do is go ahead and click on enable async javascript and then scroll down and save settings.
OK.
Now before we move on there's a couple of things that I want to show you.
There are two different ways of using the async javascript.
Either you could async or you could defer to JavaScript and the differences with the async that is going
to allow the javascript to execute as soon as they have load and in other words whenever there is something
on your Web site loading you're just going to let that show up on the screen before everything else
is done.
Right.
The problem with that is that if the wrong things are loading too quickly Your theme is going break
so you're gonna see like this really ugly version off your Web site for about maybe half a second and
then all of the effects on the designs and everything is gonna be applied.
And that is not a great thing.
So for some people and some themes and Web site the async is not gonna work well that's when you can
use to defer and then defer method means that you're going to collect all of these loadings together
and when all of the most important ones for the great looks are all done then they will execute.
So you get this greater look on your Web site.
Now the problem with that is that sometimes that is a little bit slower but you never want to break
your theme on the loading.
So how do you know which one to use.
That's quite simple actually because we already have this uptime to do the testing first off so we can
check these Altair and all you really need to do is go ahead and grab a private tab and check out your
website go to your website.
If the async isn't working then go with the defer.
Just do what works right.
You're going to see if your website if your theme is breaking if it is it's not working right.
So guys that is it.
This is how we solve the problem of the render blocking javascript and see it says in above the fold
content.
So our Web site is getting better and better faster and faster.
Let's move on to the next lecture.
Okay.
And if you have any questions of course.
And as always we'll be in the Q and A C in the next lecture.