More Related Content Similar to Real world experiences with HTTP/2 (Michael Gooding, Javier Garza from Akamai) (20) More from 💻 Javier Garza (7) Real world experiences with HTTP/2 (Michael Gooding, Javier Garza from Akamai)1. HTTP/2 (h2) in the
real world
Michael Gooding
@Michael_G_81
Javier Garza
@jjaviergarza
3. ©2016 AKAMAI | FASTER FORWARDTM
Conflict in Ukraine continued
Picture: AFP/Getty Images
4. ©2016 AKAMAI | FASTER FORWARDTM
Heavy snow in Istanbul causes airport closure
Picture: AFP/Getty Images
5. ©2016 AKAMAI | FASTER FORWARDTM
Relatives of missing flight MH370 passengers protest
in Malaysia
Picture: AFP/Getty Images
6. ©2016 AKAMAI | FASTER FORWARDTM
People in Finland celebrated Chinese New Year
Picture: EPA
7. ©2016 AKAMAI | FASTER FORWARDTM
In Holland a Tiger cub goes outside for the first time!
Picture: Europics
10. ©2016 AKAMAI | FASTER FORWARDTM
Michael Gooding: Performance Specialist
Javier Garza: Enterprise Architect (h2 evangelist)
1. H2 Performance
i. Measurement
ii. Rendering
iii. Small files
iv. Sprites
2. Summary
11. ©2016 AKAMAI | FASTER FORWARDTM
Performance
i. Measurement
ii. Rendering
iii. Small files
iv. Sprites
12. ©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
13. ©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 non-cellular connections
seconds
% users
h1 h2
14. ©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
seconds
% users
h1 h2
15. ©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.
Real latency vs Simulated latency, h1 vs h2,
Chrome vs Firefox
1. Test real cities with real latency
2. Test using synthetic latency from dulles
3. Using Chrome and Firefox agents (h2 on/off)
4. Tens of thousands of WPT tests
Using Webpagetest.org (WPT) to measure Latency
16. ©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.
Using WPT to measure (Real vs Simulated) Latency
Lessons learned:
• Can’t trust simulated latency
• Difference between real and simulated changes
by browser too
• Better stick with RUM testing (more work to
clean results)
17. ©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.
Using WPT to measure Packet Loss
Source: http://conferences.oreilly.com/velocity/devops-web-performance-ny/public/schedule/detail/51303 - https://goo.gl/MPndFs
h2 performance suffers with packet loss
0% packet loss 2% packet loss h1 h2
0% packet loss 2% packet loss
18. ©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.
Other research studies on packet loss
h2 helps with a lot of small objects TCP slow start impacts a single connection
when delivering more bytes
Source: https://www.akamai.com/us/en/multimedia/documents/technical-publication/http2-performance-in-cellular-networks.pdf > https://goo.gl/y0NYha
19. ©2016 AKAMAI | FASTER FORWARDTM
Performance
i. Measurement
ii. Rendering
iii. Small files
iv. Sprites
20. ©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
h1
h2
h1
h2
4 sec
21. ©2016 AKAMAI | FASTER FORWARDTM
What’s the problem?
Rendering with different prioritisation
22. ©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
23. ©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
24. ©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 example
h2
after
h2
before
Simple improvement by not making connection
25. ©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 example
h2
after
h2
before
26. ©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
27. ©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 jpeg example
h2
after
h2
before
28. ©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
<img onload="addImages();" src="tshirt12_thumb.jpg">
<script>
function addImages() {;
var img = document.createElement("img");
img.src = "tshirt2.jpg";
document.getElementById("imgholder").appendChild(img);
}
</script>
Different order and loaded with dependency
29. ©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
Large image fills bandwidth
30. ©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
prog
jpg
h2
before
js
priority
31. ©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 sec1 sec
Push
prog
jpg
32. ©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
33. ©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: Server push bad example
h2
push
h2
before
34. ©2016 AKAMAI | FASTER FORWARDTM
Rendering Summary
1. Keep critical content on same domain
2. If you need to shard to balance h1 use the same cert
3. Progressive jpgs can help rendering
4. Use JavaScript if you need to delay resources
5. Use server push where you can
35. ©2016 AKAMAI | FASTER FORWARDTM
Performance
i. Measurement
ii. Rendering
iii. Small files
iv. Sprites
36. ©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 – Small files: CSS
CSS bytes downloaded (gzip off)
H2 is smaller because of header compression
h1 h2
# of files
bytes
37. ©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 – Small files: CSS
h2 performance comparison h
# of files
time
38. ©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 – Small files: 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
39. ©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 – Small files: CSS
h2 performance comparison - Firefox h
# of files
time
h1 h2
H2 is slower in FF after ~100 files
Smaller number of files is faster to load for h1 and h2
40. ©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 – Small files: CSS
h2 performance comparison – Safari Mobile 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
41. ©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 – Small files: CSS
h2 performance comparison – Chrome Mobile h
# of files
time
h1 h2
H2 is faster, but struggles > 500 files
42. ©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 – Small files: CSS
Too many files causes problems in Chrome
???
43. ©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 – Small files example
Network not much different
h2
after
h2
before
44. ©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 – Small files example
h2
after
h2
before
Result in browser is big
45. ©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 – Small files: JS
h2 performance comparison h
# of files
time
46. ©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 – Small files: JS
What about rendering? h
h1 h2
47. ©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 – Small files: JS example
Network results pretty similar
h2
after
h2
before
48. ©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 – Small files: JS example
Faster rendering in browser
h2
after
h2
before
49. ©2016 AKAMAI | FASTER FORWARDTM
Small files Summary
1. h2 is more efficient in most browsers
2. NOT faster dealing with many files
3. Keep combining files, same as h1
4. 2 or 3 is ok, based on frequency of change
50. ©2016 AKAMAI | FASTER FORWARDTM
Performance
i. Measurement
ii. Rendering
iii. Small files
iv. Sprites
51. ©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
52. ©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 - Chrome h
# of files
time
h1 h2
Difference between h1 and h2 is almost non existent for images
Smaller number of files is faster to load for both protocols
53. ©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 - Firefox h
# of files
time
h1 h2
h2 is only slightly slower in FF
Smaller number of files is faster to load for h1 and h2
54. ©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 – Safari Mobile h
# of files
time
h1 h2
h2 just breaks >200 files
Smaller number of files is faster to load
55. ©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 – Safari Mobile h h2
Harder to debug on iPhone, could be:
1. Max streams
2. Memory
3. CPU
56. ©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 – Chrome Mobile h
# of files
time
h1 h2
h2 performance is mixed for Chrome Mobile
57. ©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
Visual experience of loading the page
h1 h2
58. ©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
59. ©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 example
60. ©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 example
h2
images
h2
sprite
Load difference much less with sprite
61. ©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 example
# of images used
Load time (ms)
#sprite19 {background:url('images/sprite.png') no-repeat -17px 0;}
#image19 {background:url('sprite/sprite19.png') no-repeat;}
0
70
140
sprite 1 5 10 20 30 40
code
img
used
62. ©2016 AKAMAI | FASTER FORWARDTM
Sprite Summary
1. Keep using sprites for performance, especially mobile
2. If you are only using a few images files are ok
3. Think about management cost
4. Think about frequency of change
5. Mobile decoding times can be slow and has issues with
large numbers of files
63. ©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)
64. ©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.
Shameless plug
https://goo.gl/3ZVNN8
65. ©2016 AKAMAI | FASTER FORWARDTM
1. Turn h2 on
2. Measure
3. Experiment
4. Share
What if we could save 1 second on every page this
woman views in a day? (50 page views/day)
66. ©2016 AKAMAI | FASTER FORWARDTM
1 sec/page x 50/day x 365 = 5 hours/year
5 sec/page = 25 hours/year