frontend performance: beginner to expert to crazy person
DESCRIPTION
Boston Web Performance Meetup, April 22, 2014 The very first requirement of a great user experience is actually getting the bytes of that experience to the user before they they get fed up and leave. In this talk we'll start with the basics and get progressively insane. We'll go over several front-end performance best practices, a few anti-patterns, the reasoning behind the rules, and how they've changed over the years. We'll also look at some great tools to help you. Schedule: 6:30, pizza 7:15: talkTRANSCRIPT
• Philip Tellis• @bluesmoon• [email protected]• SOASTA• boomerang
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 1
FE Performance: Beginner to Expert to CrazyPerson
Philip Tellis / [email protected]
Boston WebPerf Meetup / 2014-04-22
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 2
Get the most benefit with the least effort
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 3
0Beginning Web Performance
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 4
Start with a really slow site
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 5
0.1 Start Measuring
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 6
Or use RUM for real user data (boomerang/mPulse)
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 7
0.2 enable gzip
http://slideshare.net/billwscott/improving-netflix-performance-experience
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 8
You can pre-gzip
gzip_static in nginx
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 9
0.3 ImageOptim
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 10
0.4 Cache
Cache-control: public, max-age=31415926
http://www.mnot.net/cache_docs/
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 11
Yes, that was 10 million pies
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 12
0 Congratulations
You’ve just been promoted
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 13
1What the Experts Do
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 14
1.1 CDN
Serve your root domain through a CDN
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 15
1.1 CDN
And make sure your CSS is on the same domain
http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 16
1.2 Split JavaScript
"critical": in the HEAD,"enhancements": loaded async
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 17
1.3 Audit your CSS
Chrome WebDev tools
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 18
1.4 Parallelise downloads
You can have higher bandwidth, you cannot have lower latency.
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 19
1.5 Flush Early and Often
Get bytes to the client ASAP to avoid TCP SlowStart, and speed up CSS
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 20
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/
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 21
1.6 Increase initcwnd
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 22
1.6b Also...
net.ipv4.tcp_slow_start_after_idle=0
http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 23
1.7 PageSpeed
mod_pagespeed and ngx_pagespeed
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 24
Relax
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 25
2You’ve reached crazyland
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 26
Sort in ascending order of signal latency
• Electrons through copper• Light through fibre• Pulsars• Station Wagons• Smoke Signals
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 27
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)
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 28
Study real user data
Look for potential places to parallelise, predict orcache
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 29
2.1 Pre-load
Pre-fetch assets required for the next page in aprocess flow
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 30
2.1b pre-render
<link rel="prerender" href="url">
<link rel="subresource" href="">
<link rel="dns-prefetch" href="">
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 31
2.2 Post-load
Fetch optional assets after onload
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 32
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/
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 33
2.4 Prepare for HTTP/2.0
Multiple assets on the same connection and TLS bydefault.
Breaks many of our rules.
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 34
2.5 Understand 3PoFs
Use blackhole.webpagetest.org
http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 35
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/
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 36
Can you predict round-trip-time?
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 37
Can you predict round-trip-time?
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 38
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/
• 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
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 39
Thank You!Questions?
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 40
• Philip Tellis• @bluesmoon• [email protected]• www.SOASTA.com• boomerang• LogNormal Blog
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 41
Image Credits
• Apple Piehttp://www.flickr.com/photos/24609729@N00/3353226142/
• Kittens in a PChttp://www.flickr.com/photos/43525343@N08/6417971383/
Boston WebPerf Meetup / 2014-04-22 FE Performance: Beginner to Expert to Crazy Person 42