Your Hero Images Need You! Save the Day with HTTP2 Image Loading - DevTalks Bucharest 2016

Images are a crucial component of all websites: they evoke emotions and prompt actions. They also form 64% of website data & 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 Speed Index and Time To Interact suffer from our need for images.

With HTTP2, we have a powerful tool at our disposal to address these issues for image loading. We will explore the details of HTTP2’s multiplexing in depth and how we can leverage it to address image loading. As our images need to be optimized to maximize the benefits of image delivery over HTTP2, we will learn how to take granular control of the encoding process for progressive or interlaced images. This will directly influence the Speed Index and our users emotional response time to page visuals. To further optimize for high performance images, we will look at compatible image compression techniques.

Using HTTP2-powered high performance images will increase the perceived performance of your page, reduce load times and drive conversions.

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

The version of this talk was given at DevTalks Bucharest 2016 on 20160609.

Transcript

1. Your Hero Images Need You! Save the Day with HTTP2 Image Loading 1 / 57
2. Tobias Baldauf @tbaldauf tbaldauf@akamai.com 2 / 57
3. 3 / 57
4. 4 / 57
5. Improve Speed Index by 6% On Top of Best Practices 5 / 57
6. Impress With Only 15% Image Data Sent 6 / 57
7. 7 / 57
8. ref. http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 8 / 57
9. 9 / 57
10. What Can We Do? 10 / 57
11. Get compressin'! 11 / 57
12. Use MOZJPEG The Best JPEG Encoder on Earth ref. https://github.com/mozilla/mozjpeg 12 / 57
13. Go SSIM for Quality ref. https://github.com/technopagan/cjpeg-dssim 13 / 57
14. Still a Heavy Load :( 14 / 57
15. Enter HTTP2 15 / 57
16. Thanks to Clay Smith (https://twitter.com/smithclay) for this beauty! 16 / 57
17. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 17 / 57
18. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 18 / 57
19. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 19 / 57
20. 20 / 57
21. Ingredient #1 H2 Multiplexing 21 / 57
22. There's Another Ingredient! 22 / 57
23. 23 / 57
24. Sequential JPEG Progressive JPEG Images taken from http://www.pixelstech.net/article/1374757887-Use-progressive-JPEG-to-improve-user-experience 24 / 57
25. Scans 25 / 57
26. 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 26 / 57
27. 27 / 57
28. 28 / 57
29. 29 / 57
30. 30 / 57
31. 1st Scan Layer Has Small Byte Size Ships Fast & Shows Soon 31 / 57
32. Ingredient #2 Progressive JPEGs 32 / 57
33. How FAST Is It? 33 / 57
34. 34 / 57
35. 35 / 57
36. 36 / 57
37. Sequential JPEGs vs. Progressive JPEGs on HTTP2 37 / 57
38. 38 / 57
39. 39 / 57
40. 40 / 57
41. Can We Go ... Even Faster? 41 / 57
42. 42 / 57
43. 43 / 57
44. 44 / 57
45. 1 45 / 57
46. 2 46 / 57
47. 3 47 / 57
48. 4 48 / 57
49. 5 49 / 57
50. 50 / 57
51. 51 / 57
52. Optimized Progressive JPEGs yield 6% Speed Index Gain 52 / 57
53. 53 / 57
54. Ingredient #1: HTTP2 Ingredient #2: Progressive JPEG Ingredient #3: Optimal Scan Levels 54 / 57
55. It Will Start Image Rendering With 15% Data Sent 55 / 57
56. And Reduce Speed Index by 57% (6% via JPEG Scan Layer Optimization alone) 56 / 57
57. THANKS! Tobias Baldauf tbaldauf@akamai.com @tbaldauf 57 / 57