1. The document provides tips for optimizing website performance including delivering less content faster and rendering faster by taking inspiration from AMP goals. 2. It recommends resizing images, using smaller image formats, adding resource hints for prefetching and preloading, using a CDN, and leveraging service workers and caching. 3. The tips are applicable to front-end developers, back-end developers, dev ops engineers and cover image optimization, lazy loading, inline critical CSS, removing unused content and scripts.

1. Beyond Resizing
The Image Performance Checklist
Kitt Hodsden

2. 2
!

3. 3
"

4. 4
💡

5. 5
🏢

6. Front End Engineer
6

7. Back End Engineer
7

8. Dev Ops
Infrastructure Engineer
System Administrator
8

9. 9

10. 10
🖼

11. 11
☕

12. 12
⁉

13. “Already resizing, what’s next?"
13

14. “Have I done enough?”
14

15. Our Goals
15

16. Deliver less.
16

17. Deliver less.
Deliver faster.
17

18. Deliver less.
Deliver faster.
Render faster.
18

19. Be like AMP.
-ish
19

20. 20

21. 21

22. 22

23. Deliver less.
Deliver faster.
Render faster.
Be like AMP*.
* In this way, inspired by the goals of AMP (and this way only), be like AMP.
23

24. 24

25. Define “less”
25

26. Define “faster”
26

27. 27

28. 28
"

29. 29

30. 30

31. 31

32. Test all major parts
32

33. Use older, slower settings
33

34. Run tests multiple times
34

35. Automate performance testing
35

36. The Basics
36

37. Resize Images
37

38. 38

39. 39
🤔

40. Website tools
Photoshop
Local script
Production process
40

41. Website tools
Photoshop
Local script
Production process
41

42. Choose the right format!
42

43. 43

44. 44

45. 45
WEBP or JPEG
SVG
SVG, MP4, or
WEBM
Everything else Use PNG

46. 46
🤔

47. HEIF
47

48. 48

49. PNG
49

50. GIF
50

51. Animated GIF MP4
51

52. Sprites!
52

53. Sprites! ✨
53

54. Optimize
54

55. Website tools
ImageOptim
Local script
Production process
55

56. JPEG encoders
Modern ones, that is.
56

57. MozJPEG
57

58. Guetzli
https://github.com/google/guetzli/
58

59. $ guetzli --quality 84 o3200.jpg n3200.jpg
59

60. 60
800 x 160 JPG 65kB
800 x 160 JPG guetzli 33kB
800 x 160 WEBP 41kB

61. PJPG
Progressive JPG
61

62. http://www.bookofspeed.com/chapter5.html
62

63. http://www.bookofspeed.com/chapter5.html
63

64. 64

65. 65
800 x 160 JPG 65kB
800 x 160 JPG guetzli 33kB
800 x 160 JPG guetzli progressive 42kB

66. Deliver less.
Deliver faster.
66

67. Deliver less.
Deliver faster.
Render faster.
67

68. <img src="a.png" height="60" width="100" />
<img src="a.png" style="height:60px; width:
100px;” />
68

69. Use HTML5 tags
69

70. 70
<img src="aa.png"
srcset="ab.png 100w, ac.png 500w,
ad.png 1000w"
sizes="(min-width: 900px) 1000px,
(max-width: 900px) and (min-width: 400px) 50em,
(not (orientation: portrait)) 300px,
((orientation: landscape) or (min-width: 1000px)) 50vw,
100vw">

71. 71
🤔

72. https://github.com/ausi/respimagelint
72

73. 73

74. don’t scale images
(if you can avoid it)
74

75. The smallest delivery is no delivery
75

76. Lazy Loading
76

77. 77

78. 78

79. https://github.com/aFarkas/lazysizes
https://github.com/ApoorvSaxena/lozad.js
https://github.com/dinbror/blazy
https://github.com/malchata/yall.js
https://github.com/jasonslyvia/react-lazyload
79

80. 80

81. 81

82. 82
🎉

83. Deliver less.
Deliver faster.
Render faster.
83

84. Deliver less.
Deliver faster.
Render faster.
Be like AMP.
84

85. Front End
85

86. 86
Deliver less
Deliver faster
Render faster

87. Be Like AMP
The good parts.
87

88. Remove unused content
CSS, HTML, JavaScript, and images
88

89. display: none
89

90. Inline critical CSS
90

91. Profile third-party scripts
91

92. Remove duplicate functionality
92

93. Optimize webfonts
93

94. font-display: optional
94

95. async
95

96. Service workers
96

97. Resource Hints
97

98. prefetch
preload
dns-prefetch
preconnect
98

99. prefetch
preload
dns-prefetch
preconnect
99

100. <link rel="prefetch" href=“/i/o3200.jpeg">
100

101. prefetch
preload
dns-prefetch
preconnect
101

102. <link rel="dns-prefetch" href="//example.com">
102

103. prefetch
preload
dns-prefetch
preconnect
103

104. <link rel="preload" as="image" href="/i/clever-
girl.png">
104

105. <link rel="preload" as="font" href="//fonts/
font.woff2" type="font/woff" crossorigin />
105

106. <link rel="preload" as="script" href="map.js"
media="(min-width: 601px)">
106

107. <link rel="preload" as="image" href="map.png"
media="(max-width: 600px)">
<link rel="preload" as="script" href="map.js"
media="(min-width: 601px)">
107

108. prefetch
preload
dns-prefetch
preconnect
108

109. 109
‼

110. 110
‼

111. Service workers
111

112. self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('caching-v1').then(function(cache) {
return cache.addAll([
'/',
‘/styles/all.min.css’,
'/styles/imgs/needful.png',
‘/scripts/all.min.js'
]);
})
)
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(cachedResponse) {
return cachedResponse || fetch(event.request);
})
);
});
112

113. 113

114. if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js');
});
}
114

115. https://github.com/Wilto/wilto-makes-food
115

116. 116
🤔

117. “80-90% of the end-user
response time is spent on the
front-end, start there.”
Steve Souders Performance Golden Rule
117

118. “80-90% of the end-user
response time is spent on the
front-end, start there.”
Steve Souders Performance Golden Rule
118

119. Back End
119

120. Just deliver
120

121. imagecreatefromjpeg()
php
121

122. image = new BufferedImage(w, h, type);
Graphics2D g2d = image.createGraphics();
java
122

123. im = Image.open( 'image.jpg' )
im.show()
python
123

124. Placeholders
124

125. Limited access
125

126. Cache
126

127. Expires
127

128. logo.png
new-logo.svg
new-new-logo.svg
new-new-new-logo.svg
128

129. Resource Hints
129

130. prefetch
preload
dns-prefetch
preconnect
130

131. <link rel="preconnect" href="//fonts.google.com">
131

132. Link: <https://fonts.google.com">; rel=preconnect; crossorigin
132

133. prefetch
preload
dns-prefetch
preconnect
133

134. Be like AMP.
134

135. Eliminate known 404s
135

136. Minimize redirects
136

137. http://example.com ↩
https://example.com ↩
https://www.example.com ↩
http://www.example.com
137

138. Deliver less.
Deliver faster.
Render faster.
Be like AMP.
138

139. CDN
139

140. Dev Ops
140

141. Use a CDN.
141

142. Optimize Server Configuration
142

143. HTTP/2 + SSL
Compression
Cleanup
Cache
Break it
143

144. HTTP/2 + SSL
144

145. https://w3techs.com/technologies/details/ce-http2/all/all
145

146. Binary
146

147. Binary
Multiplexed
147

148. Binary
Multiplexed
Header compression
148

149. SSL
149

150. 150

151. SSL
151

152. Compression
gzip, at a minimum
152

153. Static / Dynamic
153

154. Clean up.
154

155. Caching
155

156. Break it
156

157. HTTP/2 + SSL
Compression
Cleanup
Cache
Break it
157

158. Be Like AMP
158

159. CDN
159

160. Before and After
160

161. Automate it.
161

162. Everyone else
162

163. Embrace less
163

164. 164

165. 165

166. Summary
166

167. Deliver less.
Deliver faster.
Render faster.
Be like AMP.
167

168. 1. Resize Images
168

169. 2. Small Images
169

170. 3. Resource Hints
prefetch, preload, dns-prefetch, preconnect
170

171. 4. CDN
prefetch, preload, dns-prefetch, preconnect
171

172. Victoire!
172

173. 173
🎉

174. Thanks!
174