Your Hero Images Need You! Save the Day with HTTP2 Image Loading

Images form 64% of all website data & have a high correlation to page load time. Optimizing image delivery through compression alone is a daunting task. Using HTTP2's superpowers, we can optimize images to ship faster, increasing the perceived performance and initiating users' emotional responses to visuals earlier. HTTP2-powered image delivery leads to lower bounce rates and higher conversions.

------------------------------------------

This version of my talk was given at beyondtellerrand conference in Düsseldorf, Germany on Tuesday, 20160510.

Transcript

1. Your Hero Images Need You! Save the Day with HTTP2 Image Loading 1 / 89
2. Tobias Baldauf @tbaldauf tbaldauf@akamai.com 2 / 89
3. 3 / 89
4. 4 / 89
5. 5 / 89
6. 6 / 89
7. 7 / 89
8. 8 / 89
9. 9 / 89
10. 10 / 89
11. 11 / 89
12. 12 / 89
13. 13 / 89
14. Improve Speed Index by 6% On Top of Best Practices 14 / 89
15. Impress With Only 15% Image Data Sent 15 / 89
16. 16 / 89
17. ref. http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 17 / 89
18. 18 / 89
19. 19 / 89
20. Case Study FT.COM ref. https://next.ft.com/ 20 / 89
21. ref. http://engineroom.ft.com/2016/04/04/a-faster-ft-com/ via https://wpostats.com/ 21 / 89
22. What Can We Do? 22 / 89
23. Get compressin'! 23 / 89
24. Use MOZJPEG The Best JPEG Encoder on Earth ref. https://github.com/mozilla/mozjpeg 24 / 89
25. Go SSIM for Quality ref. https://github.com/technopagan/cjpeg-dssim 25 / 89
26. Still a Heavy Load :( 26 / 89
27. Enter HTTP2 27 / 89
28. Thanks to Clay Smith (https://twitter.com/smithclay) for this beauty! 28 / 89
29. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 29 / 89
30. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 30 / 89
31. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 31 / 89
32. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 32 / 89
33. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 33 / 89
34. 34 / 89
35. Consider initcwnd 35 / 89
36. Ingredient #1 H2 Multiplexing 36 / 89
37. There's Another Ingredient! 37 / 89
38. 38 / 89
39. Sequential JPEG Progressive JPEG Images taken from http://www.pixelstech.net/article/1374757887-Use-progressive-JPEG-to-improve-user-experience 39 / 89
40. Scans 40 / 89
41. Default Scan Levels Thanks to Frédéric Kayser for creating 'jsk': http://encode.ru/threads/1800-JSK-JPEG-Scan-Killer-progressive-JPEG-explained-in-slowmo 41 / 89
42. 42 / 89
43. 43 / 89
44. 44 / 89
45. 45 / 89
46. Org Cb Y Cr 46 / 89
47. 47 / 89
48. 48 / 89
49. 1st Scan Layer Has Small Byte Size Ships Fast & Shows Soon 49 / 89
50. Progressive JPEGs on H2 show Good Visuals Faster 50 / 89
51. 51 / 89
52. This is Old News! 52 / 89
53. John Melor (Google, SPDY, 2012): @15%: initial visuals @35%: good visuals thanks to John Melor for this fantastic research and thanks to Yoav Weiss & Andy Davies for publishing it in their slide decks! See https://yoavweiss.github.io/respimg-blinkon-presentation/#/71/2 53 / 89
54. Ingredient #2 Progressive JPEGs 54 / 89
55. How FAST Is It? 55 / 89
56. What is FAST? 56 / 89
57. Speed Index 57 / 89
58. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 58 / 89
59. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 59 / 89
60. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 60 / 89
61. Site A displays 7.4x faster than Site B more info at https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index 61 / 89
62. 62 / 89
63. 63 / 89
64. 64 / 89
65. Sequential JPEGs vs. Progressive JPEGs on HTTP2 65 / 89
66. 66 / 89
67. 67 / 89
68. 68 / 89
69. Can We Go ... Even Faster? 69 / 89
70. 70 / 89
71. 71 / 89
72. 72 / 89
73. 1 73 / 89
74. 2 74 / 89
75. 3 75 / 89
76. 4 76 / 89
77. 5 77 / 89
78. 78 / 89
79. 79 / 89
80. Optimized Progressive JPEGs yield 6% Speed Index Gain 80 / 89
81. Hold It! Maybe More, Smaller Scan Layers Benefit Even More From HTTP2 81 / 89
82. kudos to Nicolas Robidoux, https://www.imagemagick.org/discourse-server/viewtopic.php?t=20402 82 / 89
83. 83 / 89
84. 84 / 89
85. 85 / 89
86. Ingredient #1: HTTP2 Ingredient #2: Progressive JPEG Ingredient #3: Optimal Scan Levels 86 / 89
87. It Will Start Image Rendering With 15% Data Sent 87 / 89
88. And Reduce Speed Index by 57% (6% via JPEG Scan Layer Optimization alone) 88 / 89
89. THANKS! Tobias Baldauf tbaldauf@akamai.com @tbaldauf 89 / 89