WEBVTT 00:00.240 --> 00:00.810 All right. 00:00.810 --> 00:06.780 My friends in this lecture we're gonna go ahead and do some problem solving together like we have for 00:06.780 --> 00:07.700 a while now. 00:07.770 --> 00:14.430 We're going to go ahead and optimize our image loading speed because we are not looking so impressive 00:14.430 --> 00:17.490 right now by the test we just did. 00:17.490 --> 00:23.340 So as you can see if you scroll down below we get some a couple of recommendations going on here. 00:23.340 --> 00:28.820 We have in the performance section we have the optimizing images eliminating render blocking reduced 00:28.820 --> 00:36.680 server response time leverage browser caching and then one at Mobile usability sidestep targets appropriately. 00:36.690 --> 00:40.140 Now we're going to go through them but we're going to do it step by step. 00:40.140 --> 00:44.160 So let's start with this one optimizing images. 00:44.160 --> 00:51.060 So if I click care it's actually going to tell me about approximately how much space I could save if 00:51.060 --> 00:53.270 I was just a tad bit smarter. 00:53.400 --> 00:59.970 And also which of the images that are actually causing problems so we can see for example we have the 01:00.210 --> 01:06.810 digital marketing seven courses in one image is actually it could be reduced by 97 percent. 01:06.810 --> 01:08.460 That's huge. 01:08.460 --> 01:12.960 And also we have the Amazon that can be reduced by 97 percent. 01:12.960 --> 01:16.260 We have the shopify image 97 percent. 01:16.260 --> 01:21.090 And these are all these images that we have just put up right now. 01:21.090 --> 01:24.540 They're taking a huge amount of space needlessly. 01:24.540 --> 01:30.750 Now we also have other images like it says there's sky people and person and these are actually the 01:30.750 --> 01:33.650 background images that I just decided not to name. 01:33.660 --> 01:35.730 But I remember the names of them. 01:35.760 --> 01:40.320 So these are the background images that could be optimized just as well. 01:40.320 --> 01:45.700 And then finally we have the cropped image edit and this is actually the name of our logo. 01:45.780 --> 01:50.130 But as you can see this is only going to say it was four point nine kilobytes. 01:50.280 --> 01:56.190 So I'm not going to bother with optimizing this one but everything above where we're going to go ahead 01:56.190 --> 02:02.940 and optimize each and every one of them and then run a new test and get it this size down right. 02:02.940 --> 02:04.710 Because this is way too big. 02:04.710 --> 02:11.250 We want to be under one megabyte and definitely below two seconds for the loading time. 02:11.250 --> 02:17.350 So let's go ahead and go to our home page and if you are here and you want to start editing with elementary 02:17.550 --> 02:20.290 or we need to do is click on edit with Elementary. 02:20.490 --> 02:25.230 So what we're going to do now is that we're going to start optimizing all of these images we're using 02:25.230 --> 02:31.860 and we're talking this background picture this background all of these three and this background image. 02:31.860 --> 02:32.620 Right. 02:32.730 --> 02:38.400 And we are going to do that by putting them all into a folder so that we know where we have them. 02:38.400 --> 02:43.560 And then we're going to go to this Web site called Image compress or dot com. 02:43.560 --> 02:46.950 Also known as optimized seal her I love that name. 02:46.950 --> 02:49.300 So this is of course in the resources. 02:49.320 --> 02:55.500 Now all we're going to go ahead and do here is click on upload files like this. 02:55.770 --> 03:02.820 And then we are going to go to all of our images select them and click on choose. 03:02.820 --> 03:09.630 So it's actually a really handy process and now it's going to start compressing the images for us in 03:09.630 --> 03:10.620 this second. 03:10.620 --> 03:17.160 But the beautiful thing here is actually that we can customize our own compression right. 03:17.160 --> 03:20.880 So for example we have Amazon right now that's selected in here. 03:20.940 --> 03:26.640 And if I scroll down I can see the way the original looks and the way it looks while it is compressed. 03:26.640 --> 03:30.470 I can also see how many percent I'm saving what the new sizes. 03:30.540 --> 03:32.570 But here is the interesting thing here. 03:32.580 --> 03:35.480 I can see the amount of colors being used right now. 03:35.580 --> 03:39.110 And also notice that there's not a lot of colors going on right now. 03:39.120 --> 03:45.330 So what I'm gonna do is actually pull this down to say let's do 80 colors and we can tell that there 03:45.330 --> 03:51.000 is no difference whatsoever in the images but there is a difference in this size. 03:51.000 --> 03:52.370 So I'm going to continue. 03:52.370 --> 03:54.340 Let's move down to 70. 03:54.600 --> 03:55.050 Right. 03:55.050 --> 04:00.050 And there is still no noticeable equality really that's changing here. 04:00.270 --> 04:07.340 So I'm gonna go down even further let's go down to say 55 I'm pushing the limits slightly here. 04:07.380 --> 04:09.760 Let's do 53 and it's still looking fine. 04:09.760 --> 04:12.140 Gonna go even further let's do 40. 04:12.480 --> 04:19.680 Okay so I have actually compressed this big time right now even if I assume there's still no noticeable 04:19.680 --> 04:25.740 loss of quality I'm gonna go really crazy actually and go with 20 and it's still looking okay but if 04:25.740 --> 04:30.810 I sue me and there's you know as we can see the white is actually starting to suffer a little bit I'm 04:30.810 --> 04:37.500 gonna move up to save 40 and we get a nicer white there so I'm gonna stick with this one with the 40 04:37.520 --> 04:42.550 colors because this is just gonna be a thumbnail size anyhow so I'm gonna click on Apply. 04:42.630 --> 04:47.870 So we're just gone from sixty eight to seventy six percent compression really good. 04:47.880 --> 04:54.330 Now this is just a thumbnail so you can get away with more coal it is suffering here but this one is 04:54.330 --> 05:00.250 a super important image because this is our background image so we need to be a little bit more careful 05:00.250 --> 05:00.450 here. 05:00.460 --> 05:06.470 So we have the quality right now and just to show you what happens if you go too far. 05:06.580 --> 05:10.780 If I would pull this down to say you know let's go with thirty five. 05:10.960 --> 05:17.080 You can see that there's quite a decently noticeable lack of quality going on in here now especially 05:17.080 --> 05:23.320 if I sue me mean it gets more prevalent and because this is a bit more sensitive of a case because there's 05:23.340 --> 05:30.060 going to be a big background image we don't want to go too far here like you can see it's all blurry 05:30.060 --> 05:31.130 in the background here. 05:31.300 --> 05:34.320 Let's try out 60 and see what happens. 05:34.330 --> 05:39.130 So six is looking pretty good I'm going to sue me and you can see that there's definitely a little bit 05:39.130 --> 05:45.530 of loss of quality if I assume in like this but I am actually going to go and increase it to sixty five 05:45.790 --> 05:47.310 I think this is looking really nice. 05:47.320 --> 05:52.180 So what you want to do you can also see there's a little bit of the colors fading out so I'm gonna go 05:52.180 --> 05:53.150 to 70 here. 05:53.350 --> 05:59.050 So what do you want to do here is just keep an eye on the quality make sure that the loss isn't too 05:59.050 --> 06:00.100 big right. 06:00.250 --> 06:02.710 Especially on these important images. 06:02.710 --> 06:07.810 We're going to go ahead and apply them and we're gonna do this for all of the images and then we're 06:07.810 --> 06:13.350 gonna make sure we're going to upload them on our home page and have a look so that there is no noticeable 06:13.350 --> 06:19.870 suffering of quality of course we don't want to sacrifice actual image quality noticeable quality in 06:19.870 --> 06:26.320 order to get better loadings speed there's gonna be this nice balance but we want to get under one megabyte 06:26.710 --> 06:34.600 in size so I'm gonna continue optimizing these images let's pull this down to about let's say 65 and 06:34.600 --> 06:40.750 then soon in we can see that there is a definitely a change of qualities I'm gonna go with seventy on 06:40.750 --> 06:46.390 these ones and then I'm going to apply and we're gonna see what kind of results these yields. 06:46.390 --> 06:53.710 Now you can for example see we've gone from 250 to kilobytes to 71 kilobytes This is huge huge huge 06:53.710 --> 06:54.510 difference. 06:54.640 --> 07:00.310 So we're saving a ton of size here now if we would ever go too far which we're going to notice when 07:00.310 --> 07:06.790 we're uploading all we need to really do is go back your upload the original and then be kinder on the 07:06.790 --> 07:08.520 compression itself. 07:08.650 --> 07:12.460 So I'm gonna go down to 70 on this one as well. 07:12.460 --> 07:13.620 There we go. 07:13.630 --> 07:14.920 I'm gonna head apply. 07:15.220 --> 07:18.570 This is a thumbnail so I don't have to be quite as sensitive. 07:18.570 --> 07:20.640 Let's go with and checkouts. 07:20.670 --> 07:21.800 Fifty nine. 07:21.820 --> 07:24.070 You can see that there's some quality is suffering right there. 07:24.070 --> 07:27.150 But once again this is going to be a thumbnail. 07:27.190 --> 07:28.970 I believe this will be fine. 07:29.020 --> 07:33.750 I'm going to go ahead and use this from five hundred and one kilobytes to one hundred and sixteen. 07:33.760 --> 07:34.830 That's huge. 07:34.840 --> 07:39.570 And finally I'm gonna do it on Shopify and this is also a very simple image. 07:39.640 --> 07:46.030 Even though there's more going on in the background so I'm gonna scroll down and let's do 60. 07:46.030 --> 07:48.700 There we go and I'm gonna just hit the play here. 07:49.270 --> 07:55.690 So now when I am all done I have applied it on everyone and we can see that there's no real noticeable 07:55.690 --> 07:57.060 quality loss. 07:57.370 --> 08:03.310 Nothing big I'm gonna download all of these by simply clicking on download all and then I'm gonna go 08:03.310 --> 08:04.690 ahead and extract them. 08:04.900 --> 08:10.750 So here are all of the images right now that I just used and here is the image compressor it is a sip 08:10.750 --> 08:16.450 file I'm just gonna double click on it and here I get the new files it's just in this folder called 08:16.540 --> 08:18.100 Image compressor. 08:18.100 --> 08:18.950 Right. 08:19.000 --> 08:20.110 So this is really really good. 08:20.110 --> 08:22.850 Now we're gonna go ahead and go to the website. 08:22.930 --> 08:27.700 We're gonna re upload all of these and then we're gonna run a new test and see the results. 08:27.730 --> 08:28.170 OK. 08:28.210 --> 08:30.160 So let's start with the background picture. 08:30.170 --> 08:31.490 I'm going to click up here. 08:31.490 --> 08:37.750 We're gonna edit the section move over to style and then we have the image right here. 08:37.780 --> 08:40.120 I'm gonna move over to upload file. 08:40.240 --> 08:47.170 I'm gonna go to select image compressor it's right in here and then we're gonna use this sky image again 08:47.170 --> 08:51.000 and we can see that the size is now 134. 08:51.040 --> 08:57.160 And remember we still have smushed that is compressing the files for us so as to upload it in section 08:57.160 --> 09:02.530 one hundred and thirty one it applies a slight compression to that but look at this comparison we have 09:02.530 --> 09:08.590 one hundred and thirty one kilobytes here and the previous even with Smush compressed was four hundred 09:08.650 --> 09:17.370 and twenty two is a huge difference guys and that is because we're using the lossy compression right 09:17.610 --> 09:23.380 which Smush we can only use lossless compression unless we buy that plug in and of course if you want 09:23.380 --> 09:28.930 to make your life a little bit faster and easier you can buy smushed the premium but honestly it's not 09:28.930 --> 09:32.530 that big of a bother to use this to I think it works superb. 09:32.530 --> 09:37.630 So this looks really nice I'm going to go ahead and click on insert media and here we have it. 09:37.630 --> 09:43.870 So let me go ahead and click on preview changes here and here we have it then as you can see there is 09:43.870 --> 09:46.530 no big difference in quality. 09:46.600 --> 09:53.320 So if I had just to show you the difference between them I'm gonna go ahead and compare them side by 09:53.320 --> 09:53.850 side. 09:53.860 --> 09:59.130 So if I open these two up this is the original image. 09:59.140 --> 09:59.430 Right. 09:59.520 --> 10:08.310 This is the one that was 422 kilobytes and then this one is the one that is almost four times smaller 10:08.310 --> 10:10.190 in size as you can sell. 10:10.190 --> 10:16.500 If we look at the shadow down here while I'm jumping in between them there is a slight difference in 10:16.500 --> 10:23.070 color and ever so slight difference in color and you can notice these as well when you are looking at 10:23.310 --> 10:24.820 the background right. 10:24.930 --> 10:28.160 But there is no big deal going on here. 10:28.170 --> 10:32.240 This is well worth saving all of the size saving all of the loading time. 10:32.250 --> 10:39.300 So basically even though we're using a lossy it's basically no loss of actual quality so let's continue 10:39.300 --> 10:40.040 optimizing. 10:40.040 --> 10:44.970 I'm gonna go ahead and gonna scroll down to here click on editing this section. 10:45.120 --> 10:46.640 Move over to style. 10:46.650 --> 10:48.590 Gonna go down too immature. 10:48.600 --> 10:56.160 Click on the image and I'm going to upload files select and then I'm gonna click on the image with the 10:56.160 --> 10:57.200 girls sitting here now. 10:57.210 --> 10:59.720 This is 76 kilobytes. 10:59.790 --> 11:04.290 And if you have a look on the previews this is two hundred and ninety three. 11:04.320 --> 11:06.570 So this is a huge huge huge difference. 11:06.570 --> 11:12.420 Now my math is too bad to give you a proper calculation how much better it is but there's a big big 11:12.420 --> 11:14.100 difference going on right. 11:14.100 --> 11:21.060 So from two hundred and ninety three to seventy falling and I click on insert media here and there we 11:21.060 --> 11:21.420 have it. 11:21.420 --> 11:25.520 There is no noticeable loss of quality going on here either. 11:25.560 --> 11:31.040 Now I'm gonna go ahead and I'm going to upload them all and then we're gonna check the page out right. 11:31.110 --> 11:38.280 So I'm gonna do the same up here go to section go to style I'm going to click on the image here upload 11:38.280 --> 11:41.670 files select images click on choose. 11:41.670 --> 11:46.470 So this is 7 to 1 killer by the previous was two hundred and fifty two huge difference. 11:46.470 --> 11:48.790 Click on insert media. 11:48.870 --> 11:50.430 There we go. 11:50.460 --> 11:55.600 Now I'm gonna go ahead and change these ones as well so I'm just gonna click here and then I'm gonna 11:55.620 --> 12:03.240 click on this image and then upload select files and then I'm gonna upload the correct one and choose 12:03.660 --> 12:04.980 the insert media. 12:04.980 --> 12:07.590 I'm going to continue doing this on all of them. 12:07.590 --> 12:12.960 All right so I have just changed all of these three asked one now there's one more thing that's super 12:12.960 --> 12:14.690 important for you to know about that. 12:14.730 --> 12:20.160 I did not do when I was using these images earlier and that is if you click on the image here you can 12:20.160 --> 12:22.850 see that I'm using the full image size. 12:22.860 --> 12:28.560 There is no reason to do that whatsoever because we are compressing it to such a small size. 12:28.590 --> 12:35.850 So when we were looking at the test and it said that you can save up towards and have a 97 percent reduction 12:36.180 --> 12:42.780 what it meant by that is that I can actually instead of using a full image that takes a lot of size 12:42.990 --> 12:49.980 and space I can just go ahead and click on medium for example and there is no loss of quality whatsoever 12:49.980 --> 12:57.180 because I'm actually having this small size but is is cropping itself by using this feature so it automatically 12:57.180 --> 12:58.770 gets even smaller. 12:58.770 --> 13:04.200 Now you're gonna notice if you go too far because if I use the thumbnail here for example you can see 13:04.200 --> 13:06.020 that that just ruin the image right. 13:06.300 --> 13:15.120 But if I used the medium 300 times 300 or medium large or I used a large you can tell that the only 13:15.120 --> 13:18.930 real difference is the loading time because the quality is pretty much the same. 13:18.990 --> 13:24.300 So I'm gonna go with medium 300 times 300 because that is all that we need. 13:24.300 --> 13:25.260 Same here. 13:25.290 --> 13:27.290 Medium 300. 13:27.360 --> 13:28.350 Same here. 13:28.350 --> 13:32.220 Medium 300 times 300 and now we've updated everything. 13:32.220 --> 13:38.010 I'm gonna go ahead and click on update right here and now I'm gonna go down and click on preview changes 13:38.040 --> 13:40.220 and we're gonna see how the website looks. 13:40.440 --> 13:43.320 And as you can see Did you see that loading time. 13:43.320 --> 13:49.320 That was a big big difference guys like we just ended up here like that and I'm loving this and if you 13:49.320 --> 13:54.840 scroll down you can see that there is no real loss of quality actually. 13:54.990 --> 14:00.870 This image might be having a little bit lots of quality but not too bad in my opinion. 14:00.870 --> 14:03.860 Scrolling down this has no noticeable loss of quality. 14:03.870 --> 14:09.900 So the only thing that you might want to do would be to increase the quality of this image because here 14:10.080 --> 14:17.100 it is a bit more noticeable but this one has no noticeable loss of quality whatsoever going on so I 14:17.100 --> 14:23.040 am super happy with the results of this but what we're gonna go ahead and do now is run a new speed 14:23.040 --> 14:25.060 test and compare the results. 14:25.170 --> 14:33.110 So I'm going to open a new tab go to uptime dot com free tools speed test. 14:33.110 --> 14:35.570 And now I'm just gonna write in our website 14:38.900 --> 14:41.520 and then start testing. 14:41.540 --> 14:42.320 All right guys. 14:42.320 --> 14:43.520 So the results are in. 14:43.520 --> 14:48.850 And as we can see there is quite a difference in the results right now. 14:48.860 --> 14:53.990 So the previous results we were looking something like this we're looking at a loading time at four 14:53.990 --> 14:55.300 point two seconds. 14:55.310 --> 15:02.090 Now we're looking at a loading time at two point three seconds that is almost half still too much but 15:02.150 --> 15:03.680 drastically different. 15:03.680 --> 15:10.260 Right now if we're looking at the total size it's actually one point one megabyte. 15:10.340 --> 15:14.360 That is a massive difference from two point seven. 15:14.390 --> 15:22.040 Now in my opinion one point one megabyte is still a bit too much because I want to be below 1 megabyte. 15:22.070 --> 15:28.070 So what I am going to do is actually put these through the compression a couple of them for example 15:28.280 --> 15:33.830 I'm going to compress this further while also compressing this a little bit further while actually maybe 15:33.830 --> 15:40.310 increasing the quality of this one and then I'm gonna run a test again and make sure that I am below 15:40.370 --> 15:41.840 one megabyte. 15:41.870 --> 15:42.290 OK. 15:42.590 --> 15:45.740 But this is how you optimize your images. 15:45.740 --> 15:51.280 Make sure that your website loads much faster but there is still more issues going on. 15:51.280 --> 15:51.620 Right. 15:51.920 --> 15:56.240 So if we look down We can see that we have the eliminated renderer blocking that is up next. 15:56.240 --> 15:58.730 And we're going to go through that in the next lecture. 15:58.730 --> 16:04.250 So if I now go ahead and go down to optimize images we're going to be able to see what the issue is 16:04.250 --> 16:09.500 because apparently we can save a lot of space still and if we're saving this much we're going to go 16:09.500 --> 16:13.040 down quite drastically on the total size. 16:13.040 --> 16:20.270 So as we can see we can still have a huge reduction in the digital marketing the Amazon logo and the 16:20.270 --> 16:21.820 shopify logo. 16:21.830 --> 16:22.190 Right. 16:22.190 --> 16:25.100 We're not going to bother about this one because it saves so little. 16:25.130 --> 16:29.850 But here we could actually save over 100 over 100 and over two hundred. 16:29.870 --> 16:34.100 So what I am noticing here is that these are actual P and Gs. 16:34.100 --> 16:34.460 Right. 16:34.760 --> 16:40.310 So what I'm gonna go ahead and do before we move on to eliminate render blocking is that I am going 16:40.310 --> 16:47.030 to go ahead and show you in the next lecture how you can turn P and G images to JP in order to save 16:47.060 --> 16:47.950 a lot of size. 16:47.960 --> 16:50.720 And we're going to go well below the 1 megabyte. 16:50.750 --> 16:51.360 OK. 16:51.440 --> 16:56.120 So if you already know how to do this and you're fun with the image optimization you can move on to 16:56.120 --> 16:56.890 the next lecture. 16:56.900 --> 17:03.680 But if you do have P G force you need to resize down even further to get below this then join me and 17:03.680 --> 17:07.700 follow me in the next lecture and we're gonna take care of this size problem. 17:07.700 --> 17:08.830 Casey in the next lecture. 17:08.840 --> 17:09.140 Guys.