Your Hero Images Need You! Save the Day with HTTP2 Image Loading - Akamai Edge Conference 2016

Your Hero Images Need You! Save the Day with HTTP2 Image Loading - Akamai Edge Conference 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 Akamai Edge Conference 2016 in San Francisco on 20161018.

Dcdd7523e2e6249bcaf2a4ac19c09e8a?s=128

Tobias Baldauf

October 18, 2016
Tweet

Transcript

  1. 1 / 75 — © AKAMAI-EDGE 2016

  2. Tobias Baldauf @tbaldauf tbaldauf@akamai.com 2 / 75 — © AKAMAI-EDGE

    2016
  3. 3 / 75 — © AKAMAI-EDGE 2016

  4. Show Images Faster Than Ever 4 / 75 — ©

    AKAMAI-EDGE 2016
  5. Render Meaningful Content With 25% Image Data Sent 5 /

    75 — © AKAMAI-EDGE 2016
  6. 6 / 75 — © AKAMAI-EDGE 2016

  7. ref. http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 7 / 75 — © AKAMAI-EDGE 2016

  8. 8 / 75 — © AKAMAI-EDGE 2016

  9. What Can We Do? 9 / 75 — © AKAMAI-EDGE

    2016
  10. Get compressin'! 10 / 75 — © AKAMAI-EDGE 2016

  11. Compress Aggressively 11 / 75 — © AKAMAI-EDGE 2016

  12. Ship Right Format 12 / 75 — © AKAMAI-EDGE 2016

  13. Automate Quality 13 / 75 — © AKAMAI-EDGE 2016

  14. Still a Heavy Load :( 14 / 75 — ©

    AKAMAI-EDGE 2016
  15. We need a new form of Aggressive Delivery! 15 /

    75 — © AKAMAI-EDGE 2016
  16. Enter HTTP2 16 / 75 — © AKAMAI-EDGE 2016

  17. Thanks to Clay Smith (https://twitter.com/smithclay) for this beauty! 17 /

    75 — © AKAMAI-EDGE 2016
  18. kudos to my team mate Lukasz Czerpak, @lukaszczerpak 18 /

    75 — © AKAMAI-EDGE 2016
  19. kudos to my team mate Lukasz Czerpak, @lukaszczerpak 19 /

    75 — © AKAMAI-EDGE 2016
  20. 20 / 75 — © AKAMAI-EDGE 2016

  21. H2 Constraints 21 / 75 — © AKAMAI-EDGE 2016

  22. Ingredient #1 H2 Multiplexing 22 / 75 — © AKAMAI-EDGE

    2016
  23. Progressive JPEGs 23 / 75 — © AKAMAI-EDGE 2016

  24. Sequential JPEG Progressive JPEG Images taken from http://www.pixelstech.net/article/1374757887-Use-progressive-JPEG-to-improve-user-experience 24 /

    75 — © AKAMAI-EDGE 2016
  25. Scan Layers 25 / 75 — © AKAMAI-EDGE 2016

  26. Default Scan Layers Thanks to Frédéric Kayser for creating 'jsk':

    http://encode.ru/threads/1800-JSK-JPEG-Scan-Killer-progressive-JPEG-explained-in-slowmo 26 / 75 — © AKAMAI-EDGE 2016
  27. 27 / 75 — © AKAMAI-EDGE 2016

  28. Org Cb Y Cr 28 / 75 — © AKAMAI-EDGE

    2016
  29. 29 / 75 — © AKAMAI-EDGE 2016

  30. 30 / 75 — © AKAMAI-EDGE 2016

  31. 31 / 75 — © AKAMAI-EDGE 2016

  32. Can We Go ... Even Faster? 32 / 75 —

    © AKAMAI-EDGE 2016
  33. 33 / 75 — © AKAMAI-EDGE 2016

  34. 34 / 75 — © AKAMAI-EDGE 2016

  35. 1 35 / 75 — © AKAMAI-EDGE 2016

  36. 2 36 / 75 — © AKAMAI-EDGE 2016

  37. 3 37 / 75 — © AKAMAI-EDGE 2016

  38. 4 38 / 75 — © AKAMAI-EDGE 2016

  39. 5 39 / 75 — © AKAMAI-EDGE 2016

  40. Ingredient #2 Progressive JPEGs 40 / 75 — © AKAMAI-EDGE

    2016
  41. How FAST Is this Mixture? 41 / 75 — ©

    AKAMAI-EDGE 2016
  42. What defines FAST? 42 / 75 — © AKAMAI-EDGE 2016

  43. Speed Index 43 / 75 — © AKAMAI-EDGE 2016

  44. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 44 / 75 — © AKAMAI-EDGE

    2016
  45. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 45 / 75 — © AKAMAI-EDGE

    2016
  46. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 46 / 75 — © AKAMAI-EDGE

    2016
  47. 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 47 / 75 — © AKAMAI-EDGE 2016
  48. Baseline Sequential vs. Progressive JPEGs on HTTP1.1 48 / 75

    — © AKAMAI-EDGE 2016
  49. 49 / 75 — © AKAMAI-EDGE 2016

  50. 50 / 75 — © AKAMAI-EDGE 2016

  51. 51 / 75 — © AKAMAI-EDGE 2016

  52. Progressive JPEGs vs. Optimized pJPEGs on HTTP1.1 52 / 75

    — © AKAMAI-EDGE 2016
  53. 53 / 75 — © AKAMAI-EDGE 2016

  54. 54 / 75 — © AKAMAI-EDGE 2016

  55. 55 / 75 — © AKAMAI-EDGE 2016

  56. Baseline Sequential vs. Progressive JPEGs on HTTP2 56 / 75

    — © AKAMAI-EDGE 2016
  57. 57 / 75 — © AKAMAI-EDGE 2016

  58. 58 / 75 — © AKAMAI-EDGE 2016

  59. 59 / 75 — © AKAMAI-EDGE 2016

  60. Progressive JPEGs vs. Optimized Progressive JPEGs on HTTP2 60 /

    75 — © AKAMAI-EDGE 2016
  61. 61 / 75 — © AKAMAI-EDGE 2016

  62. 62 / 75 — © AKAMAI-EDGE 2016

  63. Optimized pJPEGs on HTTP2 yield a 6% Speed Index Gain

    63 / 75 — © AKAMAI-EDGE 2016
  64. What about HTTP2 Server Push? 64 / 75 — ©

    AKAMAI-EDGE 2016
  65. // 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"> 65 / 75 — © AKAMAI-EDGE 2016
  66. 66 / 75 — © AKAMAI-EDGE 2016

  67. 67 / 75 — © AKAMAI-EDGE 2016

  68. 68 / 75 — © AKAMAI-EDGE 2016

  69. 69 / 75 — © AKAMAI-EDGE 2016

  70. 70 / 75 — © AKAMAI-EDGE 2016

  71. Progressive Images + HTTP2 = Win 71 / 75 —

    © AKAMAI-EDGE 2016
  72. Scan Layer Manipulation = Better Speed Index 72 / 75

    — © AKAMAI-EDGE 2016
  73. HTTP2 Server Push + Optimized Scan Layers = Awesomesauce 73

    / 75 — © AKAMAI-EDGE 2016
  74. THANKS! 74 / 75 — © AKAMAI-EDGE 2016

  75. Tobias Baldauf @tbaldauf tbaldauf@akamai.com 75 / 75 — © AKAMAI-EDGE

    2016