edge 2016 your hero images need you
TRANSCRIPT
![Page 1: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/1.jpg)
1 / 75 — © AKAMAI-EDGE 2016
![Page 2: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/2.jpg)
Tobias Baldauf@tbaldauf
2 / 75 — © AKAMAI-EDGE 2016
![Page 3: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/3.jpg)
3 / 75 — © AKAMAI-EDGE 2016
![Page 4: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/4.jpg)
Show Images
FasterThan Ever
4 / 75 — © AKAMAI-EDGE 2016
![Page 5: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/5.jpg)
Render Meaningful Content With
25%Image Data Sent
5 / 75 — © AKAMAI-EDGE 2016
![Page 6: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/6.jpg)
6 / 75 — © AKAMAI-EDGE 2016
![Page 7: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/7.jpg)
ref. http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 7 / 75 — © AKAMAI-EDGE 2016
![Page 8: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/8.jpg)
8 / 75 — © AKAMAI-EDGE 2016
![Page 9: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/9.jpg)
What Can We Do?
9 / 75 — © AKAMAI-EDGE 2016
![Page 10: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/10.jpg)
Get compressin'!
10 / 75 — © AKAMAI-EDGE 2016
![Page 11: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/11.jpg)
CompressAggressively
11 / 75 — © AKAMAI-EDGE 2016
![Page 12: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/12.jpg)
Ship Right Format
12 / 75 — © AKAMAI-EDGE 2016
![Page 13: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/13.jpg)
Automate Quality
13 / 75 — © AKAMAI-EDGE 2016
![Page 14: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/14.jpg)
Still a Heavy Load :(
14 / 75 — © AKAMAI-EDGE 2016
![Page 15: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/15.jpg)
We need a new form of
Aggressive Delivery!
15 / 75 — © AKAMAI-EDGE 2016
![Page 16: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/16.jpg)
Enter HTTP2
16 / 75 — © AKAMAI-EDGE 2016
![Page 17: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/17.jpg)
Thanks to Clay Smith (https://twitter.com/smithclay) for this beauty! 17 / 75 — © AKAMAI-EDGE 2016
![Page 18: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/18.jpg)
kudos to my team mate Lukasz Czerpak, @lukaszczerpak 18 / 75 — © AKAMAI-EDGE 2016
![Page 19: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/19.jpg)
kudos to my team mate Lukasz Czerpak, @lukaszczerpak 19 / 75 — © AKAMAI-EDGE 2016
![Page 20: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/20.jpg)
20 / 75 — © AKAMAI-EDGE 2016
![Page 21: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/21.jpg)
H2 Constraints
21 / 75 — © AKAMAI-EDGE 2016
![Page 22: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/22.jpg)
Ingredient #1
H2 Multiplexing
22 / 75 — © AKAMAI-EDGE 2016
![Page 23: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/23.jpg)
Progressive JPEGs
23 / 75 — © AKAMAI-EDGE 2016
![Page 24: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/24.jpg)
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
![Page 25: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/25.jpg)
Scan Layers
25 / 75 — © AKAMAI-EDGE 2016
![Page 26: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/26.jpg)
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
![Page 27: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/27.jpg)
27 / 75 — © AKAMAI-EDGE 2016
![Page 28: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/28.jpg)
Org Cb
Y Cr28 / 75 — © AKAMAI-EDGE 2016
![Page 29: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/29.jpg)
29 / 75 — © AKAMAI-EDGE 2016
![Page 30: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/30.jpg)
30 / 75 — © AKAMAI-EDGE 2016
![Page 31: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/31.jpg)
31 / 75 — © AKAMAI-EDGE 2016
![Page 32: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/32.jpg)
Can We Go ...
Even Faster?
32 / 75 — © AKAMAI-EDGE 2016
![Page 33: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/33.jpg)
33 / 75 — © AKAMAI-EDGE 2016
![Page 34: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/34.jpg)
34 / 75 — © AKAMAI-EDGE 2016
![Page 35: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/35.jpg)
1
35 / 75 — © AKAMAI-EDGE 2016
![Page 36: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/36.jpg)
2
36 / 75 — © AKAMAI-EDGE 2016
![Page 37: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/37.jpg)
3
37 / 75 — © AKAMAI-EDGE 2016
![Page 38: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/38.jpg)
4
38 / 75 — © AKAMAI-EDGE 2016
![Page 39: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/39.jpg)
5
39 / 75 — © AKAMAI-EDGE 2016
![Page 40: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/40.jpg)
Ingredient #2
Progressive JPEGs
40 / 75 — © AKAMAI-EDGE 2016
![Page 41: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/41.jpg)
How
FASTIs this Mixture?
41 / 75 — © AKAMAI-EDGE 2016
![Page 42: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/42.jpg)
What defines
FAST?
42 / 75 — © AKAMAI-EDGE 2016
![Page 43: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/43.jpg)
Speed Index
43 / 75 — © AKAMAI-EDGE 2016
![Page 44: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/44.jpg)
ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 44 / 75 — © AKAMAI-EDGE 2016
![Page 45: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/45.jpg)
ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 45 / 75 — © AKAMAI-EDGE 2016
![Page 46: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/46.jpg)
ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 46 / 75 — © AKAMAI-EDGE 2016
![Page 47: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/47.jpg)
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
![Page 48: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/48.jpg)
Baseline Sequentialvs.
Progressive JPEGson HTTP1.1
48 / 75 — © AKAMAI-EDGE 2016
![Page 49: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/49.jpg)
49 / 75 — © AKAMAI-EDGE 2016
![Page 50: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/50.jpg)
50 / 75 — © AKAMAI-EDGE 2016
![Page 51: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/51.jpg)
51 / 75 — © AKAMAI-EDGE 2016
![Page 52: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/52.jpg)
Progressive JPEGsvs.
Optimized pJPEGson HTTP1.1
52 / 75 — © AKAMAI-EDGE 2016
![Page 53: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/53.jpg)
53 / 75 — © AKAMAI-EDGE 2016
![Page 54: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/54.jpg)
54 / 75 — © AKAMAI-EDGE 2016
![Page 55: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/55.jpg)
55 / 75 — © AKAMAI-EDGE 2016
![Page 56: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/56.jpg)
Baseline Sequentialvs.
Progressive JPEGs
on HTTP2
56 / 75 — © AKAMAI-EDGE 2016
![Page 57: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/57.jpg)
57 / 75 — © AKAMAI-EDGE 2016
![Page 58: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/58.jpg)
58 / 75 — © AKAMAI-EDGE 2016
![Page 59: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/59.jpg)
59 / 75 — © AKAMAI-EDGE 2016
![Page 60: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/60.jpg)
Progressive JPEGsvs.
Optimized Progressive JPEGs
on HTTP2
60 / 75 — © AKAMAI-EDGE 2016
![Page 61: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/61.jpg)
61 / 75 — © AKAMAI-EDGE 2016
![Page 62: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/62.jpg)
62 / 75 — © AKAMAI-EDGE 2016
![Page 63: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/63.jpg)
Optimized pJPEGs on HTTP2 yield a
6% Speed Index Gain
63 / 75 — © AKAMAI-EDGE 2016
![Page 64: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/64.jpg)
What about
HTTP2 Server Push?
64 / 75 — © AKAMAI-EDGE 2016
![Page 65: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/65.jpg)
// 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
![Page 66: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/66.jpg)
66 / 75 — © AKAMAI-EDGE 2016
![Page 67: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/67.jpg)
67 / 75 — © AKAMAI-EDGE 2016
![Page 68: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/68.jpg)
68 / 75 — © AKAMAI-EDGE 2016
![Page 69: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/69.jpg)
69 / 75 — © AKAMAI-EDGE 2016
![Page 70: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/70.jpg)
70 / 75 — © AKAMAI-EDGE 2016
![Page 71: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/71.jpg)
Progressive Images+
HTTP2=
Win71 / 75 — © AKAMAI-EDGE 2016
![Page 72: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/72.jpg)
Scan Layer Manipulation=
Better Speed Index
72 / 75 — © AKAMAI-EDGE 2016
![Page 73: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/73.jpg)
HTTP2 Server Push+
Optimized Scan Layers=
Awesomesauce73 / 75 — © AKAMAI-EDGE 2016
![Page 74: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/74.jpg)
THANKS!
74 / 75 — © AKAMAI-EDGE 2016
![Page 75: Edge 2016 your hero images need you](https://reader035.vdocument.in/reader035/viewer/2022070516/587165b61a28ab58758b5577/html5/thumbnails/75.jpg)
Tobias Baldauf@tbaldauf
75 / 75 — © AKAMAI-EDGE 2016