frontend performance: beginner to expert to crazy person
DESCRIPTION
http://www.midwest.io/sessions/#monday-7aTRANSCRIPT
FE Performance: Beginner to Expert to CrazyPerson
Philip Tellis / [email protected]
Midwest.io / 2014-07-14
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 1
• Philip Tellis• @bluesmoon• [email protected]• SOASTA• boomerang
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 2
Get the most benefit with the least effort
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 3
Bandwidth
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 4
Bandwidth
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 5
Patience
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 6
0Beginning Web Performance
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 7
Start with a really slow site
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 8
0.1 Start Measuring
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 9
Or use RUM for real user data (old skool)
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 10
Or use RUM for real user data (boomerang/mPulse)
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 11
0.2 enable gzip
http://slideshare.net/billwscott/improving-netflix-performance-experience
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 12
You can pre-gzip
gzip_static in nginx
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 13
0.3 ImageOptim
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 14
0.4 Cache
Cache-control: public, max-age=31415926
http://www.mnot.net/cache_docs/
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 15
Yes, that was 10 million pies
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 16
0 Congratulations
You’ve just been promoted
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 17
1What the Experts Do
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 18
1.1 CDN
Serve your root domain through a CDN
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 19
1.1 CDN
And make sure your CSS is on the same domain
http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 20
1.1 CDN
Google Chrome will open two TCP connections tothe primary host, one for the page, and the second
"just in case"
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 21
1.2 Split JavaScript
"critical": in the HEAD,"enhancements": loaded async
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 22
1.3 Audit your CSS
Chrome WebDev tools
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 23
Also checkout uncss for a command line option
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 24
1.4 Parallelise downloads/use sprites
You can have higher bandwidth, you cannot have lower latency.
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 25
1.5 Flush Early and Often
Get bytes to the client ASAP to avoid TCP SlowStart, and speed up CSS
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 26
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/
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 27
1.6 Increase initcwnd
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 28
1.6b Also...
net.ipv4.tcp_slow_start_after_idle=0
http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 29
1.7 PageSpeed
mod_pagespeed and ngx_pagespeed
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 30
Relax
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 31
2You’ve reached crazyland
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 32
Sort in ascending order of signal latency
• Electrons through copper• Light through fibre• Pulsars• Station Wagons• Smoke Signals
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 33
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)
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 34
Study real user data
Look for potential places to parallelise, predict orcache
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 35
2.1 Pre-load
Pre-fetch assets required for the next page in aprocess flow
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 36
2.1b pre-render
<link rel="prerender" href="url">
<link rel="subresource" href="">
<link rel="dns-prefetch" href="">
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 37
2.1c onVisibilityChange
And while you’re at it, don’t do expensive work if thepage is hidden
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 38
2.2 Post-load
Fetch optional assets after onload
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 39
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/
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 40
2.4 Prepare for HTTP/2.0
Multiple assets on the same connection and TLS bydefault.
Breaks many of our rules.
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 41
2.5 Understand 3PoFs
Use blackhole.webpagetest.org
http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 42
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/
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 43
Can you predict round-trip-time?
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 44
Can you predict round-trip-time?
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 45
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
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 46
Thank You!Questions?
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 47
• Philip Tellis• @bluesmoon• [email protected]• www.SOASTA.com• boomerang• LogNormal Blog
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 48
Image Credits
• Jean-Antoine Nollethttp://en.wikipedia.org/wiki/Jean-Antoine_Nollet
• Apple Piehttp://www.flickr.com/photos/24609729@N00/3353226142/
• Kittens in a PChttp://www.flickr.com/photos/43525343@N08/6417971383/
Midwest.io / 2014-07-14 FE Performance: Beginner to Expert to Crazy Person 49