Your Hero Images Need You! Save the Day with HTTP2 Image Loading - HighLoad++ 2016

Your Hero Images Need You! Save the Day with HTTP2 Image Loading - HighLoad++ 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 Highload++ 2016 conference in Moscow on 20161108.

Dcdd7523e2e6249bcaf2a4ac19c09e8a?s=128

Tobias Baldauf

November 08, 2016
Tweet

Transcript

  1. Your Hero Images Need You! Save the Day with HTTP2

    Image Loading 1 / 75 — tbaldauf@akamai.com
  2. Tobias Baldauf @tbaldauf tbaldauf@akamai.com 2 / 75 — tbaldauf@akamai.com

  3. 3 / 75 — tbaldauf@akamai.com

  4. 4 / 75 — tbaldauf@akamai.com

  5. Show Images Faster Than Ever 5 / 75 — tbaldauf@akamai.com

  6. Render Meaningful Content With 25% Image Data Sent 6 /

    75 — tbaldauf@akamai.com
  7. 7 / 75 — tbaldauf@akamai.com

  8. ref. http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 8 / 75 — tbaldauf@akamai.com

  9. 9 / 75 — tbaldauf@akamai.com

  10. What Can We Do? 10 / 75 — tbaldauf@akamai.com

  11. Get compressin'! 11 / 75 — tbaldauf@akamai.com

  12. Compress Aggressively 12 / 75 — tbaldauf@akamai.com

  13. Ship Right Format 13 / 75 — tbaldauf@akamai.com

  14. Automate Quality 14 / 75 — tbaldauf@akamai.com

  15. Still a Heavy Load :( 15 / 75 — tbaldauf@akamai.com

  16. We need a new form of Aggressive Delivery! 16 /

    75 — tbaldauf@akamai.com
  17. Enter HTTP2 17 / 75 — tbaldauf@akamai.com

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

    75 — tbaldauf@akamai.com
  19. kudos to my team mate Lukasz Czerpak, @lukaszczerpak 19 /

    75 — tbaldauf@akamai.com
  20. kudos to my team mate Lukasz Czerpak, @lukaszczerpak 20 /

    75 — tbaldauf@akamai.com
  21. 21 / 75 — tbaldauf@akamai.com

  22. H2 Constraints 22 / 75 — tbaldauf@akamai.com

  23. Ingredient #1 H2 Multiplexing 23 / 75 — tbaldauf@akamai.com

  24. Progressive JPEGs 24 / 75 — tbaldauf@akamai.com

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

    75 — tbaldauf@akamai.com
  26. Scan Layers 26 / 75 — tbaldauf@akamai.com

  27. 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 27 / 75 — tbaldauf@akamai.com
  28. Org Cb Y Cr 28 / 75 — tbaldauf@akamai.com

  29. 29 / 75 — tbaldauf@akamai.com

  30. 30 / 75 — tbaldauf@akamai.com

  31. 31 / 75 — tbaldauf@akamai.com

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

    tbaldauf@akamai.com
  33. 33 / 75 — tbaldauf@akamai.com

  34. 34 / 75 — tbaldauf@akamai.com

  35. 1 35 / 75 — tbaldauf@akamai.com

  36. 2 36 / 75 — tbaldauf@akamai.com

  37. 3 37 / 75 — tbaldauf@akamai.com

  38. 4 38 / 75 — tbaldauf@akamai.com

  39. 5 39 / 75 — tbaldauf@akamai.com

  40. Ingredient #2 Progressive JPEGs 40 / 75 — tbaldauf@akamai.com

  41. How FAST Is this Mixture? 41 / 75 — tbaldauf@akamai.com

  42. What defines FAST? 42 / 75 — tbaldauf@akamai.com

  43. Speed Index 43 / 75 — tbaldauf@akamai.com

  44. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 44 / 75 — tbaldauf@akamai.com

  45. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 45 / 75 — tbaldauf@akamai.com

  46. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 46 / 75 — tbaldauf@akamai.com

  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 — tbaldauf@akamai.com
  48. Baseline Sequential vs. Progressive JPEGs on HTTP1.1 48 / 75

    — tbaldauf@akamai.com
  49. 49 / 75 — tbaldauf@akamai.com

  50. 50 / 75 — tbaldauf@akamai.com

  51. 51 / 75 — tbaldauf@akamai.com

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

    — tbaldauf@akamai.com
  53. 53 / 75 — tbaldauf@akamai.com

  54. 54 / 75 — tbaldauf@akamai.com

  55. 55 / 75 — tbaldauf@akamai.com

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

    — tbaldauf@akamai.com
  57. 57 / 75 — tbaldauf@akamai.com

  58. 58 / 75 — tbaldauf@akamai.com

  59. 59 / 75 — tbaldauf@akamai.com

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

    75 — tbaldauf@akamai.com
  61. 61 / 75 — tbaldauf@akamai.com

  62. 62 / 75 — tbaldauf@akamai.com

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

    63 / 75 — tbaldauf@akamai.com
  64. What about HTTP2 Server Push? 64 / 75 — tbaldauf@akamai.com

  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 — tbaldauf@akamai.com
  66. 66 / 75 — tbaldauf@akamai.com

  67. 67 / 75 — tbaldauf@akamai.com

  68. 68 / 75 — tbaldauf@akamai.com

  69. 69 / 75 — tbaldauf@akamai.com

  70. 70 / 75 — tbaldauf@akamai.com

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

    tbaldauf@akamai.com
  72. Scan Layer Manipulation = Better Speed Index 72 / 75

    — tbaldauf@akamai.com
  73. HTTP2 Server Push + Optimized Scan Layers = Awesomesauce 73

    / 75 — tbaldauf@akamai.com
  74. THANKS! 74 / 75 — tbaldauf@akamai.com

  75. Tobias Baldauf @tbaldauf tbaldauf@akamai.com 75 / 75 — tbaldauf@akamai.com