Voiceover: Nobody likes slow websites. 2 2
We all know that, right? 3 3
Besides that, page speed can have a real impact 4 4
on your user's engagement, 5 5
because nobody wants to wait for some website to load. 6 6
So, do you still remember our seven steps plan? 7 7
We have been working on step four all this time, 8 8
designing and developing our website. 9 9
But now, let's start with step five, 10 10
and make our users love our website even more 11 11
by using some techniques for speeding upload times. 12 12
And there are two very basic things we can do, 13 13
optimize heavy images and minify CSS and jQuery Code. 14 14
So let's go do that. 15 15
So the first thing we have to optimize are images, 16 16
and that's because images are usually, by far, 17 17
the more heavy content of our webpage. 18 18
We'll just show you that. 19 19
So I come here to my resources folder, 20 20
then we have here the meals. 21 21
So you'll see 200 kilobytes, 200, all of these images. 22 22
And, for instance, the cities. 23 23
200 kilobyte, you see here. 24 24
Also 195. 25 25
So all of these images together combined, 26 26
when we download the website this takes a long time 27 27
to load all of these images. 28 28
So image someone with a slow internet connection, 29 29
on a smartphone or so, would try to download this site 30 30
that would actually take them forever, right? 31 31
So let's reduce that file sizes, 32 32
and as a first step we can reduce 33 33
the actual dimension of the images. 34 34
And so far we've never really looked 35 35
at the image dimensions until now. 36 36
We just included all our images 37 37
and didn't really worry about anything. 38 38
So let's do that now, 39 39
and I will use the Chrome Developer Tools, 40 40
and we will look at these four city images. 41 41
So, again, you see how useful this is. 42 42
Okay, here we have it. 43 43
So inspect this image and now here we have it. 44 44
And when we hover that image we can see 45 45
the actual size of the file, which is 900 by 600 pixels, 46 46
and then the size that is displayed on the website, 47 47
which is only 249 by 166 pixels. 48 48
So the original image is way bigger 49 49
than what we actually see on the screen. 50 50
Now we have to think about one thing, 51 51
which is responsive web design 52 52
where images will actually get a little bigger. 53 53
So it, for instance, optimizes for this image size. 54 54
You see the images are now larger than they were before. 55 55
And let me actually hide this part a little bit. 56 56
So inspect element again, 57 57
and you see its 361 by 240 pixels, 58 58
which we see here on the screen. 59 59
So let's make that 375, for instance. 60 60
So that's the size that we need. 61 61
Now, I want the image size to be always twice 62 62
as much as the actual size. 63 63
And there's a simple reason for that, 64 64
and it is high resolution displays. 65 65
And those high resolution displays, 66 66
like the retina displays we have on MacBooks, and iPhones, 67 67
and also on your smartphones, 68 68
need the image files to be larger 69 69
than they appear on the screen 70 70
in order to make them look super sharp. 71 71
So in our case, that would be 375 times two. 72 72
So 375. 73 73
So we want the image to be 750 pixels and not 900. 74 74
So we can reduce the image dimensions, 75 75
which is a cool thing. 76 76
So remember this number, 750. 77 77
All right, so we come to our folder and to the cities, 78 78
which are San Francisco, London, Lisbon, and Berlin. 79 79
Now, if you're a Mac user, there's quite a handy way 80 80
to reduce the dimensions of the images all at the same time. 81 81
So I will just open them, 82 82
then here I say, "Command A" to select all of them, 83 83
and then just come here and reduce it to 750. 84 84
Okay, and on a Windows machine you could 85 85
use some other program to do the same thing. 86 86
So we see here we reduced from 1.1 megabyte to 490 kilobyte, 87 87
and that's very good. 88 88
That's a huge file reduction 89 89
and that's exactly what we wanted to do. 90 90
End. 91 91
Let's save those images. 92 92
So you see this is a very great way of doing this, 93 93
of reducing some files size, 94 94
and now we reload this 95 95
and everything looks exactly the same, right? 96 96
So this the first step to increase 97 97
the page speed of our website. 98 98
And you could now go ahead and do the same thing 99 99
for this image here, for instance, 100 100
or for these ones. 101 101
And, yeah, I think you should do that. 102 102
So this was the first step of reducing heavy images. 103 103
And now, another thing we can do, maybe even powerful, 104 104
is to use this tool called Optimizilla, 105 105
which basically compresses images online. 106 106
And we will use this tool 107 107
to compress our two biggest images. 108 108
And it's these ones. 109 109
You see this is 1.2 megabytes and this 2.5 megabytes, 110 110
so these are huge images. 111 111
So we will now compress these images. 112 112
And try to save a huge amount of precious space here. 113 113
So now we just upload these files, 114 114
and this takes a little bit of our time, of course. 115 115
Now the tool starts to actually compress this file, 116 116
and now we can see it down here 117 117
while the other one keeps uploading. 118 118
And, okay, so here we have the quality. 119 119
We can change that if we want. 120 120
And here are the original and the compressed side-by-side 121 121
and you see with a quality of 88 percent, which is a lot, 122 122
so these images look quite alike. 123 123
We can reduce 43 percent of the file size. 124 124
So this is very good, right? 125 125
And in this case, 126 126
this image here disappears behind that black layer, 127 127
so this is very dark. 128 128
So we almost can see the image 129 129
and so I will even reduce the quality even more. 130 130
And this will hopefully helps saving even more space. 131 131
And all right. 132 132
So this will now be less than 400 K 133 133
and before it was 1.2 megabytes. 134 134
So this is very good. 135 135
And now I'll just say, "Apply." 136 136
And then I can download this image. 137 137
And now the same thing with this one, 138 138
and you see that with a quality of 90 percent, 139 139
so this image is almost as good as this one, 140 140
we reduce from 2.4 mega to 780 kilobyte. 141 141
So in this case, this image is very important, 142 142
this is our header image. 143 143
I don't want to reduce the quality more than this, 144 144
so I'll just say, "Okay, that's all right for me," 145 145
and then hit download here as well. 146 146
And now I have both files in my download folder, 147 147
and I will just put them here together 148 148
with the other images. 149 149
So one. 150 150
And two. 151 151
So you see these have a different file names. 152 152
So, it's hero min and customers min. 153 153
Now, of course, I need to go to our CSS file 154 154
and change that image as well, all right? 155 155
So where is that first one? 156 156
Okay. 157 157
Here we are. 158 158
So hero and now it is actually hero min. 159 159
And yeah, here it is. 160 160
And the other, hero min as well. 161 161
So we have these two lines here 162 162
because of the prefix I showed you before. 163 163
So this is the web kit version and this is original version. 164 164
And of course, I need to change the image in both. 165 165
And the same thing down here. 166 166
So here I say, "Min," and here the same thing. 167 167
All right, so let's open our page, 168 168
and you see this looks exactly the same as it did before, 169 169
and we reduced a whole amount of space, 170 170
and saved our users precious bandwidth 171 171
so they need to download way less data. 172 172
So you see, it's really easy to optimize images, 173 173
and it makes a really huge difference. 174 174
Now, another thing that we can do is to minify CSS 175 175
and jQuery code. 176 176
And this basically reduces the size of the CSS 177 177
and jQuery files by removing unneeded wide space 178 178
and by optimizing that code. 179 179
But, however, minifying code makes it quite difficult 180 180
for humans to read, 181 181
so we should only minify code when we're ready 182 182
to launch a website. 183 183
So, in the case of CSS, we can use this tool here, 184 184
and I will actually not do that right now. 185 185
I will just grab some CSS code here, 186 186
for instance let me say, I don't know, this code here, 187 187
and we can paste it here. 188 188
So I will not do this for all our code, 189 189
I will just show you what I mean by minifying the code. 190 190
So here we can say, "The highest compression of all." 191 191
And then process it. 192 192
And here is the result. 193 193
So, as I said, this is quite difficult, 194 194
or even impossible, to read. 195 195
This is all our code completely compressed, 196 196
so no comments, no wide space, nothing. 197 197
And we had a compression of 50 percent, actually. 198 198
So this is another thing we can do, 199 199
and you can find the link to this tool 200 200
and the JavaScript tool in the course eBook, as always. 201 201
And this technique is actually more important 202 202
when we have large amounts of code to compress, 203 203
because otherwise we will not save so much space. 204 204
And in our case, we don't have that much code, 205 205
so it's maybe not necessary to do this. 206 206
All right, that's it for optimizing page speed 207 207
and now let's move on to some very basic 208 208
search engine optimizing in the next lecture.