Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Tobias Baldauf

June 21, 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 / 103

    View Slide

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

    View Slide

  3. Tobias Baldauf
    @tbaldauf
    [email protected]
    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
    [email protected]
    Rate this #VelocityConf session:
    https://is.gd/velocity_h2_img_feedback
    103 / 103

    View Slide