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 Slide

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

    View Slide

  3. 3 / 89

    View Slide

  4. 4 / 89

    View Slide

  5. 5 / 89

    View Slide

  6. 6 / 89

    View Slide

  7. 7 / 89

    View Slide

  8. 8 / 89

    View Slide

  9. 9 / 89

    View Slide

  10. 10 / 89

    View Slide

  11. 11 / 89

    View Slide

  12. 12 / 89

    View Slide

  13. 13 / 89

    View Slide

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

    View Slide

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

    View Slide

  16. 16 / 89

    View Slide

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

    View Slide

  18. 18 / 89

    View Slide

  19. 19 / 89

    View Slide

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

    View Slide

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

    View Slide

  22. What Can We Do?
    22 / 89

    View Slide

  23. Get compressin'!
    23 / 89

    View Slide

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

    View Slide

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

    View Slide

  26. Still a Heavy Load :(
    26 / 89

    View Slide

  27. Enter HTTP2
    27 / 89

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. 34 / 89

    View Slide

  35. Consider initcwnd
    35 / 89

    View Slide

  36. Ingredient #1
    H2 Multiplexing
    36 / 89

    View Slide

  37. There's Another Ingredient!
    37 / 89

    View Slide

  38. 38 / 89

    View Slide

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

    View Slide

  40. Scans
    40 / 89

    View Slide

  41. 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 Slide

  42. 42 / 89

    View Slide

  43. 43 / 89

    View Slide

  44. 44 / 89

    View Slide

  45. 45 / 89

    View Slide

  46. Org Cb
    Y Cr
    46 / 89

    View Slide

  47. 47 / 89

    View Slide

  48. 48 / 89

    View Slide

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

    View Slide

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

    View Slide

  51. 51 / 89

    View Slide

  52. This is
    Old News!
    52 / 89

    View Slide

  53. 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 Slide

  54. Ingredient #2
    Progressive JPEGs
    54 / 89

    View Slide

  55. How
    FAST
    Is It?
    55 / 89

    View Slide

  56. What is
    FAST?
    56 / 89

    View Slide

  57. Speed Index
    57 / 89

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  61. 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 Slide

  62. 62 / 89

    View Slide

  63. 63 / 89

    View Slide

  64. 64 / 89

    View Slide

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

    View Slide

  66. 66 / 89

    View Slide

  67. 67 / 89

    View Slide

  68. 68 / 89

    View Slide

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

    View Slide

  70. 70 / 89

    View Slide

  71. 71 / 89

    View Slide

  72. 72 / 89

    View Slide

  73. 1
    73 / 89

    View Slide

  74. 2
    74 / 89

    View Slide

  75. 3
    75 / 89

    View Slide

  76. 4
    76 / 89

    View Slide

  77. 5
    77 / 89

    View Slide

  78. 78 / 89

    View Slide

  79. 79 / 89

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  83. 83 / 89

    View Slide

  84. 84 / 89

    View Slide

  85. 85 / 89

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide