Your Hero Images Need You! Save the Day with HTTP2 Image Loading - 90min Workshop at Velocity Santa Clara 2016

Images are a crucial component of all websites. They evoke emotions and prompt actions. They also form 64% of website data and have the highest correlation to page-load time. While modern image compression techniques can alleviate some of the negative impact of image loading, key web performance metrics such as the Speed Index and Time to Interact suffer due to our need for images.

HTTP/2 puts a powerful tool at our disposal to address these issues for image loading. Tobias Baldauf explains how to use HTTP/2’s superpowers to optimize image delivery, thereby increasing the perceived performance of your page, reducing load times, and driving conversions. Tobias explores the details of HTTP/2’s multiplexing in depth and demonstrates how to leverage it to address image loading. You’ll learn how to take granular control of the encoding process for progressive or interlaced images to improve both performance and users’ emotional response time to page visuals.

Transcript

1. Your Hero Images Need You! Save the Day with HTTP2 Image Loading 1 / 103
2. Workshop Assets URL: http://10.35.0.8 2 / 103
3. Tobias Baldauf @tbaldauf tbaldauf@akamai.com Rate this #VelocityConf session: https://is.gd/velocity_h2_img_feedback 3 / 103
4. 4 / 103
5. Show Images Faster Than Ever 5 / 103
6. Render Contents With Only 25% Image Data Sent 6 / 103
7. 7 / 103
8. ref. http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 8 / 103
9. 9 / 103
10. What Shall We Learn? 10 / 103
11. Lesson #1 Image Compression 11 / 103
12. Lesson #2 HTTP2 12 / 103
13. mozjpeg 13 / 103
14. Optimized Huffman Tables 14 / 103
15. Custom Quantization Matrices 15 / 103
16. Trellis Quantization 16 / 103
17. Optimized Progressive Encoding 17 / 103
18. All with Minimal Impact on the SSIM Score 18 / 103
19. SSIM 19 / 103
20. 20 / 103
21. 21 / 103
22. To measure dissimilarity: DSSIM https://github.com/pornel/dssim 22 / 103
23. Dissimilarity: 0.13% 23 / 103
24. 1.5% OK 24 / 103
25. Automate it! 25 / 103
26. cjpeg-dssim http://github.com/technopagan/cjpeg-dssim 26 / 103
27. 27 / 103
28. Live Action Demo! 28 / 103
29. // Print quality of JPEG image identify -format '%Q' input.jpg // Create smaller JPEG with same quality as input image mozjpeg -quality 86 -outfile output_mozjpeg.jpg input.jpg // Measure dissimilarity using DSSIM and intermediate PNGs dssim input.png output_mozjpeg.png // Auto-Tune best JPEG compression parameters using cjpeg-dssim cjpeg-dssim mozjpeg input.jpg // Print Interlace status of JPEG to see if it's progressively encoded identify -verbose input.jpg | grep Interlace 29 / 103
30. Progressive JPEGs 30 / 103
31. Sequential JPEG Progressive JPEG Images taken from http://www.pixelstech.net/article/1374757887-Use-progressive-JPEG-to-improve-user-experience 31 / 103
32. Scans 32 / 103
33. 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 33 / 103
34. 34 / 103
35. 35 / 103
36. 36 / 103
37. Org Cb Y Cr 37 / 103
38. 38 / 103
39. 39 / 103
40. Live Action Demo! 40 / 103
41. // Create a progressively encoded JPEG with default scan layers using mozjpeg mozjpeg -outfile output_mozjpeg_default_scans.jpg input.jpg // Split a progressive JPEG apart to see its scan layers jsk output_mozjpeg_default_scans.jpg // Create a progressively encoded JPEG with custom scan layers mozjpeg -scans scans-custom.txt -outfile output_mozjpeg_custom_scans.jpg input.jpg 41 / 103
42. Now Let's Learn About Optimized Delivery! 42 / 103
43. Thanks to Clay Smith (https://twitter.com/smithclay) for this beauty! 43 / 103
44. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 44 / 103
45. 45 / 103
46. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 46 / 103
47. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 47 / 103
48. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 48 / 103
49. Consider initcwnd 49 / 103
50. How FAST Is HTTP2? 50 / 103
51. What is FAST? 51 / 103
52. Speed Index 52 / 103
53. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 53 / 103
54. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 54 / 103
55. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 55 / 103
56. 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 56 / 103
57. Live Action Demo! 57 / 103
58. Baseline Sequential vs. Progressive JPEGs on HTTP1.1 58 / 103
59. 59 / 103
60. 60 / 103
61. 61 / 103
62. Live Action Demo! 62 / 103
63. Progressive JPEGs vs. Optimized pJPEGs on HTTP1.1 63 / 103
64. 64 / 103
65. 65 / 103
66. 66 / 103
67. Live Action Demo! 67 / 103
68. Baseline Sequential vs. Progressive JPEGs on HTTP2 68 / 103
69. 69 / 103
70. 70 / 103
71. 71 / 103
72. It's important to tune initcwnd 72 / 103
73. // Optimal initcwnd formula (MBps * RTT) / 1500 BytesPerPackage = optimal initcwnd // Example for 6Mbps and 50ms RTT (considering that 1Mbps = 125Kbps): 6*125Kbps = 750Kbps // Let's assume 50ms RTT 750 * 0.050= 37.5 37.5 / 1500 Bytes Per Package = 0,025 => optimal initcwnd of 25 for a single connection as in HTTP2 73 / 103
74. Live Action Demo! 74 / 103
75. // Check current initcwnd settings on *nix ip route show // Change initcwnd setting for a network interface // Make sure that the IP address matches sudo ip route change default via 123.123.123.123 dev eth0 initcwnd 25 75 / 103
76. We now know about Progressive JPEGs The benefits of HTTP2 & its optimized delivery of Scan Layers 76 / 103
77. This is Old News! 77 / 103
78. 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 78 / 103
79. Can We Go ... Even Faster? 79 / 103
80. 80 / 103
81. Live Action Demo! 81 / 103
82. 82 / 103
83. 83 / 103
84. 1 84 / 103
85. 2 85 / 103
86. 3 86 / 103
87. 4 87 / 103
88. 5 88 / 103
89. Optimized Progressive JPEGs yield 6% Speed Index Gain 89 / 103
90. What about Server Push? 90 / 103
91. Enter ShimmerCat 91 / 103
92. // Prioritize a progressive JPEG's metadata and scan levels // with minimal 'calm' => maximum priority <img src="img/jpeg_opJPEG/tba/00001.jpg?bil=0!0"> // Create a cumulative cascade of 'calm' // for a progressive JPEG's metadata and scan levels // Each new value is added to the sum, lowering priority per scan layer <img src="img/jpeg_opJPEG/tba/00001.jpg?bil=0!100,50,20"> 92 / 103
93. Live Action Demo! 93 / 103
94. 94 / 103
95. 95 / 103
96. 96 / 103
97. 97 / 103
98. 98 / 103
99. Progressive Images + HTTP2 = Win 99 / 103
100. Scan Layer Manipulation = Better Speed Index 100 / 103
101. HTTP2 Server Push + Optimized Scan Layers = Awesomesauce 101 / 103
102. THANKS! 102 / 103
103. Tobias Baldauf @tbaldauf tbaldauf@akamai.com Rate this #VelocityConf session: https://is.gd/velocity_h2_img_feedback 103 / 103