Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)
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. 0Beginning 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
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. 1What 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
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. 2You’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
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