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 full-size slide

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

    View full-size slide

  3. Tobias Baldauf
    @tbaldauf
    [email protected]
    Rate this #VelocityConf session:
    https://is.gd/velocity_h2_img_feedback
    3 / 103

    View full-size slide

  4. Show Images
    Faster
    Than Ever
    5 / 103

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. What Shall We
    Learn?
    10 / 103

    View full-size slide

  8. Lesson #1
    Image Compression
    11 / 103

    View full-size slide

  9. Lesson #2
    HTTP2
    12 / 103

    View full-size slide

  10. mozjpeg
    13 / 103

    View full-size slide

  11. Optimized
    Huffman
    Tables
    14 / 103

    View full-size slide

  12. Custom
    Quantization
    Matrices
    15 / 103

    View full-size slide

  13. Trellis Quantization
    16 / 103

    View full-size slide

  14. Optimized
    Progressive
    Encoding
    17 / 103

    View full-size slide

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

    View full-size slide

  16. SSIM
    19 / 103

    View full-size slide

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

    View full-size slide

  18. Dissimilarity:
    0.13%
    23 / 103

    View full-size slide

  19. 1.5% OK
    24 / 103

    View full-size slide

  20. Automate it!
    25 / 103

    View full-size slide

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

    View full-size slide

  22. Live Action Demo!
    28 / 103

    View full-size slide

  23. // 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 full-size slide

  24. Progressive JPEGs
    30 / 103

    View full-size slide

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

    View full-size slide

  26. Scans
    32 / 103

    View full-size slide

  27. 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 full-size slide

  28. Org Cb
    Y Cr
    37 / 103

    View full-size slide

  29. Live Action Demo!
    40 / 103

    View full-size slide

  30. // 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. Consider initcwnd
    49 / 103

    View full-size slide

  38. How
    FAST
    Is HTTP2?
    50 / 103

    View full-size slide

  39. What is
    FAST?
    51 / 103

    View full-size slide

  40. Speed Index
    52 / 103

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. 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 full-size slide

  45. Live Action Demo!
    57 / 103

    View full-size slide

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

    View full-size slide

  47. Live Action Demo!
    62 / 103

    View full-size slide

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

    View full-size slide

  49. Live Action Demo!
    67 / 103

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. // 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 full-size slide

  53. Live Action Demo!
    74 / 103

    View full-size slide

  54. // 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 full-size slide

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

    View full-size slide

  56. This is
    Old News!
    77 / 103

    View full-size slide

  57. 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 full-size slide

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

    View full-size slide

  59. Live Action Demo!
    81 / 103

    View full-size slide

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

    View full-size slide

  61. What about
    Server Push?
    90 / 103

    View full-size slide

  62. Enter ShimmerCat
    91 / 103

    View full-size slide

  63. // 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 full-size slide

  64. Live Action Demo!
    93 / 103

    View full-size slide

  65. Progressive Images
    +
    HTTP2
    =
    Win
    99 / 103

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. THANKS!
    102 / 103

    View full-size slide

  69. Tobias Baldauf
    @tbaldauf
    [email protected]
    Rate this #VelocityConf session:
    https://is.gd/velocity_h2_img_feedback
    103 / 103

    View full-size slide