FE Performance: Beginner to Expert to Crazy Person Philip Tellis / [email protected] 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
May 18, 2015
FE Performance: Beginner to Expert to CrazyPerson
Philip Tellis / [email protected]
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
• Philip Tellis• @bluesmoon• [email protected]• SOASTA• boomerang
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 2
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
Bandwidth
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 4
Patience
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 5
0Beginning Web Performance
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 6
Start with a really slow site
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 7
0.1 Start Measuring
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 8
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
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
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
0.3 ImageOptim
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 12
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
Yes, that was 10 million pies
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 14
0 Congratulations
You’ve just been promoted
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 15
1What the Experts Do
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 16
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
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
1.1 CDN
Google Chrome will open two TCP connections tothe 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
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
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
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
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
1.5 Flush Early and Often
Get bytes to the client ASAP to avoid TCP SlowStart, and speed up CSS
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 24
1.6 Increase initcwnd
Initial Congestion Window: Number of packets tosend 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
1.6 Increase initcwnd
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 26
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
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
Relax
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 29
2You’ve reached crazyland
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 30
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
Sort in ascending order of signal latency
1 Pulsars (light through vacuum)2 Smoke Signals (light through air)3 Electrons through copper / Light through fibre4 Station Wagons (possibly highest bandwidth)
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 32
Study real user data
Look for potential places to parallelise, predict orcache
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 33
2.1 Pre-load
Pre-fetch assets required for the next page in aprocess flow
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 34
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
2.1c onVisibilityChange
And while you’re at it, don’t do expensive work if thepage is hidden
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 36
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
2.3 Detect broken accept-encoding
Many Windows anti-viruses and firewalls disablegzip 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
2.4 Prepare for HTTP/2.0
Multiple assets on the same connection and TLS bydefault.
Breaks many of our rules.
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 39
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
2.6 Understand the IFrame Loader Technique
Take required but non-critical assets out of thecritical 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
Can you predict round-trip-time?
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 42
Can you predict round-trip-time?
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 43
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
Thank You!Questions?
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 45
• Philip Tellis• @bluesmoon• [email protected]• www.SOASTA.com• boomerang• LogNormal Blog
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 46
Image Credits
• Apple Piehttp://www.flickr.com/photos/24609729@N00/3353226142/
• Kittens in a PChttp://www.flickr.com/photos/43525343@N08/6417971383/
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 47