San Diego Web Perf Meetup

Transcript

1. FE Performance: Beginner to Expert to Crazy Person Philip Tellis / ptellis@soasta.com San Diego Web Performance Meetup / 2014-08-06 San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 1
2. • Philip Tellis • @bluesmoon • ptellis@soasta.com • SOASTA • boomerang San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 2
3. Get the most benefit with the least effort San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 3
4. Bandwidth San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 4
5. Patience San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 5
6. 0 Beginning Web Performance San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 6
7. Start with a really slow site San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 7
8. 0.1 Start Measuring San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 8
9. Or use RUM for real user data (boomerang/mPulse) San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 9
10. 0.2 enable gzip http://slideshare.net/billwscott/improving-netflix-performance-experience San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 10
11. You can pre-gzip gzip_static in nginx San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 11
12. 0.3 ImageOptim San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 12
13. 0.4 Cache Cache-control: public, max-age=31415926 http://www.mnot.net/cache_docs/ San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 13
14. Yes, that was 10 million pies San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 14
15. 0 Congratulations You’ve just been promoted San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 15
16. 1 What the Experts Do San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 16
17. 1.1 CDN Serve your root domain through a CDN San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 17
18. 1.1 CDN And make sure your CSS is on the same domain http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 18
19. 1.1 CDN Google Chrome will open two TCP connections to the primary host, one for the page, and the second "just in case" San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 19
20. 1.2 Split JavaScript "critical": in the HEAD, "enhancements": loaded async San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 20
21. 1.3 Audit your CSS Chrome WebDev tools San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 21
22. Also checkout uncss for a command line option San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 22
23. 1.4 Parallelise downloads/use sprites You can have higher bandwidth, you cannot have lower latency. San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 23
24. 1.5 Flush Early and Often Get bytes to the client ASAP to avoid TCP Slow Start, and speed up CSS San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 24
25. 1.6 Increase initcwnd Initial Congestion Window: Number of packets to send before waiting for an ACK http://www.cdnplanet.com/blog/tune-tcp-initcwnd-for-optimum- performance/ San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 25
26. 1.6 Increase initcwnd San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 26
27. 1.6b Also... net.ipv4.tcp_slow_start_after_idle=0 http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/ San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 27
28. 1.7 PageSpeed mod_pagespeed and ngx_pagespeed San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 28
29. Relax San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 29
30. 2 You’ve reached crazyland San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 30
31. Sort in ascending order of signal latency • Electrons through copper • Light through fibre • Pulsars • Station Wagons • Smoke Signals San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 31
32. Sort in ascending order of signal latency 1 Pulsars (light through vacuum) 2 Smoke Signals (light through air) 3 Electrons through copper / Light through fibre 4 Station Wagons (possibly highest bandwidth) San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 32
33. Study real user data Look for potential places to parallelise, predict or cache San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 33
34. 2.1 Pre-load Pre-fetch assets required for the next page in a process flow San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 34
35. 2.1b pre-render <link rel="prerender" href="url"> <link rel="subresource" href=""> <link rel="dns-prefetch" href=""> San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 35
36. 2.1c onVisibilityChange And while you’re at it, don’t do expensive work if the page is hidden San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 36
37. 2.2 Post-load Fetch optional assets after onload San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 37
38. 2.3 Detect broken accept-encoding Many Windows anti-viruses and firewalls disable gzip by munging the Accept-Encoding header http://www.lognormal.com/blog/2012/08/17/accept-encoding-stats/ San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 38
39. 2.4 Prepare for HTTP/2.0 Multiple assets on the same connection and TLS by default. Breaks many of our rules. San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 39
40. 2.5 Understand 3PoFs Use blackhole.webpagetest.org http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 40
41. 2.6 Understand the IFrame Loader Technique Take required but non-critical assets out of the critical path http://www.lognormal.com/blog/2012/12/12/the-script-loader-pattern/ San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 41
42. Can you predict round-trip-time? San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 42
43. Can you predict round-trip-time? San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 43
44. References • WebPageTest – http://webpagetest.org • Boomerang – http://lognormal.github.io/boomerang/doc/ • SOASTA mPulse – http://www.soasta.com/free • Netflix gzip study – http://www.slideshare.net/billwscott/improving-netflix-performance-experience • Nginx gzip_static – http://wiki.nginx.org/HttpGzipStaticModule • ImageOptim – http://imageoptim.com/ • uncss – https://github.com/giakki/uncss • Caching – http://www.mnot.net/cache_docs/ • Same domain CSS – http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html • initcwnd – http://www.cdnplanet.com/blog/tune-tcp-initcwnd-for-optimum-performance/ • Linux TCP Tuning – http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/ • Prerender – https://developers.google.com/chrome/whitepapers/prerender • DNS prefetching – https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching • Subresource – http://www.chromium.org/spdy/link-headers-and-server-hint/link-rel-subresource • FE SPoF – http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 44
45. Thank You! Questions? San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 45
46. • Philip Tellis • @bluesmoon • philip@bluesmoon.info • www.SOASTA.com • boomerang • LogNormal Blog San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 46
47. Image Credits • Apple Pie http://www.flickr.com/photos/24609729@N00/3353226142/ • Kittens in a PC http://www.flickr.com/photos/43525343@N08/6417971383/ San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 47