Beyond Resizing: The Image Performance Checklist
0 likes138 views
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.
![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](https://image.slidesharecdn.com/beyond-resizing-checklist-kitt-hodsden-180501235820/85/Beyond-Resizing-The-Image-Performance-Checklist-112-320.jpg)
Beyond Resizing: The Image Performance Checklist
- 1. Beyond Resizing The Image Performance Checklist Kitt Hodsden
- 2. 2 !
- 3. 3 "
- 4. 4 💡
- 5. 5 🏢
- 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
- 18. Deliver less. Deliver faster. Render faster. 18
- 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
- 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
- 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
- 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
- 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
- 64. 64
- 65. 65 800 x 160 JPG 65kB 800 x 160 JPG guetzli 33kB 800 x 160 JPG guetzli progressive 42kB
- 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
- 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 🤔
- 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
- 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
- 95. async 95
- 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
- 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
- 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
- 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
- 129. Resource Hints 129
- 132. Link: <https://fonts.google.com">; rel=preconnect; crossorigin 132
- 134. Be like AMP. 134
- 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
- 143. HTTP/2 + SSL Compression Cleanup Cache Break it 143
- 144. HTTP/2 + SSL 144
- 146. Binary 146
- 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