Original subtitles

1 1

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.