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

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.

Tobias Baldauf

November 08, 2016
Tweet

More Decks by Tobias Baldauf

Other Decks in Technology

Transcript

  1. Your Hero Images
    Need You!
    Save the Day with
    HTTP2 Image Loading
    1 / 75 — [email protected]

    View Slide

  2. Tobias Baldauf
    @tbaldauf
    [email protected]
    2 / 75 — [email protected]

    View Slide

  3. 3 / 75 — [email protected]

    View Slide

  4. 4 / 75 — [email protected]

    View Slide

  5. Show Images
    Faster
    Than Ever
    5 / 75 — [email protected]

    View Slide

  6. Render Meaningful Content With
    25%
    Image Data Sent
    6 / 75 — [email protected]

    View Slide

  7. 7 / 75 — [email protected]

    View Slide

  8. ref. http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 8 / 75 — [email protected]

    View Slide

  9. 9 / 75 — [email protected]

    View Slide

  10. What Can We Do?
    10 / 75 — [email protected]

    View Slide

  11. Get compressin'!
    11 / 75 — [email protected]

    View Slide

  12. Compress
    Aggressively
    12 / 75 — [email protected]

    View Slide

  13. Ship Right Format
    13 / 75 — [email protected]

    View Slide

  14. Automate Quality
    14 / 75 — [email protected]

    View Slide

  15. Still a Heavy Load :(
    15 / 75 — [email protected]

    View Slide

  16. We need a new form of
    Aggressive Delivery!
    16 / 75 — [email protected]

    View Slide

  17. Enter HTTP2
    17 / 75 — [email protected]

    View Slide

  18. Thanks to Clay Smith (https://twitter.com/smithclay) for this beauty! 18 / 75 — [email protected]

    View Slide

  19. kudos to my team mate Lukasz Czerpak, @lukaszczerpak 19 / 75 — [email protected]

    View Slide

  20. kudos to my team mate Lukasz Czerpak, @lukaszczerpak 20 / 75 — [email protected]

    View Slide

  21. 21 / 75 — [email protected]

    View Slide

  22. H2 Constraints
    22 / 75 — [email protected]

    View Slide

  23. Ingredient #1
    H2 Multiplexing
    23 / 75 — [email protected]

    View Slide

  24. Progressive JPEGs
    24 / 75 — [email protected]

    View Slide

  25. Sequential JPEG Progressive JPEG
    Images taken from http://www.pixelstech.net/article/1374757887-Use-progressive-JPEG-to-improve-user-experience 25 / 75 — [email protected]

    View Slide

  26. Scan Layers
    26 / 75 — [email protected]

    View Slide

  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 — [email protected]

    View Slide

  28. Org Cb
    Y Cr
    28 / 75 — [email protected]

    View Slide

  29. 29 / 75 — [email protected]

    View Slide

  30. 30 / 75 — [email protected]

    View Slide

  31. 31 / 75 — [email protected]

    View Slide

  32. Can We Go ...
    Even Faster?
    32 / 75 — [email protected]

    View Slide

  33. 33 / 75 — [email protected]

    View Slide

  34. 34 / 75 — [email protected]

    View Slide

  35. 1
    35 / 75 — [email protected]

    View Slide

  36. 2
    36 / 75 — [email protected]

    View Slide

  37. 3
    37 / 75 — [email protected]

    View Slide

  38. 4
    38 / 75 — [email protected]

    View Slide

  39. 5
    39 / 75 — [email protected]

    View Slide

  40. Ingredient #2
    Progressive JPEGs
    40 / 75 — [email protected]

    View Slide

  41. How
    FAST
    Is this Mixture?
    41 / 75 — [email protected]

    View Slide

  42. What defines
    FAST?
    42 / 75 — [email protected]

    View Slide

  43. Speed Index
    43 / 75 — [email protected]

    View Slide

  44. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 44 / 75 — [email protected]

    View Slide

  45. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 45 / 75 — [email protected]

    View Slide

  46. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 46 / 75 — [email protected]

    View 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 — [email protected]

    View Slide

  48. Baseline Sequential
    vs.
    Progressive JPEGs
    on HTTP1.1
    48 / 75 — [email protected]

    View Slide

  49. 49 / 75 — [email protected]

    View Slide

  50. 50 / 75 — [email protected]

    View Slide

  51. 51 / 75 — [email protected]

    View Slide

  52. Progressive JPEGs
    vs.
    Optimized pJPEGs
    on HTTP1.1
    52 / 75 — [email protected]

    View Slide

  53. 53 / 75 — [email protected]

    View Slide

  54. 54 / 75 — [email protected]

    View Slide

  55. 55 / 75 — [email protected]

    View Slide

  56. Baseline Sequential
    vs.
    Progressive JPEGs
    on HTTP2
    56 / 75 — [email protected]

    View Slide

  57. 57 / 75 — [email protected]

    View Slide

  58. 58 / 75 — [email protected]

    View Slide

  59. 59 / 75 — [email protected]

    View Slide

  60. Progressive JPEGs
    vs.
    Optimized Progressive JPEGs
    on HTTP2
    60 / 75 — [email protected]

    View Slide

  61. 61 / 75 — [email protected]

    View Slide

  62. 62 / 75 — [email protected]

    View Slide

  63. Optimized pJPEGs on HTTP2 yield a
    6% Speed Index Gain
    63 / 75 — [email protected]

    View Slide

  64. What about
    HTTP2 Server Push?
    64 / 75 — [email protected]

    View 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 — [email protected]

    View Slide

  66. 66 / 75 — [email protected]

    View Slide

  67. 67 / 75 — [email protected]

    View Slide

  68. 68 / 75 — [email protected]

    View Slide

  69. 69 / 75 — [email protected]

    View Slide

  70. 70 / 75 — [email protected]

    View Slide

  71. Progressive Images
    +
    HTTP2
    =
    Win
    71 / 75 — [email protected]

    View Slide

  72. Scan Layer Manipulation
    =
    Better Speed Index
    72 / 75 — [email protected]

    View Slide

  73. HTTP2 Server Push
    +
    Optimized Scan Layers
    =
    Awesomesauce
    73 / 75 — [email protected]

    View Slide

  74. THANKS!
    74 / 75 — [email protected]

    View Slide

  75. Tobias Baldauf
    @tbaldauf
    [email protected]
    75 / 75 — [email protected]

    View Slide