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 form 64% of all website data & have a high correlation to page load time. Optimizing image delivery through compression alone is a daunting task. Using HTTP2's superpowers, we can optimize images to ship faster, increasing the perceived performance and initiating users' emotional responses to visuals earlier. HTTP2-powered image delivery leads to lower bounce rates and higher conversions.

------------------------------------------

This version of my talk was given at beyondtellerrand conference in Düsseldorf, Germany on Tuesday, 20160510.

Tobias Baldauf

May 10, 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 / 89

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Case Study
    FT.COM
    ref. https://next.ft.com/ 20 / 89

    View full-size slide

  7. ref. http://engineroom.ft.com/2016/04/04/a-faster-ft-com/ via https://wpostats.com/ 21 / 89

    View full-size slide

  8. What Can We Do?
    22 / 89

    View full-size slide

  9. Get compressin'!
    23 / 89

    View full-size slide

  10. Use MOZJPEG
    The Best JPEG Encoder on Earth
    ref. https://github.com/mozilla/mozjpeg 24 / 89

    View full-size slide

  11. Go SSIM for Quality
    ref. https://github.com/technopagan/cjpeg-dssim 25 / 89

    View full-size slide

  12. Still a Heavy Load :(
    26 / 89

    View full-size slide

  13. Enter HTTP2
    27 / 89

    View full-size slide

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

    View full-size slide

  15. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 29 / 89

    View full-size slide

  16. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 30 / 89

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Consider initcwnd
    35 / 89

    View full-size slide

  21. Ingredient #1
    H2 Multiplexing
    36 / 89

    View full-size slide

  22. There's Another Ingredient!
    37 / 89

    View full-size slide

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

    View full-size slide

  24. Scans
    40 / 89

    View full-size slide

  25. 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 41 / 89

    View full-size slide

  26. Org Cb
    Y Cr
    46 / 89

    View full-size slide

  27. 1st Scan Layer Has Small Byte Size
    Ships Fast
    &
    Shows Soon
    49 / 89

    View full-size slide

  28. Progressive JPEGs on H2 show
    Good Visuals Faster
    50 / 89

    View full-size slide

  29. This is
    Old News!
    52 / 89

    View full-size slide

  30. John Melor (Google, SPDY, 2012):
    @15%: initial visuals
    @35%: good visuals
    thanks to John Melor for this fantastic research and thanks to Yoav Weiss & Andy Davies for publishing it in their slide decks! See https://yoavweiss.github.io/respimg-blinkon-presentation/#/71/2 53 / 89

    View full-size slide

  31. Ingredient #2
    Progressive JPEGs
    54 / 89

    View full-size slide

  32. How
    FAST
    Is It?
    55 / 89

    View full-size slide

  33. What is
    FAST?
    56 / 89

    View full-size slide

  34. Speed Index
    57 / 89

    View full-size slide

  35. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 58 / 89

    View full-size slide

  36. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 59 / 89

    View full-size slide

  37. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 60 / 89

    View full-size slide

  38. 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 61 / 89

    View full-size slide

  39. Sequential JPEGs
    vs.
    Progressive JPEGs
    on HTTP2
    65 / 89

    View full-size slide

  40. Can We Go ...
    Even Faster?
    69 / 89

    View full-size slide

  41. Optimized Progressive JPEGs yield
    6% Speed Index Gain
    80 / 89

    View full-size slide

  42. Hold It!
    Maybe More, Smaller Scan Layers
    Benefit Even More From HTTP2
    81 / 89

    View full-size slide

  43. kudos to Nicolas Robidoux, https://www.imagemagick.org/discourse-server/viewtopic.php?t=20402 82 / 89

    View full-size slide

  44. Ingredient #1: HTTP2
    Ingredient #2: Progressive JPEG
    Ingredient #3: Optimal Scan Levels
    86 / 89

    View full-size slide

  45. It Will Start
    Image Rendering With
    15%
    Data Sent
    87 / 89

    View full-size slide

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

    View full-size slide

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

    View full-size slide