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