WEBVTT 00:00.280 --> 00:01.130 All right guys. 00:01.140 --> 00:07.100 So in this lecture we're gonna go ahead and move on to the next issue we have with our Web site. 00:07.200 --> 00:13.440 In order to make it perform better and load faster now the next thing for us to move on to is under 00:13.440 --> 00:14.870 the Performance tab. 00:15.000 --> 00:16.470 And it is this one. 00:16.470 --> 00:21.850 And it says eliminate random blocking javascript and see assess in above the fold content. 00:22.200 --> 00:28.860 OK so let's break that down what it is now javascript is a computer language is the language that the 00:28.860 --> 00:36.120 computer and the web browser understands and Javascript is basically what executes the many of the effects 00:36.120 --> 00:37.110 on our Web site. 00:37.110 --> 00:38.720 The design of our web. 00:38.730 --> 00:39.580 Right. 00:39.590 --> 00:45.240 See assess are the codes we've been using to do different changes on our Web site like we've been using 00:45.240 --> 00:52.480 a certain code for our mail poet forum we've been using a code for a sticky menu etc. Those are CSX 00:52.590 --> 00:54.750 codes which are codes. 00:54.750 --> 00:58.740 Now the problem with this is that they are render blocking. 00:58.740 --> 01:06.660 So what does render blocking mean it means that these need to execute before the Web site can load properly. 01:06.660 --> 01:07.260 Right. 01:07.290 --> 01:09.920 And they take their time to execute. 01:10.050 --> 01:13.750 And because it takes a while it increases the loading speed. 01:13.770 --> 01:21.450 So what we want to do is eliminate the render blocking javascript and see yeses in above the fold content. 01:21.480 --> 01:26.930 And the reason we only want to eliminate it in above the full content is because when you load a Web 01:26.950 --> 01:33.660 site doesn't really matter how long it takes for all of this to be loading or any of this because the 01:33.660 --> 01:39.810 only thing that you'll be seeing on your Web site or on your mobile if you're loading the Web site there 01:39.810 --> 01:43.500 on your screen is going to be the above the full content. 01:43.590 --> 01:47.080 So everything here you want to load as quickly as possible. 01:47.130 --> 01:52.110 So let's go ahead and eliminate those javascript and those C assesses. 01:52.190 --> 01:57.810 So what we're gonna do is move over to our dashboard because we're gonna use plug ins for this and then 01:57.810 --> 02:02.770 we're going to keep testing to make sure we get the responses that we want. 02:02.790 --> 02:08.610 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 02:08.720 --> 02:11.720 our two team Miles. 02:11.830 --> 02:18.650 It's sounds kind of like all too optimized but it only has a single Oh so it's oped auto optimization 02:18.930 --> 02:20.750 kind of a mouthful. 02:20.790 --> 02:27.070 So here it is it has over 900 thousand active installations and it's going to be helping us with the 02:27.310 --> 02:31.800 the javascript and to see assess where we're going to go ahead and install it and then I'm going to 02:31.800 --> 02:38.490 click on activate and now we're going to move over to settings and this is where we start activating 02:38.490 --> 02:39.800 the different functions. 02:39.840 --> 02:45.420 So we're also able to optimize the HDMI line even though we don't have any issues with that optimizations 02:45.450 --> 02:46.830 generally tend to be. 02:46.830 --> 02:50.580 You can decide for yourself if you want to activate this or not. 02:50.640 --> 02:54.130 Now then we have the javascript options and the C says options. 02:54.150 --> 02:59.010 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 02:59.010 --> 03:00.170 they get optimized. 03:00.270 --> 03:02.810 Then I'm going to click on save changes. 03:02.820 --> 03:09.240 Now if we look back and we look at our test results right here and I click down here we can see that 03:09.240 --> 03:17.310 there are four javascript there are blocking and a C in CSX resources now because there are so many 03:17.310 --> 03:23.520 see us as resources the auto optimized generally isn't enough on its own to take care of all of them. 03:23.820 --> 03:30.470 So what I'm gonna go ahead and do as well is move over once again to plug ins and click on add new. 03:30.600 --> 03:35.050 And now I'm going to search for auto demise again. 03:35.440 --> 03:37.890 I mean that word is really hard to say. 03:38.040 --> 03:42.140 And now I'm going to use the other plug in called Critical c. 03:42.130 --> 03:48.780 SS Now what this is gonna do is take care of even more C CSX and even more specifically the above the 03:48.780 --> 03:50.390 fold CSX. 03:50.460 --> 03:56.310 So I'm gonna go ahead and click on install now and then I'm gonna click on activate perfect it is installed 03:56.310 --> 03:57.860 now in order to get to it. 03:57.870 --> 04:04.440 All we need to do is go to auto optimize in here and click on settings again because it's the same company 04:04.470 --> 04:06.950 who's been doing it is gonna be added in. 04:06.990 --> 04:08.860 You can see here with this critical CSX. 04:09.060 --> 04:13.060 But it will also be added in the main and this is where we have the main features. 04:13.080 --> 04:18.600 So now we are in here and we have the critical CSX ad and then it will be added in the main. 04:18.600 --> 04:23.250 If you don't see these changes all you need to do is click on the refresh button up here and it will 04:23.430 --> 04:24.720 solve itself. 04:24.720 --> 04:30.000 Now there is one thing specifically we want to do in here and that is to scroll down and we're gonna 04:30.030 --> 04:35.060 see that there is something here that says in line above the fold CSX while loading main optimize C 04:35.060 --> 04:37.600 it says only after page load. 04:37.650 --> 04:44.310 So we want specifically the above the fold content to have their CSX optimize. 04:44.580 --> 04:48.970 And the way that a lot of plug ins does this even though this is a bit of extra information is that 04:48.970 --> 04:54.640 they prefer to put the CSX in the footer and you will know that the food is all the way down. 04:54.660 --> 04:54.990 Right. 04:55.230 --> 05:01.140 So that means it's going to load later but it doesn't matter because what is important is that the above 05:01.140 --> 05:01.780 the fold. 05:01.800 --> 05:09.660 Sexual lows as quickly as possible because the second that lowers that second your website becomes available 05:09.780 --> 05:13.280 and visitors can start using and that's gonna take a couple of seconds. 05:13.290 --> 05:18.720 And by then the rest of the website will already have been loading itself and functioning. 05:18.720 --> 05:24.210 So what I'm gonna go ahead and do here actually in order to get this sea assessed from above the fold 05:24.540 --> 05:27.760 is to use a website called Site low city. 05:27.960 --> 05:32.550 And I'm gonna put this of course in the resources so you can easily just grab it. 05:32.550 --> 05:40.940 Now all we need to do here is write our site like that and then click on generate critical path c assess. 05:41.010 --> 05:46.280 And this is gonna give us all the four above the fold CSX which is that is gold honestly. 05:46.560 --> 05:51.720 And now we just scroll down and we're gonna have it all in here you just need to click on this once 05:52.020 --> 05:56.680 it's all gonna select itself right click and I'm gonna copy this. 05:56.700 --> 06:02.730 Okay now I'm gonna go back to or to optimize in here and I am going to paste it in. 06:02.820 --> 06:03.930 There we go. 06:03.930 --> 06:10.010 And now I'm gonna scroll all the way down and click on save changes settings has been saved. 06:10.020 --> 06:12.240 So what do you want to do now. 06:12.240 --> 06:19.320 Well of course we want to do a new test to make sure that it is loading properly and that we have less 06:19.380 --> 06:22.580 request and we can see that these issues are disappearing. 06:22.650 --> 06:26.700 So I'm just going to write in our website here and then click on Start testing. 06:27.060 --> 06:33.420 And as we can see there is a lot of really nice improvements going on look at these requests have gone 06:33.420 --> 06:37.010 down to thirty one do we see the previous one. 06:37.080 --> 06:44.040 Now the previous one had sixty requests going on and now this one is having thirty one. 06:44.040 --> 06:49.500 Now the total size we see has gone down as well but I'm noticing that this is loading slightly different 06:49.500 --> 06:49.980 sizes. 06:49.980 --> 06:54.440 What's important to know is that it is under one megabyte right. 06:54.450 --> 07:00.670 And it's quite well below one megabyte and the loading speed has improved as well which is amazing. 07:00.780 --> 07:03.470 And it's a lot loading from London UK. 07:03.480 --> 07:10.890 Incredible absolutely incredible stats right now our performance grade is up from 56 to 63. 07:10.950 --> 07:14.670 But most importantly let's go down and check this out. 07:14.730 --> 07:21.780 We can see that the only issue right now is that we have one blocking javascript and that is the g requiring 07:21.800 --> 07:28.580 that G S and actually this one generally is the themes javascript. 07:28.620 --> 07:36.600 So the theme wants to be loading itself before we actually execute and showed the website and there 07:36.600 --> 07:41.190 are ways around this but honestly in my experience this is not a problem. 07:41.190 --> 07:47.730 If you have a theme that really wants to use this javascript and not defer it we can use this one. 07:47.730 --> 07:52.350 So I'm gonna leave this and I am actually super happy with these stats. 07:52.350 --> 07:58.620 Now guys if you've installed this plug ins and you are still having javascript which are an issue right 07:58.620 --> 08:03.960 here there is one more thing that you can do now if you don't have that issue you can move onto the 08:03.960 --> 08:07.800 next lecture but if you do stay around and I will show you. 08:07.830 --> 08:13.800 So we're gonna go back in here and we're going to move over and install yet another plug in. 08:13.830 --> 08:16.610 I mean if there's a problem there's no blogging right. 08:16.700 --> 08:22.740 So we're gonna click on add new and now we're going to search for a sync javascript. 08:23.310 --> 08:26.720 And here we go and we are gonna click on install. 08:26.730 --> 08:30.590 Now we don't actually need this this is for demonstration purposes. 08:30.600 --> 08:31.300 Right. 08:31.320 --> 08:37.740 And then I'm gonna click on activate and then we're going to move over to settings and then all you 08:37.740 --> 08:44.640 need to really do is go ahead and click on enable async javascript and then scroll down and save settings. 08:44.640 --> 08:45.160 OK. 08:45.210 --> 08:48.610 Now before we move on there's a couple of things that I want to show you. 08:48.630 --> 08:52.450 There are two different ways of using the async javascript. 08:52.500 --> 08:59.560 Either you could async or you could defer to JavaScript and the differences with the async that is going 08:59.560 --> 09:06.570 to allow the javascript to execute as soon as they have load and in other words whenever there is something 09:06.570 --> 09:12.300 on your Web site loading you're just going to let that show up on the screen before everything else 09:12.390 --> 09:13.220 is done. 09:13.230 --> 09:13.920 Right. 09:13.920 --> 09:19.500 The problem with that is that if the wrong things are loading too quickly Your theme is going break 09:19.500 --> 09:25.110 so you're gonna see like this really ugly version off your Web site for about maybe half a second and 09:25.110 --> 09:29.040 then all of the effects on the designs and everything is gonna be applied. 09:29.190 --> 09:31.070 And that is not a great thing. 09:31.080 --> 09:36.690 So for some people and some themes and Web site the async is not gonna work well that's when you can 09:36.690 --> 09:42.540 use to defer and then defer method means that you're going to collect all of these loadings together 09:42.780 --> 09:48.420 and when all of the most important ones for the great looks are all done then they will execute. 09:48.420 --> 09:51.650 So you get this greater look on your Web site. 09:51.690 --> 09:56.940 Now the problem with that is that sometimes that is a little bit slower but you never want to break 09:56.970 --> 09:58.960 your theme on the loading. 09:59.100 --> 10:01.280 So how do you know which one to use. 10:01.300 --> 10:07.110 That's quite simple actually because we already have this uptime to do the testing first off so we can 10:07.110 --> 10:14.070 check these Altair and all you really need to do is go ahead and grab a private tab and check out your 10:14.070 --> 10:15.920 website go to your website. 10:15.960 --> 10:19.730 If the async isn't working then go with the defer. 10:19.740 --> 10:21.590 Just do what works right. 10:21.600 --> 10:27.070 You're going to see if your website if your theme is breaking if it is it's not working right. 10:27.180 --> 10:29.010 So guys that is it. 10:29.010 --> 10:36.210 This is how we solve the problem of the render blocking javascript and see it says in above the fold 10:36.210 --> 10:37.110 content. 10:37.230 --> 10:40.480 So our Web site is getting better and better faster and faster. 10:40.480 --> 10:43.200 Let's move on to the next lecture. 10:43.230 --> 10:43.780 Okay. 10:43.830 --> 10:45.390 And if you have any questions of course. 10:45.390 --> 10:48.270 And as always we'll be in the Q and A C in the next lecture.