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

Your Hero Images Need You! Save the Day with HTTP2 Image Loading

Your Hero Images Need You! Save the Day with HTTP2 Image Loading

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.

Tobias Baldauf

April 01, 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 / 44

    View full-size slide

  2. Tobias
    Baldauf
    [email protected]
    @tbaldauf
    2 / 44

    View full-size slide

  3. Improve Speed Index by
    6%
    On Top of Best Practices
    3 / 44

    View full-size slide

  4. Impress With Only
    15%
    Image Data Sent
    4 / 44

    View full-size slide

  5. ... With This One Weird Trick!
    5 / 44

    View full-size slide

  6. ref. http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 6 / 44

    View full-size slide

  7. Enter HTTP2
    7 / 44

    View full-size slide

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

    View full-size slide

  9. Ingredient #1
    Multiplexing
    10 / 44

    View full-size slide

  10. There's Another Ingredient!
    11 / 44

    View full-size slide

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

    View full-size slide

  12. Scans
    14 / 44

    View full-size slide

  13. 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 15 / 44

    View full-size slide

  14. 1st Scan Layer Has Small Byte Size
    Ships Fast
    &
    Shows Soon
    19 / 44

    View full-size slide

  15. Ingredient #2
    Progressive JPEGs
    20 / 44

    View full-size slide

  16. How Fast Is It?
    21 / 44

    View full-size slide

  17. Sequential JPEGs
    vs.
    Progressive JPEGs
    on HTTP2
    25 / 44

    View full-size slide

  18. Can We Go ...
    Even Faster?
    29 / 44

    View full-size slide

  19. Optimized Progressive JPEGs yield
    6% Speed Index Gain
    39 / 44

    View full-size slide

  20. Ingredient #1: HTTP2
    Ingredient #2: Progressive JPEG
    Ingredient #3: Optimal Scan Levels
    41 / 44

    View full-size slide

  21. It Will Start
    Image Rendering With
    15%
    Data Sent
    42 / 44

    View full-size slide

  22. And Reduce
    Speed Index by
    57%
    (6% via JPEG Scan Layer Optimization alone)
    43 / 44

    View full-size slide

  23. THANKS!
    Tobias Baldauf
    [email protected]
    @tbaldauf
    44 / 44

    View full-size slide