WEBVTT 00:00.330 --> 00:02.400 All right guys welcome back. 00:02.400 --> 00:08.060 Now let's do some further troubleshooting for when you speed testing your Web site. 00:08.070 --> 00:12.210 So we've gone through a couple of issues already in the Performance tab right. 00:12.210 --> 00:17.460 We have done the first eliminating the render blocking javascript and assessed in the above the fold 00:17.490 --> 00:18.430 content. 00:18.450 --> 00:19.860 Now that's a mouthful. 00:19.860 --> 00:21.900 We have optimized our images. 00:21.930 --> 00:26.940 We've gone through leveraging browser caching which we know is more of an expiration time than actual 00:26.940 --> 00:28.350 caching time. 00:28.530 --> 00:34.200 And we have also looked at how to reduce the server response time and we have reduced the response time 00:34.200 --> 00:38.800 and gone through some options for further reducing it should we want to do that. 00:38.810 --> 00:41.050 Now let's look at the other couples here now. 00:41.190 --> 00:41.880 There is more. 00:41.880 --> 00:43.320 That's green for us. 00:43.320 --> 00:47.640 And the reason that they're being this because a lot of these we have gotten for free as we have been 00:47.640 --> 00:49.030 building up our Web site. 00:49.020 --> 00:54.990 Now the first one is called magnifying HCM million you're going to notice that we have many ECMO many 00:54.990 --> 00:59.020 efficiency yeses and down here many fine javascript. 00:59.070 --> 01:05.190 So what is magnifying what basically means filing is when you are shortening the code. 01:05.190 --> 01:05.840 Right. 01:05.910 --> 01:12.330 Because ACM Mel C says in JavaScript are all different types of codes and what many find the code does 01:12.650 --> 01:21.210 is that it saves up space by making it unreadable for humans but still completely readable for computers. 01:21.210 --> 01:26.820 So all of this space is that they make in the codes for humans like us to understand and be able to 01:26.820 --> 01:32.010 program they remove their city remove size and they remove all of the weight they unnecessary space 01:32.340 --> 01:33.390 compress it. 01:33.510 --> 01:38.090 Basically it is a compression but the computers are still able to use it. 01:38.100 --> 01:41.010 But as humans it just looks like a big mess. 01:41.020 --> 01:42.670 So let me show you what I mean. 01:42.690 --> 01:48.120 So here we have a very simple code for chinks in the color position of the input fields. 01:48.120 --> 01:52.040 When you are doing a form for mail port for example. 01:52.110 --> 01:55.410 So this is how a normal code looks like when you minute fired. 01:55.500 --> 02:00.570 We're gonna remove all of this space all of this wasted space over here. 02:00.900 --> 02:08.820 So what we would be doing then while modifying is going on and going in like this going in like this 02:09.780 --> 02:14.450 and going in like this and this. 02:14.460 --> 02:21.630 So if you are doing any form of coding or programming and you get a bunch of code and it would be looking 02:21.630 --> 02:26.160 like this and let's say that there is a lot of code and eventually it's going to be looking like this 02:26.380 --> 02:31.450 but would a bunch of different inputs that is just going to be one big mess right. 02:31.470 --> 02:37.350 Because there is no spaces but with the magnifying does this that it does save this space by using it 02:37.380 --> 02:43.080 all in one line is quicker to execute and the file itself is smaller and it works much better or at 02:43.080 --> 02:44.870 least much faster for the computers. 02:44.880 --> 02:49.530 But a human is not going to be able to code but you don't need to code this because you just need to 02:49.620 --> 02:50.970 execute it. 02:51.000 --> 02:57.060 So that is what I mean if flying is and the mini flying we get from our plug in from our cash plug ins. 02:57.060 --> 02:57.730 Right. 02:57.750 --> 03:00.810 And the cash plug in you could basically be using any. 03:00.960 --> 03:07.610 But we are using down in the setting say we are using the WP super cache plug in which Dustin unifying 03:07.620 --> 03:08.250 for us. 03:08.370 --> 03:16.080 But the WP super cache not only mini files but it also caches it into a static file so it puts all of 03:16.080 --> 03:19.400 those files all of the manifold files in the cache and then. 03:19.420 --> 03:22.710 So it is one step further from mini filing. 03:22.710 --> 03:27.930 So it makes all of the files very tiny very much compressed puts us in a cache and then puts it in the 03:27.930 --> 03:30.210 user's computers it loads faster. 03:30.210 --> 03:30.970 OK. 03:31.050 --> 03:37.230 Now if you don't have a catch all you need to do is go to plugins add new and search for cash and there 03:37.230 --> 03:39.920 are a lot of really wonderful cache plugins. 03:39.930 --> 03:48.240 Now honestly I've used the W W three the fastest cache super cache or top demise and they all work. 03:48.240 --> 03:50.700 I'm sure this one works as well they all really work. 03:50.700 --> 03:56.310 But the one that I find most effective and easy is that I prefer the WP super cache which is why we 03:56.310 --> 03:57.360 are using it. 03:57.430 --> 04:00.510 We get a lot for free like them unifying here. 04:00.540 --> 04:06.240 Now the next thing is to enable compression and compression is basically when you have a file and you 04:06.240 --> 04:12.600 make it smaller so magnifying is a form of compression for each chair Mel for the C assessed for the 04:12.600 --> 04:13.220 javascript. 04:13.410 --> 04:17.420 But most importantly what is the heaviest on our website are the images. 04:17.430 --> 04:18.070 Right. 04:18.090 --> 04:25.200 So we've been spending our time optimizing our images big time by going for P and G to G pig and also 04:25.410 --> 04:32.280 by compressing them into a lower resolution file files so we save a lot a lot of space and increase 04:32.280 --> 04:39.440 our loading time and that is compression and we have it enable also through plugins like Smush for example 04:39.450 --> 04:44.900 so whenever we upload any form of image to our media libraries much automatically compresses it. 04:44.910 --> 04:48.950 Then we also have the avoid landing page redirect. 04:48.990 --> 04:54.300 So if you have an issue with the compression what you can do is go ahead and download a plugin like 04:54.300 --> 04:59.460 smushed is going to compress and also make sure that you do compress your images and actually use a 04:59.460 --> 05:05.900 cache plug into magnify your files for example and cache all of your files to improve the loading speed 05:06.200 --> 05:10.710 and use as much compression as possible on all the fast that can be compressed. 05:10.780 --> 05:18.380 Now next up is avoid landing page redirect now a redirect is when you get sent from one page to another. 05:18.410 --> 05:24.760 So for example let's say that you were going into ETP Robin and Jasper dot com. 05:25.130 --> 05:32.320 But then this page actually redirects you to the H TTP s version of the page right. 05:32.330 --> 05:33.950 So that would be one redirect. 05:34.220 --> 05:43.210 But now this page also redirects you to the W W part of the page and then this space does to redirect. 05:43.220 --> 05:46.980 And then this one redirects to the forward slash home. 05:47.000 --> 05:52.670 So now we would be having three unnecessary redirects that's going on on our website but we could use 05:52.670 --> 05:56.690 to be sent from the first to the last without all of this middle redirects. 05:56.690 --> 05:57.470 Right. 05:57.470 --> 06:01.500 So this can sometimes happen when we get an issues with our SSL. 06:01.550 --> 06:02.630 Remember the SSL. 06:02.960 --> 06:09.110 So we go from H TTP to H2 P S but then maybe there's something wrong with h t the P S is gonna send 06:09.110 --> 06:14.180 you back to HDP etc. or any form of loop issue going on. 06:14.300 --> 06:19.810 Or maybe the page has just been set up in such a way that there are a lot of redirects but if you're 06:19.820 --> 06:25.700 having this issue or there's something broken or you mean changing the URL all you need to do is go 06:25.700 --> 06:32.660 ahead and go to the plugins and go to plugins add new and search for something called redirect. 06:32.870 --> 06:37.820 Now in here there's gonna be this plugin called redirection you can just install it and start using 06:37.820 --> 06:38.360 it right away. 06:38.360 --> 06:42.280 It's super simple to use is going to ask you for the input. 06:42.500 --> 06:49.610 So when a person writes this You URL they will be sent to this euro so you just write in the URL that 06:49.610 --> 06:54.070 you want people to use and then where you want them to be sent super easy. 06:54.080 --> 06:59.720 There will be redirected where you want them so you don't need any more middle hand redirects if you 06:59.720 --> 07:00.080 will. 07:00.590 --> 07:07.670 So super easy to use and then we also have prioritized visible content and what this means is that we 07:07.670 --> 07:12.370 are prioritizing loading and rendering the above the fold content. 07:12.920 --> 07:20.030 So when our page is being downloaded what is going to be downloaded first and foremost is going to be 07:20.300 --> 07:23.330 the from the above the fold section on our page. 07:23.330 --> 07:29.630 This section you see how fast that loaded now everything down below most likely loaded after all of 07:29.630 --> 07:35.990 this has been loaded already and that is because when people come to our website so that this page gets 07:35.990 --> 07:37.740 loaded right away right. 07:37.740 --> 07:44.690 So that is prioritizing these content to be loading first now everything that is below and most likely 07:44.690 --> 07:50.690 will have loaded slower but that doesn't matter because when people visit our site we want to make sure 07:50.900 --> 07:57.340 that they are seeing all of this right away and then everything down below can take its time to be loading. 07:57.500 --> 08:00.200 And that is what they mean with prioritizing visible content. 08:00.210 --> 08:00.740 So. 08:00.790 --> 08:06.670 So if you're having an issue with this most likely the problem is going to be with your cache plugin. 08:06.680 --> 08:11.630 Or rather a lack of cache plug in because the cache plugin is going to make sure that you prioritize 08:11.660 --> 08:17.240 automatically loading all of the most important file in the above the fold section and everything that 08:17.240 --> 08:23.150 it's not important will be loading lower down because it takes longer but they don't need to be loaded. 08:23.150 --> 08:29.330 So if we scroll down we also have mobile usability and we're getting a lot for free here for two reasons. 08:29.330 --> 08:36.590 One we're using the ocean WP theme which is already mobile friendly and mobile adapted but also because 08:36.800 --> 08:43.010 everything you do on Allan Meltzer is also very mobile friendly so it's extremely giving and you get 08:43.010 --> 08:46.140 a lot for free by using these tools. 08:46.170 --> 08:51.110 Now we actually do have an error here that says sites tap targets appropriately. 08:51.110 --> 08:57.020 If I click on it it says the taps are your privacy policy is close to one other tab targets final and 08:57.020 --> 09:03.590 most likely it means that in the footer of Privacy Policy and Terms and Conditions and links are too 09:03.590 --> 09:05.270 close on the mobile version. 09:05.270 --> 09:11.990 But that is fine because we haven't gone gone ahead and adapted our website to the mobile responsiveness 09:12.020 --> 09:14.550 and to the tablet responsiveness yet right. 09:14.570 --> 09:21.110 Our website is responsive for tablet and for mobile but we haven't redesigned them specifically for 09:21.110 --> 09:21.940 them yet. 09:21.950 --> 09:28.100 We're gonna do that in an upcoming lecture so this will be taking care of itself soon and then we have 09:28.100 --> 09:29.850 used legible font sizes. 09:29.860 --> 09:37.040 And this is more of an opinion of uptime which they are asking you to use a certain font size and certain 09:37.040 --> 09:41.080 amount of words per column so that generally your site will look good. 09:41.090 --> 09:45.650 And we do fill up this criteria but this is more an opinion than anything. 09:45.680 --> 09:48.880 Now we have this sized content to viewport right. 09:48.920 --> 09:54.680 And this one makes sure that you don't have to assume in on your cell phone when you're using it in 09:54.680 --> 09:58.460 order to read the content because that takes away from the user experience. 09:58.460 --> 10:03.790 Big big time so when you enter a website on your cell phone you want to make sure that you can just 10:03.790 --> 10:04.840 go ahead and scroll. 10:04.900 --> 10:11.740 Everything will be served readable accessible and look really good but if there is no content that it's 10:11.740 --> 10:17.470 been signed to the viewport you're gonna have to swoop in on your screen all the time and that kills 10:17.710 --> 10:18.840 user experience. 10:19.180 --> 10:23.240 So this just means that it is sized appropriately and it was again ocean WP. 10:23.380 --> 10:24.980 And of course Elementary. 10:25.000 --> 10:26.330 Thank you. 10:26.350 --> 10:32.020 And here that you need to configure the viewport how far out or how far in you want it to be soon. 10:32.740 --> 10:36.430 And then this one to be honest it's quite random it says avoid plugins. 10:36.430 --> 10:42.520 Now if I go ahead and click on this it takes me to a developer the Google dot com site that doesn't 10:42.520 --> 10:44.070 even seem to exist. 10:44.110 --> 10:46.090 I'm not sure why you would want to avoid plugins. 10:46.090 --> 10:48.270 I think this one is very random. 10:48.520 --> 10:53.710 But if we do look at Pat Flynn here and we scroll down he actually has this small error here and that 10:53.710 --> 10:58.330 is he's media player that he has or rather is a Flash Player. 10:58.330 --> 11:02.120 But this one honestly you don't need to be concerned about right. 11:02.410 --> 11:07.090 Unless there is some plug in it is taking a huge amount of space or that is crashing your Web site. 11:07.090 --> 11:11.870 But generally this one is not going to matter there's nothing you need to do about it. 11:12.040 --> 11:18.970 But guys if you are not using ocean WP and you're not using Eliminator which you should in my opinion 11:19.450 --> 11:26.440 then what you can do to make your website more mobile responsive is actually to go here and go to your 11:26.440 --> 11:30.040 dashboard plugins and then click on add new. 11:30.220 --> 11:37.810 And then just search for a MP now a MP stands for accelerated Mobile Pages was going to make it much 11:37.810 --> 11:41.690 faster on your phone and also going to make it mobile friendly. 11:41.690 --> 11:47.640 Now honestly I haven't used this one or this one because I basically always use elementals. 11:47.650 --> 11:51.620 I don't need to use this because elemental makes it mobile friendly as it is. 11:51.670 --> 11:57.160 But if you don't want to use elements or for some reason and you're also using a theme which is not 11:57.160 --> 12:03.480 mobile friendly by default you can use one of these two plug is gonna make it mobile friendly for you. 12:03.490 --> 12:03.980 OK. 12:04.090 --> 12:09.910 So these are all of the possible arrows now as you're using other tests such as Google's peach speed 12:09.940 --> 12:16.120 insides and ping them for example which are other tools to be measuring your website performance loading 12:16.120 --> 12:20.800 speed etc. you're gonna notice that you're probably going to get different results first and foremost 12:21.220 --> 12:24.160 and also you're going to get different recommendations. 12:24.220 --> 12:30.190 Again I recommend that you don't go too deep into this because you want to make sure that your website 12:30.220 --> 12:38.230 is fast it is effective it is a high user experience high user interface but don't go overboard aiming 12:38.230 --> 12:44.230 for the perfect score because in the end that sort of obsession tends to just hurt the Web site focus 12:44.230 --> 12:48.310 on what's important and don't major in the minors right. 12:48.310 --> 12:55.150 Look at the big problems fix them make it better get the seed and get the cash et cetera and then move 12:55.210 --> 12:55.420 on. 12:55.420 --> 12:57.480 This is my recommendation guys. 12:57.610 --> 12:59.910 Now let's move onto the next lecture. 12:59.920 --> 13:05.560 In the course and of course if you have any questions we'll be in the Q and A but we're going to address 13:05.560 --> 13:08.460 something very important in the next lecture as well. 13:08.470 --> 13:09.010 See you there.