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. 4.
  2. 7.
  3. 9.
  4. 20.
  5. 21.
  6. 27.
  7. 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
  8. 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
  9. 34.
  10. 35.
  11. 36.
  12. 38.
  13. 39.
  14. 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
  15. 45.
  16. 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
  17. 59.
  18. 60.
  19. 61.
  20. 64.
  21. 65.
  22. 66.
  23. 69.
  24. 70.
  25. 71.
  26. 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
  27. 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
  28. 76.

    We now know about Progressive JPEGs The benefits of HTTP2

    & its optimized delivery of Scan Layers 76 / 103
  29. 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
  30. 80.
  31. 82.
  32. 83.
  33. 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
  34. 94.
  35. 95.
  36. 96.
  37. 97.
  38. 98.