Slide 1
Slide 1 text
©2016 AKAMAI | FASTER FORWARDTM
HTTP/2 in
the real world
Michael Gooding
@Michael_G_81
Slide 2
Slide 2 text
©2016 AKAMAI | FASTER FORWARDTM
Performance
i. Measurement
ii. Rendering
iii. Small files
iv. Sprites
Slide 3
Slide 3 text
©2016 AKAMAI | FASTER FORWARDTM
Akamai Real User Monitoring (RUM)
1. Billions beacons collected per day
2. Some sites see good improvements
3. Some sites don’t!
4. 3rd Party content waters down benefit
5. A/B testing
6. Browsers behave differently
7. Network conditions vary results
Slide 4
Slide 4 text
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Network variations for cellular connections
% users
h1 h2
seconds
% users
seconds
Wired connections Cellular connections
h1 h2
Slide 5
Slide 5 text
©2016 AKAMAI | FASTER FORWARDTM
Performance
i. Measurement
ii. Rendering
iii. Small files
iv. Sprites
Slide 6
Slide 6 text
©2016 AKAMAI | FASTER FORWARDTM
What’s the problem?
Rendering with different prioritisation
Slide 7
Slide 7 text
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Performance - Rendering: Sharding
h1
h2
1 Domain
All on same connection
2nd connection opened
/js
/css
www.website.com
/js
/css
www.website.com
dns connection ssl ttfb d/load
Slide 8
Slide 8 text
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Performance - Rendering: Sharding
cdn.website.com/js
cdn.website.com/css
www.website.com
cdn.website.com/js
cdn.website.com/css
www.website.com
h1
h2
2 Domains
h2
1 Certificate
2 Certificates
cdn.website.com/js
cdn.website.com/css
www.website.com
dns connection ssl ttfb d/load
Slide 9
Slide 9 text
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Performance – Rendering: Progressive jpegs
h2
normal jpeg
progressive
Normal jpegs just 60% loaded
Slide 10
Slide 10 text
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Performance – Rendering: DIY prioritisation
function addImages() {;
var img = document.createElement("img");
img.src = "tshirt2.jpg";
document.getElementById("imgholder").appendChild(img);
}
Different order and loaded with dependency
function addImages() {;
var img = document.createElement("img");
img.src = "tshirt2.jpg";
document.getElementById("imgholder").appendChild(img);
}
Different order and loaded with dependency
Slide 11
Slide 11 text
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Performance – Rendering example with Push
2 sec
1 sec
Push
prog
jpg
Slide 12
Slide 12 text
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Performance – Rendering example Server Push
h2
push
prog
jpg
Slide 13
Slide 13 text
©2016 AKAMAI | FASTER FORWARDTM
Performance
i. Measurement
ii. Rendering
iii. Small files
iv. Sprites
Slide 14
Slide 14 text
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
CSS
h2 performance comparison h
# of files
time
Slide 15
Slide 15 text
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
CSS
h2 performance comparison - Chrome h
# of files
time
h1 h2
H2 is faster, especially as you increase the number of files
Smaller number of files is faster to load
Slide 16
Slide 16 text
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
JavaScript
h2 performance comparison h
# of files
time
Slide 17
Slide 17 text
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
JavaScript
What about rendering? h
h1 h2
Slide 18
Slide 18 text
©2016 AKAMAI | FASTER FORWARDTM
Performance
i. Measurement
ii. Rendering
iii. Small files
iv. Sprites
Slide 19
Slide 19 text
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Performance – Image Sprites
h2 performance comparison h
# of files
time
mob-Safari X
Slide 20
Slide 20 text
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Performance – Image Sprites
Other considerations
1. Management complexity
2. Caching
3. Images used in sprite
Slide 21
Slide 21 text
©2016 AKAMAI | FASTER FORWARDTM
Most of the times h2 improves performance
Don’t give up if it doesn’t
Anti-patterns aren’t anti-patterns
1. Don’t shard critical content
2. Keep combining files
3. Keep using sprites (if you use enough images)
Everything is evolving FAST (servers, browsers, QUIC)
Slide 22
Slide 22 text
©2016 AKAMAI | FASTER FORWARDTM
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
More information
https://goo.gl/3ZVNN8
Slide 23
Slide 23 text
©2016 AKAMAI | FASTER FORWARDTM
Thank You!
Michael Gooding
@Michael_G_81