Your Hero Images Need You! Save the Day with HTTP2 Image Loading - 90min Workshop at Velocity Santa Clara 2016

Images are a crucial component of all websites. They evoke emotions and prompt actions. They also form 64% of website data and 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 the Speed Index and Time to Interact suffer due to our need for images.

HTTP/2 puts a powerful tool at our disposal to address these issues for image loading. Tobias Baldauf explains how to use HTTP/2’s superpowers to optimize image delivery, thereby increasing the perceived performance of your page, reducing load times, and driving conversions. Tobias explores the details of HTTP/2’s multiplexing in depth and demonstrates how to leverage it to address image loading. You’ll learn how to take granular control of the encoding process for progressive or interlaced images to improve both performance and users’ emotional response time to page visuals.

Transcript

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

   View Slide

2. Workshop Assets URL:
   http://10.35.0.8
   2 / 103
   

   View Slide

3. Tobias Baldauf
   @tbaldauf
   tbaldauf@akamai.com
   Rate this #VelocityConf session:
   https://is.gd/velocity_h2_img_feedback
   3 / 103
   

   View Slide

4. 4 / 103
   

   View Slide

5. Show Images
   Faster
   Than Ever
   5 / 103
   

   View Slide

6. Render Contents With Only
   25%
   Image Data Sent
   6 / 103
   

   View Slide

7. 7 / 103
   

   View Slide

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

   View Slide

9. 9 / 103
   

   View Slide

10. What Shall We
    Learn?
    10 / 103
    

    View Slide

11. Lesson #1
    Image Compression
    11 / 103
    

    View Slide

12. Lesson #2
    HTTP2
    12 / 103
    

    View Slide

13. mozjpeg
    13 / 103
    

    View Slide

14. Optimized
    Huffman
    Tables
    14 / 103
    

    View Slide

15. Custom
    Quantization
    Matrices
    15 / 103
    

    View Slide

16. Trellis Quantization
    16 / 103
    

    View Slide

17. Optimized
    Progressive
    Encoding
    17 / 103
    

    View Slide

18. All with Minimal Impact
    on the
    SSIM Score
    18 / 103
    

    View Slide

19. SSIM
    19 / 103
    

    View Slide

20. 20 / 103
    

    View Slide

21. 21 / 103
    

    View Slide

22. To measure dissimilarity:
    DSSIM
    https://github.com/pornel/dssim
    22 / 103
    

    View Slide

23. Dissimilarity:
    0.13%
    23 / 103
    

    View Slide

24. 1.5% OK
    24 / 103
    

    View Slide

25. Automate it!
    25 / 103
    

    View Slide

26. cjpeg-dssim
    http://github.com/technopagan/cjpeg-dssim
    26 / 103
    

    View Slide

27. 27 / 103
    

    View Slide

28. Live Action Demo!
    28 / 103
    

    View Slide

29. // Print quality of JPEG image
    identify -format '%Q' input.jpg
    // Create smaller JPEG with same quality as input image
    mozjpeg -quality 86 -outfile output_mozjpeg.jpg input.jpg
    // Measure dissimilarity using DSSIM and intermediate PNGs
    dssim input.png output_mozjpeg.png
    // Auto-Tune best JPEG compression parameters using cjpeg-dssim
    cjpeg-dssim mozjpeg input.jpg
    // Print Interlace status of JPEG to see if it's progressively encoded
    identify -verbose input.jpg | grep Interlace
    29 / 103
    

    View Slide

30. Progressive JPEGs
    30 / 103
    

    View Slide

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

    View Slide

32. Scans
    32 / 103
    

    View Slide

33. 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 33 / 103
    

    View Slide

34. 34 / 103
    

    View Slide

35. 35 / 103
    

    View Slide

36. 36 / 103
    

    View Slide

37. Org Cb
    Y Cr
    37 / 103
    

    View Slide

38. 38 / 103
    

    View Slide

39. 39 / 103
    

    View Slide

40. Live Action Demo!
    40 / 103
    

    View Slide

41. // Create a progressively encoded JPEG with default scan layers using mozjpeg
    mozjpeg -outfile output_mozjpeg_default_scans.jpg input.jpg
    // Split a progressive JPEG apart to see its scan layers
    jsk output_mozjpeg_default_scans.jpg
    // Create a progressively encoded JPEG with custom scan layers
    mozjpeg -scans scans-custom.txt -outfile output_mozjpeg_custom_scans.jpg input.jpg
    41 / 103
    

    View Slide

42. Now Let's Learn About
    Optimized Delivery!
    42 / 103
    

    View Slide

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

    View Slide

44. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 44 / 103
    

    View Slide

45. 45 / 103
    

    View Slide

46. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 46 / 103
    

    View Slide

47. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 47 / 103
    

    View Slide

48. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 48 / 103
    

    View Slide

49. Consider initcwnd
    49 / 103
    

    View Slide

50. How
    FAST
    Is HTTP2?
    50 / 103
    

    View Slide

51. What is
    FAST?
    51 / 103
    

    View Slide

52. Speed Index
    52 / 103
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

56. 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 56 / 103
    

    View Slide

57. Live Action Demo!
    57 / 103
    

    View Slide

58. Baseline Sequential
    vs.
    Progressive JPEGs
    on HTTP1.1
    58 / 103
    

    View Slide

59. 59 / 103
    

    View Slide

60. 60 / 103
    

    View Slide

61. 61 / 103
    

    View Slide

62. Live Action Demo!
    62 / 103
    

    View Slide

63. Progressive JPEGs
    vs.
    Optimized pJPEGs
    on HTTP1.1
    63 / 103
    

    View Slide

64. 64 / 103
    

    View Slide

65. 65 / 103
    

    View Slide

66. 66 / 103
    

    View Slide

67. Live Action Demo!
    67 / 103
    

    View Slide

68. Baseline Sequential
    vs.
    Progressive JPEGs
    on HTTP2
    68 / 103
    

    View Slide

69. 69 / 103
    

    View Slide

70. 70 / 103
    

    View Slide

71. 71 / 103
    

    View Slide

72. It's important to tune
    initcwnd
    72 / 103
    

    View Slide

73. // Optimal initcwnd formula
    (MBps * RTT) / 1500 BytesPerPackage = optimal initcwnd
    // Example for 6Mbps and 50ms RTT (considering that 1Mbps = 125Kbps):
    6*125Kbps = 750Kbps
    // Let's assume 50ms RTT
    750 * 0.050= 37.5
    37.5 / 1500 Bytes Per Package = 0,025
    => optimal initcwnd of 25 for a single connection as in HTTP2
    73 / 103
    

    View Slide

74. Live Action Demo!
    74 / 103
    

    View Slide

75. // Check current initcwnd settings on *nix
    ip route show
    // Change initcwnd setting for a network interface
    // Make sure that the IP address matches
    sudo ip route change default via 123.123.123.123 dev eth0 initcwnd 25
    75 / 103
    

    View Slide

76. We now know about
    Progressive JPEGs
    The benefits of
    HTTP2
    & its optimized delivery of
    Scan Layers
    76 / 103
    

    View Slide

77. This is
    Old News!
    77 / 103
    

    View Slide

78. 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 78 / 103
    

    View Slide

79. Can We Go ...
    Even Faster?
    79 / 103
    

    View Slide

80. 80 / 103
    

    View Slide

81. Live Action Demo!
    81 / 103
    

    View Slide

82. 82 / 103
    

    View Slide

83. 83 / 103
    

    View Slide

84. 1
    84 / 103
    

    View Slide

85. 2
    85 / 103
    

    View Slide

86. 3
    86 / 103
    

    View Slide

87. 4
    87 / 103
    

    View Slide

88. 5
    88 / 103
    

    View Slide

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

    View Slide

90. What about
    Server Push?
    90 / 103
    

    View Slide

91. Enter ShimmerCat
    91 / 103
    

    View Slide

92. // Prioritize a progressive JPEG's metadata and scan levels
    // with minimal 'calm' => maximum priority
    
    // Create a cumulative cascade of 'calm'
    // for a progressive JPEG's metadata and scan levels
    // Each new value is added to the sum, lowering priority per scan layer
    
    92 / 103
    

    View Slide

93. Live Action Demo!
    93 / 103
    

    View Slide

94. 94 / 103
    

    View Slide

95. 95 / 103
    

    View Slide

96. 96 / 103
    

    View Slide

97. 97 / 103
    

    View Slide

98. 98 / 103
    

    View Slide

99. Progressive Images
    +
    HTTP2
    =
    Win
    99 / 103
    

    View Slide

100. Scan Layer Manipulation
     =
     Better Speed Index
     100 / 103
     

     View Slide

101. HTTP2 Server Push
     +
     Optimized Scan Layers
     =
     Awesomesauce
     101 / 103
     

     View Slide

102. THANKS!
     102 / 103
     

     View Slide

103. Tobias Baldauf
     @tbaldauf
     tbaldauf@akamai.com
     Rate this #VelocityConf session:
     https://is.gd/velocity_h2_img_feedback
     103 / 103
     

     View Slide