Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Tobias Baldauf

October 18, 2016
Tweet

More Decks by Tobias Baldauf

Other Decks in Technology

Transcript

  1. 1 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  2. Tobias Baldauf
    @tbaldauf
    [email protected]
    2 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  3. 3 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  4. Show Images
    Faster
    Than Ever
    4 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

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

    View full-size slide

  6. 6 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

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

    View full-size slide

  8. 8 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. Still a Heavy Load :(
    14 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. Thanks to Clay Smith (https://twitter.com/smithclay) for this beauty! 17 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 20 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  27. 27 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

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

    View full-size slide

  29. 29 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  30. 30 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  31. 31 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  32. Can We Go ...
    Even Faster?
    32 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  33. 33 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  34. 34 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  48. Baseline Sequential
    vs.
    Progressive JPEGs
    on HTTP1.1
    48 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  49. 49 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  50. 50 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  51. 51 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  52. Progressive JPEGs
    vs.
    Optimized pJPEGs
    on HTTP1.1
    52 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  53. 53 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  54. 54 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  55. 55 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  56. Baseline Sequential
    vs.
    Progressive JPEGs
    on HTTP2
    56 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  57. 57 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  58. 58 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  59. 59 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  60. Progressive JPEGs
    vs.
    Optimized Progressive JPEGs
    on HTTP2
    60 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  61. 61 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  62. 62 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  63. Optimized pJPEGs on HTTP2 yield a
    6% Speed Index Gain
    63 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

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

    View full-size slide

  65. // Prioritize a progressive JPEG's metadata and scan levels
    // with minimal 'calm' => maximum priority

    // 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

    65 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  66. 66 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  67. 67 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  68. 68 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  69. 69 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  70. 70 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

  71. Progressive Images
    +
    HTTP2
    =
    Win
    71 / 75 — © AKAMAI-EDGE 2016

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  75. Tobias Baldauf
    @tbaldauf
    [email protected]
    75 / 75 — © AKAMAI-EDGE 2016

    View full-size slide