1 / 75 — © AKAMAI-EDGE 2016

Tobias Baldauf@tbaldauf

tbaldauf@akamai.com

2 / 75 — © AKAMAI-EDGE 2016

3 / 75 — © AKAMAI-EDGE 2016

Show Images

FasterThan Ever

4 / 75 — © AKAMAI-EDGE 2016

Render Meaningful Content With

25%Image Data Sent

5 / 75 — © AKAMAI-EDGE 2016

6 / 75 — © AKAMAI-EDGE 2016

ref. http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 7 / 75 — © AKAMAI-EDGE 2016

8 / 75 — © AKAMAI-EDGE 2016

What Can We Do?

9 / 75 — © AKAMAI-EDGE 2016

Get compressin'!

10 / 75 — © AKAMAI-EDGE 2016

CompressAggressively

11 / 75 — © AKAMAI-EDGE 2016

Ship Right Format

12 / 75 — © AKAMAI-EDGE 2016

Automate Quality

13 / 75 — © AKAMAI-EDGE 2016

Still a Heavy Load :(

14 / 75 — © AKAMAI-EDGE 2016

We need a new form of

Aggressive Delivery!

15 / 75 — © AKAMAI-EDGE 2016

Enter HTTP2

16 / 75 — © AKAMAI-EDGE 2016

Thanks to Clay Smith (https://twitter.com/smithclay) for this beauty! 17 / 75 — © AKAMAI-EDGE 2016

kudos to my team mate Lukasz Czerpak, @lukaszczerpak 18 / 75 — © AKAMAI-EDGE 2016

kudos to my team mate Lukasz Czerpak, @lukaszczerpak 19 / 75 — © AKAMAI-EDGE 2016

20 / 75 — © AKAMAI-EDGE 2016

H2 Constraints

21 / 75 — © AKAMAI-EDGE 2016

Ingredient #1

H2 Multiplexing

22 / 75 — © AKAMAI-EDGE 2016

Progressive JPEGs

23 / 75 — © AKAMAI-EDGE 2016

Sequential JPEG Progressive JPEG

Images taken from http://www.pixelstech.net/article/1374757887-Use-progressive-JPEG-to-improve-user-experience 24 / 75 — © AKAMAI-EDGE 2016

Scan Layers

25 / 75 — © AKAMAI-EDGE 2016

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 26 / 75 — © AKAMAI-EDGE 2016

27 / 75 — © AKAMAI-EDGE 2016

Org Cb

Y Cr28 / 75 — © AKAMAI-EDGE 2016

29 / 75 — © AKAMAI-EDGE 2016

30 / 75 — © AKAMAI-EDGE 2016

31 / 75 — © AKAMAI-EDGE 2016

Can We Go ...

Even Faster?

32 / 75 — © AKAMAI-EDGE 2016

33 / 75 — © AKAMAI-EDGE 2016

34 / 75 — © AKAMAI-EDGE 2016

1

35 / 75 — © AKAMAI-EDGE 2016

2

36 / 75 — © AKAMAI-EDGE 2016

3

37 / 75 — © AKAMAI-EDGE 2016

4

38 / 75 — © AKAMAI-EDGE 2016

5

39 / 75 — © AKAMAI-EDGE 2016

Ingredient #2

Progressive JPEGs

40 / 75 — © AKAMAI-EDGE 2016

How

FASTIs this Mixture?

41 / 75 — © AKAMAI-EDGE 2016

What defines

FAST?

42 / 75 — © AKAMAI-EDGE 2016

Speed Index

43 / 75 — © AKAMAI-EDGE 2016

ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 44 / 75 — © AKAMAI-EDGE 2016

ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 45 / 75 — © AKAMAI-EDGE 2016

ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 46 / 75 — © AKAMAI-EDGE 2016

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 — © AKAMAI-EDGE 2016

Baseline Sequentialvs.

Progressive JPEGson HTTP1.1

48 / 75 — © AKAMAI-EDGE 2016

49 / 75 — © AKAMAI-EDGE 2016

50 / 75 — © AKAMAI-EDGE 2016

51 / 75 — © AKAMAI-EDGE 2016

Progressive JPEGsvs.

Optimized pJPEGson HTTP1.1

52 / 75 — © AKAMAI-EDGE 2016

53 / 75 — © AKAMAI-EDGE 2016

54 / 75 — © AKAMAI-EDGE 2016

55 / 75 — © AKAMAI-EDGE 2016

Baseline Sequentialvs.

Progressive JPEGs

on HTTP2

56 / 75 — © AKAMAI-EDGE 2016

57 / 75 — © AKAMAI-EDGE 2016

58 / 75 — © AKAMAI-EDGE 2016

59 / 75 — © AKAMAI-EDGE 2016

Progressive JPEGsvs.

Optimized Progressive JPEGs

on HTTP2

60 / 75 — © AKAMAI-EDGE 2016

61 / 75 — © AKAMAI-EDGE 2016

62 / 75 — © AKAMAI-EDGE 2016

Optimized pJPEGs on HTTP2 yield a

6% Speed Index Gain

63 / 75 — © AKAMAI-EDGE 2016

What about

HTTP2 Server Push?

64 / 75 — © AKAMAI-EDGE 2016

// 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 — © AKAMAI-EDGE 2016

66 / 75 — © AKAMAI-EDGE 2016

67 / 75 — © AKAMAI-EDGE 2016

68 / 75 — © AKAMAI-EDGE 2016

69 / 75 — © AKAMAI-EDGE 2016

70 / 75 — © AKAMAI-EDGE 2016

Progressive Images+

HTTP2=

Win71 / 75 — © AKAMAI-EDGE 2016

Scan Layer Manipulation=

Better Speed Index

72 / 75 — © AKAMAI-EDGE 2016

HTTP2 Server Push+

Optimized Scan Layers=

Awesomesauce73 / 75 — © AKAMAI-EDGE 2016

THANKS!

74 / 75 — © AKAMAI-EDGE 2016

Tobias Baldauf@tbaldauf

tbaldauf@akamai.com

75 / 75 — © AKAMAI-EDGE 2016