Your Hero Images Need You! Save the Day with HTTP2 Image Loading

Your Hero Images Need You! Save the Day with HTTP2 Image Loading

Images form 64% of all website data & have a high correlation to page load time. Optimizing image delivery through compression alone is a daunting task. Using HTTP2's superpowers, we can optimize images to ship faster, increasing the perceived performance and initiating users' emotional responses to visuals earlier. HTTP2-powered image delivery leads to lower bounce rates and higher conversions.

------------------------------------------

This version of my talk was given at beyondtellerrand conference in Düsseldorf, Germany on Tuesday, 20160510.

Dcdd7523e2e6249bcaf2a4ac19c09e8a?s=128

Tobias Baldauf

May 10, 2016
Tweet

Transcript

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

    Image Loading 1 / 89
  2. Tobias Baldauf @tbaldauf tbaldauf@akamai.com 2 / 89

  3. 3 / 89

  4. 4 / 89

  5. 5 / 89

  6. 6 / 89

  7. 7 / 89

  8. 8 / 89

  9. 9 / 89

  10. 10 / 89

  11. 11 / 89

  12. 12 / 89

  13. 13 / 89

  14. Improve Speed Index by 6% On Top of Best Practices

    14 / 89
  15. Impress With Only 15% Image Data Sent 15 / 89

  16. 16 / 89

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

  18. 18 / 89

  19. 19 / 89

  20. Case Study FT.COM ref. https://next.ft.com/ 20 / 89

  21. ref. http://engineroom.ft.com/2016/04/04/a-faster-ft-com/ via https://wpostats.com/ 21 / 89

  22. What Can We Do? 22 / 89

  23. Get compressin'! 23 / 89

  24. Use MOZJPEG The Best JPEG Encoder on Earth ref. https://github.com/mozilla/mozjpeg

    24 / 89
  25. Go SSIM for Quality ref. https://github.com/technopagan/cjpeg-dssim 25 / 89

  26. Still a Heavy Load :( 26 / 89

  27. Enter HTTP2 27 / 89

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

    89
  29. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 29 / 89

  30. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 30 / 89

  31. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 31 / 89

  32. kudos to my colleague Lukasz Czerpak, @lukaszczerpak 32 / 89

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

  34. 34 / 89

  35. Consider initcwnd 35 / 89

  36. Ingredient #1 H2 Multiplexing 36 / 89

  37. There's Another Ingredient! 37 / 89

  38. 38 / 89

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

    89
  40. Scans 40 / 89

  41. 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 41 / 89
  42. 42 / 89

  43. 43 / 89

  44. 44 / 89

  45. 45 / 89

  46. Org Cb Y Cr 46 / 89

  47. 47 / 89

  48. 48 / 89

  49. 1st Scan Layer Has Small Byte Size Ships Fast &

    Shows Soon 49 / 89
  50. Progressive JPEGs on H2 show Good Visuals Faster 50 /

    89
  51. 51 / 89

  52. This is Old News! 52 / 89

  53. 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 53 / 89
  54. Ingredient #2 Progressive JPEGs 54 / 89

  55. How FAST Is It? 55 / 89

  56. What is FAST? 56 / 89

  57. Speed Index 57 / 89

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

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

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

  61. 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 61 / 89
  62. 62 / 89

  63. 63 / 89

  64. 64 / 89

  65. Sequential JPEGs vs. Progressive JPEGs on HTTP2 65 / 89

  66. 66 / 89

  67. 67 / 89

  68. 68 / 89

  69. Can We Go ... Even Faster? 69 / 89

  70. 70 / 89

  71. 71 / 89

  72. 72 / 89

  73. 1 73 / 89

  74. 2 74 / 89

  75. 3 75 / 89

  76. 4 76 / 89

  77. 5 77 / 89

  78. 78 / 89

  79. 79 / 89

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

    89
  81. Hold It! Maybe More, Smaller Scan Layers Benefit Even More

    From HTTP2 81 / 89
  82. kudos to Nicolas Robidoux, https://www.imagemagick.org/discourse-server/viewtopic.php?t=20402 82 / 89

  83. 83 / 89

  84. 84 / 89

  85. 85 / 89

  86. Ingredient #1: HTTP2 Ingredient #2: Progressive JPEG Ingredient #3: Optimal

    Scan Levels 86 / 89
  87. It Will Start Image Rendering With 15% Data Sent 87

    / 89
  88. And Reduce Speed Index by 57% (6% via JPEG Scan

    Layer Optimization alone) 88 / 89
  89. THANKS! Tobias Baldauf tbaldauf@akamai.com @tbaldauf 89 / 89