Pro Yearly is on sale from $80 to $50! »

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.

Dcdd7523e2e6249bcaf2a4ac19c09e8a?s=128

Tobias Baldauf

June 21, 2016
Tweet

Transcript

  1. Your Hero Images Need You! Save the Day with HTTP2

    Image Loading 1 / 103
  2. Workshop Assets URL: http://10.35.0.8 2 / 103

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

    / 103
  4. 4 / 103

  5. Show Images Faster Than Ever 5 / 103

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

    103
  7. 7 / 103

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

  9. 9 / 103

  10. What Shall We Learn? 10 / 103

  11. Lesson #1 Image Compression 11 / 103

  12. Lesson #2 HTTP2 12 / 103

  13. mozjpeg 13 / 103

  14. Optimized Huffman Tables 14 / 103

  15. Custom Quantization Matrices 15 / 103

  16. Trellis Quantization 16 / 103

  17. Optimized Progressive Encoding 17 / 103

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

    103
  19. SSIM 19 / 103

  20. 20 / 103

  21. 21 / 103

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

  23. Dissimilarity: 0.13% 23 / 103

  24. 1.5% OK 24 / 103

  25. Automate it! 25 / 103

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

  27. 27 / 103

  28. Live Action Demo! 28 / 103

  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
  30. Progressive JPEGs 30 / 103

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

    103
  32. Scans 32 / 103

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

  35. 35 / 103

  36. 36 / 103

  37. Org Cb Y Cr 37 / 103

  38. 38 / 103

  39. 39 / 103

  40. Live Action Demo! 40 / 103

  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
  42. Now Let's Learn About Optimized Delivery! 42 / 103

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

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

  45. 45 / 103

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

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

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

  49. Consider initcwnd 49 / 103

  50. How FAST Is HTTP2? 50 / 103

  51. What is FAST? 51 / 103

  52. Speed Index 52 / 103

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

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

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

  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
  57. Live Action Demo! 57 / 103

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

  59. 59 / 103

  60. 60 / 103

  61. 61 / 103

  62. Live Action Demo! 62 / 103

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

  64. 64 / 103

  65. 65 / 103

  66. 66 / 103

  67. Live Action Demo! 67 / 103

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

  69. 69 / 103

  70. 70 / 103

  71. 71 / 103

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

  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
  74. Live Action Demo! 74 / 103

  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
  76. We now know about Progressive JPEGs The benefits of HTTP2

    & its optimized delivery of Scan Layers 76 / 103
  77. This is Old News! 77 / 103

  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
  79. Can We Go ... Even Faster? 79 / 103

  80. 80 / 103

  81. Live Action Demo! 81 / 103

  82. 82 / 103

  83. 83 / 103

  84. 1 84 / 103

  85. 2 85 / 103

  86. 3 86 / 103

  87. 4 87 / 103

  88. 5 88 / 103

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

    103
  90. What about Server Push? 90 / 103

  91. Enter ShimmerCat 91 / 103

  92. // Prioritize a progressive JPEG's metadata and scan levels //

    with minimal 'calm' => maximum priority <img src="img/jpeg_opJPEG/tba/00001.jpg?bil=0!0"> // 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 <img src="img/jpeg_opJPEG/tba/00001.jpg?bil=0!100,50,20"> 92 / 103
  93. Live Action Demo! 93 / 103

  94. 94 / 103

  95. 95 / 103

  96. 96 / 103

  97. 97 / 103

  98. 98 / 103

  99. Progressive Images + HTTP2 = Win 99 / 103

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

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

    / 103
  102. THANKS! 102 / 103

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

    / 103