Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Your Hero Images Need You! Save the Day with HT...

Avatar for Tobias Baldauf Tobias Baldauf
November 08, 2016
Technology
2
220

Your Hero Images Need You! Save the Day with HTTP2 Image Loading - HighLoad++ 2016

Images are a crucial component of all websites: they evoke emotions and prompt actions. They also form 64% of website data & 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 Speed Index and Time To Interact suffer from our need for images.

With HTTP2, we have a powerful tool at our disposal to address these issues for image loading. We will explore the details of HTTP2’s multiplexing in depth and how we can leverage it to address image loading. As our images need to be optimized to maximize the benefits of image delivery over HTTP2, we will learn how to take granular control of the encoding process for progressive or interlaced images. This will directly influence the Speed Index and our users emotional response time to page visuals. To further optimize for high performance images, we will look at compatible image compression techniques.

Using HTTP2-powered high performance images will increase the perceived performance of your page, reduce load times and drive conversions.

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

The version of this talk was given at Highload++ 2016 conference in Moscow on 20161108.
Avatar for Tobias Baldauf

Tobias Baldauf

November 08, 2016
Tweet

More Decks by Tobias Baldauf

See All by Tobias Baldauf
Actually Actionable Image Optimization
Avatar for Tobias Baldauf tbaldauf
0
55
Exciting WebPageTest Scripting - WebPerf Meetup Hamburg, 20230323
Avatar for Tobias Baldauf tbaldauf
0
680
Image Formats, Performance and Cognitive Load
Avatar for Tobias Baldauf tbaldauf
1
630
25% Faster Hotel Search. Web Performance? - trivago.
Avatar for Tobias Baldauf tbaldauf
1
380
Fake It 'Til You Make It - Prerendering Image Contents For Fun & Profit
Avatar for Tobias Baldauf tbaldauf
1
530
25% Faster Hotel Search. Web Performance? - trivago.
Avatar for Tobias Baldauf tbaldauf
3
1k
Visual Quality Assessments for High Performance Images
Avatar for Tobias Baldauf tbaldauf
2
230
Your Hero Images Need You! Save the Day with HTTP2 Image Loading - Akamai Edge Conference 2016
Avatar for Tobias Baldauf tbaldauf
1
250
Your Hero Images Need You! Save the Day with HTTP2 Image Loading - 90min Workshop at Velocity Santa Clara 2016
Avatar for Tobias Baldauf tbaldauf
4
490

Other Decks in Technology

See All in Technology
続・やっぱり余白が大切だった話
Avatar for KAKEHASHI kakehashi
PRO
3
310
Azure × MCP 入門
Avatar for Ryosuke Hyakuta ry0y4n
8
1.6k
3D生成AIのための画像生成
Avatar for 伊藤光祐 kosukeito
2
620
Simplify! 10 ways to reduce complexity in software development
Avatar for Uwe Friedrichsen ufried
2
240
GraphQLを活用したリアーキテクチャに対応するSLI/Oの再設計
Avatar for coconala_engineer coconala_engineer
0
210
猫でもわかるS3 Tables【Apache Iceberg編】
Avatar for Hiroo Katoh kentapapa
2
180
Асинхронная коммуникация в Go: от понятного к душному. Дима Некрасов, Otello, 2ГИС
Avatar for Lamoda Tech lamodatech
0
2.1k
Aspire をカスタマイズしよう & Aspire 9.2
Avatar for neno nenonaninu
0
380
DynamoDB のデータを QuickSight で可視化する際につまづいたこと/stumbling-blocks-when-visualising-dynamodb-with-quicksight
Avatar for emi emiki
0
150
LINE 購物幕後推手
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
430
Google Cloud Next 2025 Recap アプリケーション開発を加速する機能アップデート / Application development-related features of Google Cloud
Avatar for turbofish ryokotmng
0
100
LangfuseではじめるAIアプリのLLMトレーシング
Avatar for Tadashi Shigeoka codenote
0
140

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
41
2.6k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
50k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
76
9.4k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
120
52k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
5
600
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
70k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
30
2.3k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
13
840

Transcript

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

    Image Loading 1 / 75 — [email protected]

  2. Tobias Baldauf @tbaldauf [email protected] 2 / 75 — [email protected]

  3. 3 / 75 — [email protected]

  4. 4 / 75 — [email protected]

  5. Show Images Faster Than Ever 5 / 75 — [email protected]

  6. Render Meaningful Content With 25% Image Data Sent 6 /

    75 — [email protected]

  7. 7 / 75 — [email protected]

  8. ref. http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 8 / 75 — [email protected]

  9. 9 / 75 — [email protected]

  10. What Can We Do? 10 / 75 — [email protected]

  11. Get compressin'! 11 / 75 — [email protected]

  12. Compress Aggressively 12 / 75 — [email protected]

  13. Ship Right Format 13 / 75 — [email protected]

  14. Automate Quality 14 / 75 — [email protected]

  15. Still a Heavy Load :( 15 / 75 — [email protected]

  16. We need a new form of Aggressive Delivery! 16 /

    75 — [email protected]

  17. Enter HTTP2 17 / 75 — [email protected]

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

    75 — [email protected]

  19. kudos to my team mate Lukasz Czerpak, @lukaszczerpak 19 /

    75 — [email protected]

  20. kudos to my team mate Lukasz Czerpak, @lukaszczerpak 20 /

    75 — [email protected]

  21. 21 / 75 — [email protected]

  22. H2 Constraints 22 / 75 — [email protected]

  23. Ingredient #1 H2 Multiplexing 23 / 75 — [email protected]

  24. Progressive JPEGs 24 / 75 — [email protected]

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

    75 — [email protected]

  26. Scan Layers 26 / 75 — [email protected]

  27. Default Scan Layers Thanks to Frédéric Kayser for creating 'jsk':

    http://encode.ru/threads/1800-JSK-JPEG-Scan-Killer-progressive-JPEG-explained-in-slowmo 27 / 75 — [email protected]

  28. Org Cb Y Cr 28 / 75 — [email protected]

  29. 29 / 75 — [email protected]

  30. 30 / 75 — [email protected]

  31. 31 / 75 — [email protected]

  32. Can We Go ... Even Faster? 32 / 75 —

    [email protected]

  33. 33 / 75 — [email protected]

  34. 34 / 75 — [email protected]

  35. 1 35 / 75 — [email protected]

  36. 2 36 / 75 — [email protected]

  37. 3 37 / 75 — [email protected]

  38. 4 38 / 75 — [email protected]

  39. 5 39 / 75 — [email protected]

  40. Ingredient #2 Progressive JPEGs 40 / 75 — [email protected]

  41. How FAST Is this Mixture? 41 / 75 — [email protected]

  42. What defines FAST? 42 / 75 — [email protected]

  43. Speed Index 43 / 75 — [email protected]

  44. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 44 / 75 — [email protected]

  45. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 45 / 75 — [email protected]

  46. ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 46 / 75 — [email protected]

  47. 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 47 / 75 — [email protected]

  48. Baseline Sequential vs. Progressive JPEGs on HTTP1.1 48 / 75

    — [email protected]

  49. 49 / 75 — [email protected]

  50. 50 / 75 — [email protected]

  51. 51 / 75 — [email protected]

  52. Progressive JPEGs vs. Optimized pJPEGs on HTTP1.1 52 / 75

    — [email protected]

  53. 53 / 75 — [email protected]

  54. 54 / 75 — [email protected]

  55. 55 / 75 — [email protected]

  56. Baseline Sequential vs. Progressive JPEGs on HTTP2 56 / 75

    — [email protected]

  57. 57 / 75 — [email protected]

  58. 58 / 75 — [email protected]

  59. 59 / 75 — [email protected]

  60. Progressive JPEGs vs. Optimized Progressive JPEGs on HTTP2 60 /

    75 — [email protected]

  61. 61 / 75 — [email protected]

  62. 62 / 75 — [email protected]

  63. Optimized pJPEGs on HTTP2 yield a 6% Speed Index Gain

    63 / 75 — [email protected]

  64. What about HTTP2 Server Push? 64 / 75 — [email protected]

  65. // 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"> 65 / 75 — [email protected]

  66. 66 / 75 — [email protected]

  67. 67 / 75 — [email protected]

  68. 68 / 75 — [email protected]

  69. 69 / 75 — [email protected]

  70. 70 / 75 — [email protected]

  71. Progressive Images + HTTP2 = Win 71 / 75 —

    [email protected]

  72. Scan Layer Manipulation = Better Speed Index 72 / 75

    — [email protected]

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

    / 75 — [email protected]

  74. THANKS! 74 / 75 — [email protected]

  75. Tobias Baldauf @tbaldauf [email protected] 75 / 75 — [email protected]