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.

Transcript

1. Your Hero Images
   Need You!
   Save the Day with
   HTTP2 Image Loading
   1 / 89
   

   View Slide

2. Tobias Baldauf
   @tbaldauf
   tbaldauf@akamai.com
   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
    tbaldauf@akamai.com
    @tbaldauf
    89 / 89
    

    View Slide