$30 off During Our Annual Pro Sale. View Details »

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.

Tobias Baldauf

May 10, 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 / 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