WEBVTT 00:00.350 --> 00:07.760 All right guys in this lecture we're gonna go ahead and learn how to speed test our website. 00:07.770 --> 00:16.470 Now this is very important because the loading speed of your website determines how your visitors experience 00:16.560 --> 00:17.970 your website. 00:17.970 --> 00:20.340 Remember user experience. 00:20.370 --> 00:27.390 Now there is some pretty crazy statistics that show that if your Web site takes five seconds or longer 00:27.390 --> 00:32.660 to load then up towards 70 percent of your visitors will leave. 00:33.040 --> 00:39.750 And similarly if your website takes two seconds to load then up towards thirty four percent of your 00:39.750 --> 00:41.290 visitors will leave. 00:41.290 --> 00:47.790 Now guys that's 1 2 seconds that people are not willing to wait for it to load. 00:47.790 --> 00:49.240 That's insane. 00:49.260 --> 00:54.130 So we need to keep up making sure that our website loads quickly. 00:54.460 --> 00:58.980 Otherwise if we're going to lose all the traffic they are not going to experience all this beautiful 00:59.010 --> 00:59.950 design. 01:00.090 --> 01:00.850 Right. 01:00.900 --> 01:08.700 So we're going to go ahead and use a tool called uptime and this will of course be in the resources 01:08.970 --> 01:11.040 you can just go ahead and access it there. 01:11.220 --> 01:16.980 And we're going to go ahead and see how long it takes for our Web site to load and see what is delaying 01:16.980 --> 01:18.340 it if it's taking long. 01:18.360 --> 01:23.280 Now what I'm going to do here is actually use two tabs so I'm going to use one for the website that 01:23.400 --> 01:24.310 I have created. 01:24.360 --> 01:25.390 Right. 01:25.440 --> 01:31.890 And then another tab with the same uptime where you can go ahead and check your competitors loading 01:31.890 --> 01:38.100 time or simply someone who you have based your design off of because that's going to give you a good 01:38.100 --> 01:44.690 hint of what you are missing out when it comes to loading times and when it comes to optimizations. 01:44.700 --> 01:51.870 So what I'm going to go ahead and do is go ahead and grab are you l like that I'm going to cockpit and 01:51.870 --> 01:59.190 then I'm gonna go ahead remove this and just pasted in there we go and I'm going to click on Start testing 01:59.190 --> 02:05.140 and I'm going to leave it at random location STAR test and then I'm gonna go to Pat Flynn's website. 02:05.160 --> 02:10.320 We're actually going to use his Web site because we have been checking him out so much and basting a 02:10.320 --> 02:12.780 lot of our designs on his Web site. 02:12.900 --> 02:15.980 I'm gonna go and grab his year I'll copy it. 02:16.110 --> 02:23.340 Go back here remove this paste it in and then click on Start testing I'm going to leave this on random 02:23.340 --> 02:26.000 to that's not completely fair but it isn't. 02:26.010 --> 02:29.160 Anyway we just want a comparison chart. 02:29.190 --> 02:35.940 Chances are he has a much higher budget and people working for him to optimize his website to the next 02:35.940 --> 02:36.650 level. 02:36.660 --> 02:38.550 Now we probably don't have that. 02:38.550 --> 02:41.730 We still want something to compare to. 02:41.730 --> 02:42.570 All right guys. 02:42.570 --> 02:44.730 So the results are in. 02:44.730 --> 02:47.810 And honestly it's not looking too good. 02:47.820 --> 02:53.800 So looking at this we can see that our loading time based off of Sydney Australia now. 02:53.840 --> 02:59.100 But anyhow our loading time is over four seconds. 02:59.100 --> 03:03.200 Now this is milliseconds so that means that every thousand is a second. 03:03.240 --> 03:07.470 So the loading time for our website is four point two seconds. 03:07.470 --> 03:11.370 Now remember how much traffic we lost at two seconds. 03:11.430 --> 03:15.020 Can you imagine how much we're gonna lose that three and now even four. 03:15.060 --> 03:21.990 We're almost at five seconds which means we're probably touching that 70 percent of lost traffic. 03:21.990 --> 03:26.810 This is a massive deal breaker and we're gonna need to optimize this. 03:26.910 --> 03:31.710 We see that we have a lot of requests requests being that there are certain things that needs to load 03:31.890 --> 03:37.350 between the C assess and a javascript we don't need to go in detail on this just that there's a lot 03:37.350 --> 03:43.480 of things going on on our website that's probably not helping with the loading time and the total site 03:43.500 --> 03:47.280 for our website is two point seven megabyte guys. 03:47.280 --> 03:49.050 That is too big. 03:49.050 --> 03:54.300 Now honestly the goal is to get below a 1 megabyte for your site. 03:54.360 --> 04:00.930 Okay so two point seven That is just too big and we're gonna have to fix that if you make it really 04:00.930 --> 04:01.830 professional. 04:01.830 --> 04:05.420 You might even manage to go on the under 500 kilobytes. 04:05.520 --> 04:08.280 Now that's zero point five megabytes. 04:08.400 --> 04:14.940 We can see that we have a low performance grade 4 to 4 out of 100 based on the previous statistics but 04:14.940 --> 04:17.880 our mobile usability is really high. 04:17.880 --> 04:24.930 And that is thanks to the ocean WP theme and of course Elementary which is already making it mobile 04:24.930 --> 04:26.430 responsive for us. 04:26.730 --> 04:28.800 So thank you for that. 04:28.860 --> 04:31.300 And then we see where this test is based. 04:31.410 --> 04:35.130 So let's go ahead and check out Pat Flynn's Web site. 04:35.160 --> 04:42.240 Now we can see that he has such a much faster loading time a much much much faster loading time right. 04:42.270 --> 04:48.000 So he's loading time is sero point three seconds almost zero point four seconds. 04:48.450 --> 04:55.650 But anyway it's below 1 A second is also worth noting that he is loading from the U.S. while we are 04:55.650 --> 04:57.020 loading from Australia. 04:57.030 --> 05:01.160 So there is some difference but still the difference is massive. 05:01.160 --> 05:03.640 He is a lot less requested that also helped. 05:03.940 --> 05:05.070 But look at this. 05:05.080 --> 05:06.610 This is vital. 05:06.610 --> 05:10.970 The total size of his Web site is six hundred and thirty kill right now. 05:10.980 --> 05:13.510 That's zero point six megabytes. 05:13.660 --> 05:18.550 So we need to drastically lower the size of our Web site to speed it up. 05:18.550 --> 05:23.600 Looking at his performance grade we can see that he doesn't top the scales here either. 05:23.680 --> 05:25.510 He doesn't have hundred out of 100. 05:25.510 --> 05:32.710 And guys you don't want necessarily to top the performance scale because the higher your performance 05:32.710 --> 05:40.480 is usually the more your design has to suffer right because the more high quality pictures you're using 05:40.570 --> 05:43.120 the more interactive features you're using. 05:43.150 --> 05:45.680 All of these things take time to load. 05:45.700 --> 05:53.000 So what do you want to do is find a balance between user experience and the user interface. 05:53.140 --> 06:00.130 So seventy three might actually be a really really good number because we know that his website is beautifully 06:00.130 --> 06:03.930 designed and there's a lot of wonderful features going on here. 06:04.120 --> 06:10.150 So the fact that he can have all of this wonderful design and still load so quickly that is amazing. 06:10.150 --> 06:15.280 Remember this when you're doing the test you don't want to go too much into performance and make the 06:15.280 --> 06:16.510 design suffer. 06:16.720 --> 06:18.810 It's all about the balance here. 06:18.820 --> 06:22.960 Mobile usability is going ranking really high as well. 06:22.960 --> 06:25.710 So let's go back to our own website here. 06:25.780 --> 06:32.430 Now the interesting thing is that if we scroll down we can actually see what is the problem on our website 06:32.460 --> 06:33.240 right. 06:33.280 --> 06:38.680 So what we see here is that we have an issue with optimizing our images they're not optimized in other 06:38.680 --> 06:45.310 words we have something called render blocking javascript and c assessed in the above the fold content. 06:45.340 --> 06:51.940 Remember above the fold that is gonna be all of this and everything here is down below the fold and 06:51.940 --> 06:58.450 then we have reduced server response time and leverage browser caching. 06:58.690 --> 07:05.230 What we're going to go ahead and do guys in the upcoming lectures here is to go through all of these 07:05.440 --> 07:12.100 and correct them and make sure that our website loads much much faster and optimize everything. 07:12.250 --> 07:12.700 Okay. 07:12.910 --> 07:19.060 Because this is going to make our user experience suffer a lot is gonna make our CEO suffer a lot. 07:19.090 --> 07:24.880 Basically you're not gonna be able to have a sustainable business with this sort of slow Web site. 07:24.880 --> 07:25.330 Okay. 07:25.480 --> 07:27.060 So we need to correct this. 07:27.070 --> 07:30.030 And honestly it's quite exciting to do. 07:30.160 --> 07:31.210 This is a vital step. 07:31.210 --> 07:33.550 Don't miss out this section in the course. 07:33.550 --> 07:34.830 See you in the next lecture. 07:34.830 --> 07:35.140 Guys.