Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,089 --> 00:00:03,364 Nobody likes slow websites. 2 2 00:00:03,364 --> 00:00:05,532 We all know that, right? 3 3 00:00:05,532 --> 00:00:08,631 Besides that, page speed can have a real impact 4 4 00:00:08,631 --> 00:00:10,752 on your user's engagement, 5 5 00:00:10,752 --> 00:00:14,919 because nobody wants to wait for some website to load. 6 6 00:00:15,831 --> 00:00:19,238 So, do you still remember our seven steps plan? 7 7 00:00:19,238 --> 00:00:22,087 We have been working on step four all this time, 8 8 00:00:22,087 --> 00:00:24,937 designing and developing our website. 9 9 00:00:24,937 --> 00:00:27,244 But now, let's start with step five, 10 10 00:00:27,244 --> 00:00:30,263 and make our users love our website even more 11 11 00:00:30,263 --> 00:00:34,267 by using some techniques for speeding upload times. 12 12 00:00:34,267 --> 00:00:37,479 And there are two very basic things we can do, 13 13 00:00:37,479 --> 00:00:41,646 optimize heavy images and minify CSS and jQuery Code. 14 14 00:00:42,518 --> 00:00:44,185 So let's go do that. 15 15 00:00:46,451 --> 00:00:49,748 So the first thing we have to optimize are images, 16 16 00:00:49,748 --> 00:00:52,682 and that's because images are usually, by far, 17 17 00:00:52,682 --> 00:00:55,849 the more heavy content of our webpage. 18 18 00:00:57,468 --> 00:00:59,551 We'll just show you that. 19 19 00:01:00,866 --> 00:01:04,033 So I come here to my resources folder, 20 20 00:01:04,923 --> 00:01:06,325 then we have here the meals. 21 21 00:01:06,325 --> 00:01:10,492 So you'll see 200 kilobytes, 200, all of these images. 22 22 00:01:12,789 --> 00:01:15,607 And, for instance, the cities. 23 23 00:01:15,607 --> 00:01:17,857 200 kilobyte, you see here. 24 24 00:01:19,252 --> 00:01:20,664 Also 195. 25 25 00:01:20,664 --> 00:01:23,172 So all of these images together combined, 26 26 00:01:23,172 --> 00:01:27,339 when we download the website this takes a long time 27 27 00:01:28,513 --> 00:01:30,846 to load all of these images. 28 28 00:01:31,958 --> 00:01:34,396 So image someone with a slow internet connection, 29 29 00:01:34,396 --> 00:01:38,622 on a smartphone or so, would try to download this site 30 30 00:01:38,622 --> 00:01:42,345 that would actually take them forever, right? 31 31 00:01:42,345 --> 00:01:45,012 So let's reduce that file sizes, 32 32 00:01:46,124 --> 00:01:48,686 and as a first step we can reduce 33 33 00:01:48,686 --> 00:01:51,603 the actual dimension of the images. 34 34 00:01:53,316 --> 00:01:55,430 And so far we've never really looked 35 35 00:01:55,430 --> 00:01:58,263 at the image dimensions until now. 36 36 00:02:00,323 --> 00:02:02,320 We just included all our images 37 37 00:02:02,320 --> 00:02:05,269 and didn't really worry about anything. 38 38 00:02:05,269 --> 00:02:06,686 So let's do that now, 39 39 00:02:06,686 --> 00:02:09,225 and I will use the Chrome Developer Tools, 40 40 00:02:09,225 --> 00:02:13,103 and we will look at these four city images. 41 41 00:02:13,103 --> 00:02:15,999 So, again, you see how useful this is. 42 42 00:02:15,999 --> 00:02:17,832 Okay, here we have it. 43 43 00:02:18,918 --> 00:02:22,131 So inspect this image and now here we have it. 44 44 00:02:22,131 --> 00:02:24,826 And when we hover that image we can see 45 45 00:02:24,826 --> 00:02:28,993 the actual size of the file, which is 900 by 600 pixels, 46 46 00:02:31,096 --> 00:02:33,506 and then the size that is displayed on the website, 47 47 00:02:33,506 --> 00:02:36,173 which is only 249 by 166 pixels. 48 48 00:02:38,368 --> 00:02:40,574 So the original image is way bigger 49 49 00:02:40,574 --> 00:02:44,004 than what we actually see on the screen. 50 50 00:02:44,004 --> 00:02:46,102 Now we have to think about one thing, 51 51 00:02:46,102 --> 00:02:48,912 which is responsive web design 52 52 00:02:48,912 --> 00:02:52,829 where images will actually get a little bigger. 53 53 00:02:55,770 --> 00:03:00,378 So it, for instance, optimizes for this image size. 54 54 00:03:00,378 --> 00:03:04,545 You see the images are now larger than they were before. 55 55 00:03:05,541 --> 00:03:09,541 And let me actually hide this part a little bit. 56 56 00:03:11,161 --> 00:03:12,957 So inspect element again, 57 57 00:03:12,957 --> 00:03:15,790 and you see its 361 by 240 pixels, 58 58 00:03:17,075 --> 00:03:19,313 which we see here on the screen. 59 59 00:03:19,313 --> 00:03:22,396 So let's make that 375, for instance. 60 60 00:03:24,537 --> 00:03:27,518 So that's the size that we need. 61 61 00:03:27,518 --> 00:03:30,281 Now, I want the image size to be always twice 62 62 00:03:30,281 --> 00:03:32,728 as much as the actual size. 63 63 00:03:32,728 --> 00:03:34,571 And there's a simple reason for that, 64 64 00:03:34,571 --> 00:03:37,032 and it is high resolution displays. 65 65 00:03:37,032 --> 00:03:38,913 And those high resolution displays, 66 66 00:03:38,913 --> 00:03:43,219 like the retina displays we have on MacBooks, and iPhones, 67 67 00:03:43,219 --> 00:03:45,752 and also on your smartphones, 68 68 00:03:45,752 --> 00:03:47,734 need the image files to be larger 69 69 00:03:47,734 --> 00:03:49,429 than they appear on the screen 70 70 00:03:49,429 --> 00:03:52,679 in order to make them look super sharp. 71 71 00:03:53,803 --> 00:03:57,470 So in our case, that would be 375 times two. 72 72 00:04:00,298 --> 00:04:01,131 So 375. 73 73 00:04:02,738 --> 00:04:06,905 So we want the image to be 750 pixels and not 900. 74 74 00:04:08,157 --> 00:04:10,618 So we can reduce the image dimensions, 75 75 00:04:10,618 --> 00:04:12,031 which is a cool thing. 76 76 00:04:12,031 --> 00:04:14,448 So remember this number, 750. 77 77 00:04:16,001 --> 00:04:20,168 All right, so we come to our folder and to the cities, 78 78 00:04:22,874 --> 00:04:27,573 which are San Francisco, London, Lisbon, and Berlin. 79 79 00:04:27,573 --> 00:04:30,925 Now, if you're a Mac user, there's quite a handy way 80 80 00:04:30,925 --> 00:04:35,918 to reduce the dimensions of the images all at the same time. 81 81 00:04:35,918 --> 00:04:38,774 So I will just open them, 82 82 00:04:38,774 --> 00:04:42,010 then here I say, "Command A" to select all of them, 83 83 00:04:42,010 --> 00:04:45,760 and then just come here and reduce it to 750. 84 84 00:04:48,752 --> 00:04:51,663 Okay, and on a Windows machine you could 85 85 00:04:51,663 --> 00:04:54,086 use some other program to do the same thing. 86 86 00:04:54,086 --> 00:04:58,253 So we see here we reduced from 1.1 megabyte to 490 kilobyte, 87 87 00:05:01,865 --> 00:05:03,615 and that's very good. 88 88 00:05:04,915 --> 00:05:07,248 That's a huge file reduction 89 89 00:05:10,156 --> 00:05:11,767 and that's exactly what we wanted to do. 90 90 00:05:11,767 --> 00:05:13,029 End. 91 91 00:05:13,029 --> 00:05:15,029 Let's save those images. 92 92 00:05:15,987 --> 00:05:19,632 So you see this is a very great way of doing this, 93 93 00:05:19,632 --> 00:05:21,965 of reducing some files size, 94 94 00:05:24,717 --> 00:05:25,849 and now we reload this 95 95 00:05:25,849 --> 00:05:29,599 and everything looks exactly the same, right? 96 96 00:05:32,127 --> 00:05:35,610 So this the first step to increase 97 97 00:05:35,610 --> 00:05:38,110 the page speed of our website. 98 98 00:05:40,866 --> 00:05:43,977 And you could now go ahead and do the same thing 99 99 00:05:43,977 --> 00:05:46,369 for this image here, for instance, 100 100 00:05:46,369 --> 00:05:47,869 or for these ones. 101 101 00:05:50,603 --> 00:05:54,203 And, yeah, I think you should do that. 102 102 00:05:54,203 --> 00:05:57,941 So this was the first step of reducing heavy images. 103 103 00:05:57,941 --> 00:06:01,610 And now, another thing we can do, maybe even powerful, 104 104 00:06:01,610 --> 00:06:05,496 is to use this tool called Optimizilla, 105 105 00:06:05,496 --> 00:06:08,913 which basically compresses images online. 106 106 00:06:10,163 --> 00:06:12,029 And we will use this tool 107 107 00:06:12,029 --> 00:06:14,946 to compress our two biggest images. 108 108 00:06:18,705 --> 00:06:20,372 And it's these ones. 109 109 00:06:21,437 --> 00:06:25,604 You see this is 1.2 megabytes and this 2.5 megabytes, 110 110 00:06:26,577 --> 00:06:28,660 so these are huge images. 111 111 00:06:29,511 --> 00:06:32,594 So we will now compress these images. 112 112 00:06:40,154 --> 00:06:44,321 And try to save a huge amount of precious space here. 113 113 00:06:45,179 --> 00:06:46,943 So now we just upload these files, 114 114 00:06:46,943 --> 00:06:51,110 and this takes a little bit of our time, of course. 115 115 00:06:56,789 --> 00:06:59,978 Now the tool starts to actually compress this file, 116 116 00:06:59,978 --> 00:07:02,323 and now we can see it down here 117 117 00:07:02,323 --> 00:07:05,513 while the other one keeps uploading. 118 118 00:07:05,513 --> 00:07:08,679 And, okay, so here we have the quality. 119 119 00:07:08,679 --> 00:07:10,693 We can change that if we want. 120 120 00:07:10,693 --> 00:07:13,015 And here are the original and the compressed side-by-side 121 121 00:07:13,015 --> 00:07:17,296 and you see with a quality of 88 percent, which is a lot, 122 122 00:07:17,296 --> 00:07:19,905 so these images look quite alike. 123 123 00:07:19,905 --> 00:07:23,405 We can reduce 43 percent of the file size. 124 124 00:07:24,302 --> 00:07:26,635 So this is very good, right? 125 125 00:07:27,901 --> 00:07:28,734 And in this case, 126 126 00:07:28,734 --> 00:07:32,901 this image here disappears behind that black layer, 127 127 00:07:34,191 --> 00:07:35,546 so this is very dark. 128 128 00:07:35,546 --> 00:07:37,738 So we almost can see the image 129 129 00:07:37,738 --> 00:07:41,810 and so I will even reduce the quality even more. 130 130 00:07:41,810 --> 00:07:45,977 And this will hopefully helps saving even more space. 131 131 00:07:47,275 --> 00:07:48,923 And all right. 132 132 00:07:48,923 --> 00:07:52,523 So this will now be less than 400 K 133 133 00:07:52,523 --> 00:07:54,467 and before it was 1.2 megabytes. 134 134 00:07:54,467 --> 00:07:56,239 So this is very good. 135 135 00:07:56,239 --> 00:07:58,822 And now I'll just say, "Apply." 136 136 00:08:00,544 --> 00:08:04,189 And then I can download this image. 137 137 00:08:04,189 --> 00:08:07,272 And now the same thing with this one, 138 138 00:08:08,229 --> 00:08:11,094 and you see that with a quality of 90 percent, 139 139 00:08:11,094 --> 00:08:14,112 so this image is almost as good as this one, 140 140 00:08:14,112 --> 00:08:17,445 we reduce from 2.4 mega to 780 kilobyte. 141 141 00:08:19,926 --> 00:08:21,652 So in this case, this image is very important, 142 142 00:08:21,652 --> 00:08:23,704 this is our header image. 143 143 00:08:23,704 --> 00:08:26,351 I don't want to reduce the quality more than this, 144 144 00:08:26,351 --> 00:08:31,259 so I'll just say, "Okay, that's all right for me," 145 145 00:08:31,259 --> 00:08:34,649 and then hit download here as well. 146 146 00:08:34,649 --> 00:08:38,649 And now I have both files in my download folder, 147 147 00:08:40,007 --> 00:08:42,166 and I will just put them here together 148 148 00:08:42,166 --> 00:08:43,999 with the other images. 149 149 00:08:47,190 --> 00:08:48,023 So one. 150 150 00:08:49,927 --> 00:08:50,760 And two. 151 151 00:08:52,513 --> 00:08:55,215 So you see these have a different file names. 152 152 00:08:55,215 --> 00:08:58,215 So, it's hero min and customers min. 153 153 00:08:59,450 --> 00:09:03,117 Now, of course, I need to go to our CSS file 154 154 00:09:03,994 --> 00:09:07,579 and change that image as well, all right? 155 155 00:09:07,579 --> 00:09:09,723 So where is that first one? 156 156 00:09:09,723 --> 00:09:11,148 Okay. 157 157 00:09:11,148 --> 00:09:12,170 Here we are. 158 158 00:09:12,170 --> 00:09:15,503 So hero and now it is actually hero min. 159 159 00:09:18,427 --> 00:09:20,510 And yeah, here it is. 160 160 00:09:20,510 --> 00:09:23,177 And the other, hero min as well. 161 161 00:09:24,457 --> 00:09:25,473 So we have these two lines here 162 162 00:09:25,473 --> 00:09:29,405 because of the prefix I showed you before. 163 163 00:09:29,405 --> 00:09:32,656 So this is the web kit version and this is original version. 164 164 00:09:32,656 --> 00:09:36,418 And of course, I need to change the image in both. 165 165 00:09:36,418 --> 00:09:38,835 And the same thing down here. 166 166 00:09:39,770 --> 00:09:43,603 So here I say, "Min," and here the same thing. 167 167 00:09:46,930 --> 00:09:49,763 All right, so let's open our page, 168 168 00:09:52,279 --> 00:09:56,026 and you see this looks exactly the same as it did before, 169 169 00:09:56,026 --> 00:09:59,276 and we reduced a whole amount of space, 170 170 00:10:00,330 --> 00:10:03,752 and saved our users precious bandwidth 171 171 00:10:03,752 --> 00:10:07,165 so they need to download way less data. 172 172 00:10:07,165 --> 00:10:10,671 So you see, it's really easy to optimize images, 173 173 00:10:10,671 --> 00:10:13,838 and it makes a really huge difference. 174 174 00:10:15,339 --> 00:10:19,054 Now, another thing that we can do is to minify CSS 175 175 00:10:19,054 --> 00:10:20,781 and jQuery code. 176 176 00:10:20,781 --> 00:10:24,565 And this basically reduces the size of the CSS 177 177 00:10:24,565 --> 00:10:28,475 and jQuery files by removing unneeded wide space 178 178 00:10:28,475 --> 00:10:31,037 and by optimizing that code. 179 179 00:10:31,037 --> 00:10:34,250 But, however, minifying code makes it quite difficult 180 180 00:10:34,250 --> 00:10:35,690 for humans to read, 181 181 00:10:35,690 --> 00:10:38,641 so we should only minify code when we're ready 182 182 00:10:38,641 --> 00:10:40,308 to launch a website. 183 183 00:10:41,250 --> 00:10:44,710 So, in the case of CSS, we can use this tool here, 184 184 00:10:44,710 --> 00:10:48,796 and I will actually not do that right now. 185 185 00:10:48,796 --> 00:10:51,796 I will just grab some CSS code here, 186 186 00:10:54,169 --> 00:10:58,336 for instance let me say, I don't know, this code here, 187 187 00:11:00,121 --> 00:11:01,352 and we can paste it here. 188 188 00:11:01,352 --> 00:11:03,729 So I will not do this for all our code, 189 189 00:11:03,729 --> 00:11:07,670 I will just show you what I mean by minifying the code. 190 190 00:11:07,670 --> 00:11:11,106 So here we can say, "The highest compression of all." 191 191 00:11:11,106 --> 00:11:12,773 And then process it. 192 192 00:11:14,900 --> 00:11:16,126 And here is the result. 193 193 00:11:16,126 --> 00:11:17,937 So, as I said, this is quite difficult, 194 194 00:11:17,937 --> 00:11:20,671 or even impossible, to read. 195 195 00:11:20,671 --> 00:11:23,062 This is all our code completely compressed, 196 196 00:11:23,062 --> 00:11:26,499 so no comments, no wide space, nothing. 197 197 00:11:26,499 --> 00:11:30,771 And we had a compression of 50 percent, actually. 198 198 00:11:30,771 --> 00:11:33,444 So this is another thing we can do, 199 199 00:11:33,444 --> 00:11:35,960 and you can find the link to this tool 200 200 00:11:35,960 --> 00:11:40,127 and the JavaScript tool in the course eBook, as always. 201 201 00:11:40,999 --> 00:11:43,431 And this technique is actually more important 202 202 00:11:43,431 --> 00:11:46,643 when we have large amounts of code to compress, 203 203 00:11:46,643 --> 00:11:49,392 because otherwise we will not save so much space. 204 204 00:11:49,392 --> 00:11:52,186 And in our case, we don't have that much code, 205 205 00:11:52,186 --> 00:11:55,436 so it's maybe not necessary to do this. 206 206 00:11:57,210 --> 00:12:00,740 All right, that's it for optimizing page speed 207 207 00:12:00,740 --> 00:12:02,922 and now let's move on to some very basic 208 208 00:12:02,922 --> 00:12:06,672 search engine optimizing in the next lecture. 17871