Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai...

transcript

Your Hero Images

Need You!Save the Day with

HTTP2 Image Loading

1 / 75 — tbaldauf@akamai.com

Tobias Baldauf@tbaldauf

tbaldauf@akamai.com

Show Images

FasterThan Ever

Render Meaningful Content With

25%Image Data Sent

ref. http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 8 / 75 — tbaldauf@akamai.com

What Can We Do?

Get compressin'!

Compress

Aggressively

Ship Right Format

Automate Quality

Still a Heavy Load :(

We need a new form of

Aggressive Delivery!

Enter HTTP2

Thanks to Clay Smith (https://twitter.com/smithclay) for this beauty! 18 / 75 — tbaldauf@akamai.com

kudos to my team mate Lukasz Czerpak, @lukaszczerpak 19 / 75 — tbaldauf@akamai.com

kudos to my team mate Lukasz Czerpak, @lukaszczerpak 20 / 75 — tbaldauf@akamai.com

H2 Constraints

Ingredient #1

H2 Multiplexing

Progressive JPEGs

Sequential JPEG Progressive JPEG

Images taken from http://www.pixelstech.net/article/1374757887-Use-progressive-JPEG-to-improve-user-experience 25 / 75 — tbaldauf@akamai.com

Scan Layers

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 — tbaldauf@akamai.com

Org Cb

Y Cr28 / 75 — tbaldauf@akamai.com

Can We Go ...

Even Faster?

Ingredient #2

Progressive JPEGs

FASTIs this Mixture?

What defines

Speed Index

ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 44 / 75 — tbaldauf@akamai.com

Site A displays

7.4x fasterthan Site B

more info at https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index 47 / 75 — tbaldauf@akamai.com

Baseline Sequentialvs.

Progressive JPEGson HTTP1.1

Progressive JPEGsvs.

Optimized pJPEGson HTTP1.1

Baseline Sequentialvs.

Progressive JPEGs

on HTTP2

Progressive JPEGsvs.

Optimized Progressive JPEGs

on HTTP2

Optimized pJPEGs on HTTP2 yield a

6% Speed Index Gain

What about

HTTP2 Server Push?

// 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">

Progressive Images+

HTTP2=

Scan Layer Manipulation=

Better Speed Index

HTTP2 Server Push+

Optimized Scan Layers=

Awesomesauce

THANKS!

Tobias Baldauf@tbaldauf

tbaldauf@akamai.com

Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai...

Engineering