LDNWebPerf December 2016 - Michael Gooding

Transcript

1. ©2016 AKAMAI | FASTER FORWARDTM HTTP/2 in the real world Michael Gooding @Michael_G_81
2. ©2016 AKAMAI | FASTER FORWARDTM Performance i. Measurement ii. Rendering iii. Small files iv. Sprites
3. ©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
4. ©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
5. ©2016 AKAMAI | FASTER FORWARDTM Performance i. Measurement ii. Rendering iii. Small files iv. Sprites
6. ©2016 AKAMAI | FASTER FORWARDTM What’s the problem? Rendering with different prioritisation
7. ©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
8. ©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
9. ©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
10. ©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
11. ©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
12. ©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
13. ©2016 AKAMAI | FASTER FORWARDTM Performance i. Measurement ii. Rendering iii. Small files iv. Sprites
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. CSS h2 performance comparison h # of files time
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. 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
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. JavaScript h2 performance comparison h # of files time
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. JavaScript What about rendering? h h1 h2
18. ©2016 AKAMAI | FASTER FORWARDTM Performance i. Measurement ii. Rendering iii. Small files iv. Sprites
19. ©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
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 – Image Sprites Other considerations 1. Management complexity 2. Caching 3. Images used in sprite
21. ©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)
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. More information https://goo.gl/3ZVNN8
23. ©2016 AKAMAI | FASTER FORWARDTM Thank You! Michael Gooding @Michael_G_81