frontend performance: expert to crazy person
DESCRIPTION
Talk at WebPerfDays NY 2014TRANSCRIPT
FE Performance: Expert to Crazy Person
Philip Tellis / [email protected]
WebPerfDays New York / 2014-09-18
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 1
• Philip Tellis• @bluesmoon• [email protected]• SOASTA• boomerang
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 2
0.1 Start Measuring
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 3
Or use RUM for real user data (boomerang/mPulse)
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 4
You already compress, minify and cacheaggressively, right?
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 5
1.1 CDN
Serve your root domain through a CDN
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 6
1.1 CDN
And make sure your CSS is on the same domain
http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 7
1.1 CDN
Google Chrome will open two TCP connections tothe primary host, one for the page, and the second
"just in case"
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 8
1.1 Google Chrome will open two TCP connections to theprimary host, one for the page, and the second "just in case"
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 9
1.1 Don’t waste it
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 10
1.2 Split JavaScript
"critical": in the HEAD,"enhancements": loaded async
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 11
1.3 Audit your CSS
Chrome WebDev tools
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 12
Also checkout uncss for a command line option
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 13
1.4 Parallelise downloads/use sprites
You can have higher bandwidth, you cannot have lower latency.
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 14
1.5 Flush Early and Often
Get bytes to the client ASAP to avoid TCP SlowStart, and speed up CSS
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 15
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/
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 16
1.6 Increase initcwnd
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 17
1.6b Also...
net.ipv4.tcp_slow_start_after_idle=0
http://www.lognormal.com/blog/2012/09/27/linux-tcpip-tuning/
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 18
1.7 PageSpeed
mod_pagespeed and ngx_pagespeed
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 19
Relax
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 20
2You’ve reached crazyland
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 21
Sort in ascending order of signal latency
• Electrons through copper• Light through fibre• Pulsars• Station Wagons• Smoke Signals
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 22
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)
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 23
Study real user data
Look for potential places to parallelise, predict orcache
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 24
2.1 Pre-load
Pre-fetch assets required for the next page in aprocess flow
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 25
2.1b pre-render
<link rel="prerender" href="url">
<link rel="subresource" href="">
<link rel="dns-prefetch" href="">
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 26
2.1c onVisibilityChange
And while you’re at it, don’t do expensive work if thepage is hidden
https://developer.mozilla.org/en-US/docs/Web/Guide/
User_experience/Using_the_Page_Visibility_API
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 27
2.2 Post-load
Fetch optional assets after onload
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 28
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/
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 29
2.4 Prepare for HTTP/2.0
Multiple assets on the same connection and TLS bydefault.
Breaks many of our rules.
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 30
2.5 Understand 3PoFs
Use blackhole.webpagetest.org
http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 31
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/
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 32
Can you predict round-trip-time?
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 33
Can you predict round-trip-time?
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 34
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
• Page Visibility API –https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 35
Thank You!Questions?
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 36
• Philip Tellis• @bluesmoon• [email protected]• www.SOASTA.com• boomerang• LogNormal Blog
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 37
Image Credits
• Apple Piehttp://www.flickr.com/photos/24609729@N00/3353226142/
• Kittens in a PChttp://www.flickr.com/photos/43525343@N08/6417971383/
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 38