$30 off During Our Annual Pro Sale. View Details »

Your Hero Images Need You! Save the Day with HTTP2 Image Loading - DevTalks Bucharest 2016

Your Hero Images Need You! Save the Day with HTTP2 Image Loading - DevTalks Bucharest 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 DevTalks Bucharest 2016 on 20160609.

Tobias Baldauf

June 09, 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 / 57

    View Slide

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

    View Slide

  3. 3 / 57

    View Slide

  4. 4 / 57

    View Slide

  5. Improve Speed Index by
    6%
    On Top of Best Practices
    5 / 57

    View Slide

  6. Impress With Only
    15%
    Image Data Sent
    6 / 57

    View Slide

  7. 7 / 57

    View Slide

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

    View Slide

  9. 9 / 57

    View Slide

  10. What Can We Do?
    10 / 57

    View Slide

  11. Get compressin'!
    11 / 57

    View Slide

  12. Use MOZJPEG
    The Best JPEG Encoder on Earth
    ref. https://github.com/mozilla/mozjpeg 12 / 57

    View Slide

  13. Go SSIM for Quality
    ref. https://github.com/technopagan/cjpeg-dssim 13 / 57

    View Slide

  14. Still a Heavy Load :(
    14 / 57

    View Slide

  15. Enter HTTP2
    15 / 57

    View Slide

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

    View Slide

  17. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 17 / 57

    View Slide

  18. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 18 / 57

    View Slide

  19. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 19 / 57

    View Slide

  20. 20 / 57

    View Slide

  21. Ingredient #1
    H2 Multiplexing
    21 / 57

    View Slide

  22. There's Another Ingredient!
    22 / 57

    View Slide

  23. 23 / 57

    View Slide

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

    View Slide

  25. Scans
    25 / 57

    View Slide

  26. 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 26 / 57

    View Slide

  27. 27 / 57

    View Slide

  28. 28 / 57

    View Slide

  29. 29 / 57

    View Slide

  30. 30 / 57

    View Slide

  31. 1st Scan Layer Has Small Byte Size
    Ships Fast
    &
    Shows Soon
    31 / 57

    View Slide

  32. Ingredient #2
    Progressive JPEGs
    32 / 57

    View Slide

  33. How
    FAST
    Is It?
    33 / 57

    View Slide

  34. 34 / 57

    View Slide

  35. 35 / 57

    View Slide

  36. 36 / 57

    View Slide

  37. Sequential JPEGs
    vs.
    Progressive JPEGs
    on HTTP2
    37 / 57

    View Slide

  38. 38 / 57

    View Slide

  39. 39 / 57

    View Slide

  40. 40 / 57

    View Slide

  41. Can We Go ...
    Even Faster?
    41 / 57

    View Slide

  42. 42 / 57

    View Slide

  43. 43 / 57

    View Slide

  44. 44 / 57

    View Slide

  45. 1
    45 / 57

    View Slide

  46. 2
    46 / 57

    View Slide

  47. 3
    47 / 57

    View Slide

  48. 4
    48 / 57

    View Slide

  49. 5
    49 / 57

    View Slide

  50. 50 / 57

    View Slide

  51. 51 / 57

    View Slide

  52. Optimized Progressive JPEGs yield
    6% Speed Index Gain
    52 / 57

    View Slide

  53. 53 / 57

    View Slide

  54. Ingredient #1: HTTP2
    Ingredient #2: Progressive JPEG
    Ingredient #3: Optimal Scan Levels
    54 / 57

    View Slide

  55. It Will Start
    Image Rendering With
    15%
    Data Sent
    55 / 57

    View Slide

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

    View Slide

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

    View Slide