Slide 1
Slide 1 text
Your Hero Images
Need You!
Save the Day with
HTTP2 Image Loading
1 / 103
Slide 2
Slide 2 text
Workshop Assets URL:
http://10.35.0.8
2 / 103
Slide 3
Slide 3 text
Tobias Baldauf
@tbaldauf
[email protected]
Rate this #VelocityConf session:
https://is.gd/velocity_h2_img_feedback
3 / 103
Slide 4
Slide 4 text
4 / 103
Slide 5
Slide 5 text
Show Images
Faster
Than Ever
5 / 103
Slide 6
Slide 6 text
Render Contents With Only
25%
Image Data Sent
6 / 103
Slide 7
Slide 7 text
7 / 103
Slide 8
Slide 8 text
ref. http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 8 / 103
Slide 9
Slide 9 text
9 / 103
Slide 10
Slide 10 text
What Shall We
Learn?
10 / 103
Slide 11
Slide 11 text
Lesson #1
Image Compression
11 / 103
Slide 12
Slide 12 text
Lesson #2
HTTP2
12 / 103
Slide 13
Slide 13 text
mozjpeg
13 / 103
Slide 14
Slide 14 text
Optimized
Huffman
Tables
14 / 103
Slide 15
Slide 15 text
Custom
Quantization
Matrices
15 / 103
Slide 16
Slide 16 text
Trellis Quantization
16 / 103
Slide 17
Slide 17 text
Optimized
Progressive
Encoding
17 / 103
Slide 18
Slide 18 text
All with Minimal Impact
on the
SSIM Score
18 / 103
Slide 19
Slide 19 text
SSIM
19 / 103
Slide 20
Slide 20 text
20 / 103
Slide 21
Slide 21 text
21 / 103
Slide 22
Slide 22 text
To measure dissimilarity:
DSSIM
https://github.com/pornel/dssim
22 / 103
Slide 23
Slide 23 text
Dissimilarity:
0.13%
23 / 103
Slide 24
Slide 24 text
1.5% OK
24 / 103
Slide 25
Slide 25 text
Automate it!
25 / 103
Slide 26
Slide 26 text
cjpeg-dssim
http://github.com/technopagan/cjpeg-dssim
26 / 103
Slide 27
Slide 27 text
27 / 103
Slide 28
Slide 28 text
Live Action Demo!
28 / 103
Slide 29
Slide 29 text
// Print quality of JPEG image
identify -format '%Q' input.jpg
// Create smaller JPEG with same quality as input image
mozjpeg -quality 86 -outfile output_mozjpeg.jpg input.jpg
// Measure dissimilarity using DSSIM and intermediate PNGs
dssim input.png output_mozjpeg.png
// Auto-Tune best JPEG compression parameters using cjpeg-dssim
cjpeg-dssim mozjpeg input.jpg
// Print Interlace status of JPEG to see if it's progressively encoded
identify -verbose input.jpg | grep Interlace
29 / 103
Slide 30
Slide 30 text
Progressive JPEGs
30 / 103
Slide 31
Slide 31 text
Sequential JPEG Progressive JPEG
Images taken from http://www.pixelstech.net/article/1374757887-Use-progressive-JPEG-to-improve-user-experience 31 / 103
Slide 32
Slide 32 text
Scans
32 / 103
Slide 33
Slide 33 text
Default Scan Levels
Thanks to Frédéric Kayser for creating 'jsk': http://encode.ru/threads/1800-JSK-JPEG-Scan-Killer-progressive-JPEG-explained-in-slowmo 33 / 103
Slide 34
Slide 34 text
34 / 103
Slide 35
Slide 35 text
35 / 103
Slide 36
Slide 36 text
36 / 103
Slide 37
Slide 37 text
Org Cb
Y Cr
37 / 103
Slide 38
Slide 38 text
38 / 103
Slide 39
Slide 39 text
39 / 103
Slide 40
Slide 40 text
Live Action Demo!
40 / 103
Slide 41
Slide 41 text
// Create a progressively encoded JPEG with default scan layers using mozjpeg
mozjpeg -outfile output_mozjpeg_default_scans.jpg input.jpg
// Split a progressive JPEG apart to see its scan layers
jsk output_mozjpeg_default_scans.jpg
// Create a progressively encoded JPEG with custom scan layers
mozjpeg -scans scans-custom.txt -outfile output_mozjpeg_custom_scans.jpg input.jpg
41 / 103
Slide 42
Slide 42 text
Now Let's Learn About
Optimized Delivery!
42 / 103
Slide 43
Slide 43 text
Thanks to Clay Smith (https://twitter.com/smithclay) for this beauty! 43 / 103
Slide 44
Slide 44 text
kudos to my colleague Lukasz Czerpak, @lukaszczerpak 44 / 103
Slide 45
Slide 45 text
45 / 103
Slide 46
Slide 46 text
kudos to my colleague Lukasz Czerpak, @lukaszczerpak 46 / 103
Slide 47
Slide 47 text
kudos to my colleague Lukasz Czerpak, @lukaszczerpak 47 / 103
Slide 48
Slide 48 text
kudos to my colleague Lukasz Czerpak, @lukaszczerpak 48 / 103
Slide 49
Slide 49 text
Consider initcwnd
49 / 103
Slide 50
Slide 50 text
How
FAST
Is HTTP2?
50 / 103
Slide 51
Slide 51 text
What is
FAST?
51 / 103
Slide 52
Slide 52 text
Speed Index
52 / 103
Slide 53
Slide 53 text
ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 53 / 103
Slide 54
Slide 54 text
ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 54 / 103
Slide 55
Slide 55 text
ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 55 / 103
Slide 56
Slide 56 text
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 56 / 103
Slide 57
Slide 57 text
Live Action Demo!
57 / 103
Slide 58
Slide 58 text
Baseline Sequential
vs.
Progressive JPEGs
on HTTP1.1
58 / 103
Slide 59
Slide 59 text
59 / 103
Slide 60
Slide 60 text
60 / 103
Slide 61
Slide 61 text
61 / 103
Slide 62
Slide 62 text
Live Action Demo!
62 / 103
Slide 63
Slide 63 text
Progressive JPEGs
vs.
Optimized pJPEGs
on HTTP1.1
63 / 103
Slide 64
Slide 64 text
64 / 103
Slide 65
Slide 65 text
65 / 103
Slide 66
Slide 66 text
66 / 103
Slide 67
Slide 67 text
Live Action Demo!
67 / 103
Slide 68
Slide 68 text
Baseline Sequential
vs.
Progressive JPEGs
on HTTP2
68 / 103
Slide 69
Slide 69 text
69 / 103
Slide 70
Slide 70 text
70 / 103
Slide 71
Slide 71 text
71 / 103
Slide 72
Slide 72 text
It's important to tune
initcwnd
72 / 103
Slide 73
Slide 73 text
// Optimal initcwnd formula
(MBps * RTT) / 1500 BytesPerPackage = optimal initcwnd
// Example for 6Mbps and 50ms RTT (considering that 1Mbps = 125Kbps):
6*125Kbps = 750Kbps
// Let's assume 50ms RTT
750 * 0.050= 37.5
37.5 / 1500 Bytes Per Package = 0,025
=> optimal initcwnd of 25 for a single connection as in HTTP2
73 / 103
Slide 74
Slide 74 text
Live Action Demo!
74 / 103
Slide 75
Slide 75 text
// Check current initcwnd settings on *nix
ip route show
// Change initcwnd setting for a network interface
// Make sure that the IP address matches
sudo ip route change default via 123.123.123.123 dev eth0 initcwnd 25
75 / 103
Slide 76
Slide 76 text
We now know about
Progressive JPEGs
The benefits of
HTTP2
& its optimized delivery of
Scan Layers
76 / 103
Slide 77
Slide 77 text
This is
Old News!
77 / 103
Slide 78
Slide 78 text
John Melor (Google, SPDY, 2012):
@15%: initial visuals
@35%: good visuals
thanks to John Melor for this fantastic research and thanks to Yoav Weiss & Andy Davies for publishing it in their slide decks! See https://yoavweiss.github.io/respimg-blinkon-presentation/#/71/2 78 / 103
Slide 79
Slide 79 text
Can We Go ...
Even Faster?
79 / 103
Slide 80
Slide 80 text
80 / 103
Slide 81
Slide 81 text
Live Action Demo!
81 / 103
Slide 82
Slide 82 text
82 / 103
Slide 83
Slide 83 text
83 / 103
Slide 84
Slide 84 text
1
84 / 103
Slide 85
Slide 85 text
2
85 / 103
Slide 86
Slide 86 text
3
86 / 103
Slide 87
Slide 87 text
4
87 / 103
Slide 88
Slide 88 text
5
88 / 103
Slide 89
Slide 89 text
Optimized Progressive JPEGs yield
6% Speed Index Gain
89 / 103
Slide 90
Slide 90 text
What about
Server Push?
90 / 103
Slide 91
Slide 91 text
Enter ShimmerCat
91 / 103
Slide 92
Slide 92 text
// Prioritize a progressive JPEG's metadata and scan levels
// with minimal 'calm' => maximum priority
// 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
92 / 103
// 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
92 / 103
Slide 93
Slide 93 text
Live Action Demo!
93 / 103
Slide 94
Slide 94 text
94 / 103
Slide 95
Slide 95 text
95 / 103
Slide 96
Slide 96 text
96 / 103
Slide 97
Slide 97 text
97 / 103
Slide 98
Slide 98 text
98 / 103
Slide 99
Slide 99 text
Progressive Images
+
HTTP2
=
Win
99 / 103
Slide 100
Slide 100 text
Scan Layer Manipulation
=
Better Speed Index
100 / 103
Slide 101
Slide 101 text
HTTP2 Server Push
+
Optimized Scan Layers
=
Awesomesauce
101 / 103
Slide 102
Slide 102 text
THANKS!
102 / 103
Slide 103
Slide 103 text
Tobias Baldauf
@tbaldauf
[email protected]
Rate this #VelocityConf session:
https://is.gd/velocity_h2_img_feedback
103 / 103