Upload
philip-tellis
View
8
Download
1
Embed Size (px)
DESCRIPTION
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 frontend 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.
Citation preview
• Philip Tellis• @bluesmoon• [email protected]• SOASTA• boomerang
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 1
FE Performance: Beginner to Expert to CrazyPerson
Philip Tellis / [email protected]
Confoo 2014 / 2014-02-27
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 2
Get the most benefit with the least effort
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 3
0Beginning Web Performance
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 4
Start with a really slow site
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 5
0.1 Start Measuring
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 6
Or use RUM for real user data (boomerang/mPulse)
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 7
0.2 enable gzip
http://slideshare.net/billwscott/improving-netflix-performance-experience
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 8
You can pre-gzip
gzip_static in nginx
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 9
0.3 ImageOptim
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 10
0.4 Cache
Cache-control: public, max-age=31415926
http://www.mnot.net/cache_docs/
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 11
Yes, that was 10 million pies
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 12
0 Congratulations
You’ve just been promoted
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 13
1What the Experts Do
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 14
1.1 CDN
Serve your root domain through a CDN
Confoo 2014 / 2014-02-27 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
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 16
1.2 Split JavaScript
"critical": in the HEAD,"enhancements": loaded async
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 17
1.3 Audit your CSS
Chrome WebDev tools
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 18
1.4 Parallelise downloads
You can have higher bandwidth, you cannot have lower latency.
Confoo 2014 / 2014-02-27 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
Confoo 2014 / 2014-02-27 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/
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 21
1.6 Increase initcwnd
Confoo 2014 / 2014-02-27 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/
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 23
1.7 PageSpeed
mod_pagespeed and ngx_pagespeed
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 24
Relax
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 25
2You’ve reached crazyland
Confoo 2014 / 2014-02-27 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
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 27
Study real user data
Look for potential places to parallelise, predict orcache
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 28
2.1 Pre-load
Pre-fetch assets required for the next page in aprocess flow
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 29
2.1b pre-render
<link rel="prerender" href="url">
https://developers.google.com/chrome/whitepapers/prerender
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 30
2.2 Post-load
Fetch optional assets after onload
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 31
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/
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 32
2.4 Prepare for HTTP/2.0
Multiple assets on the same connection and TLS bydefault.
Breaks many of our rules.
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 33
2.5 Understand 3PoFs
Use blackhole.webpagetest.org
http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 34
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/
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 35
Can you predict round-trip-time?
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 36
Can you predict round-trip-time?
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 37
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
• FE SPoF – http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 38
Thank You!Questions?
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 39
• Philip Tellis• @bluesmoon• [email protected]• www.SOASTA.com• boomerang• LogNormal Blog
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 40
Image Credits
• Apple Piehttp://www.flickr.com/photos/24609729@N00/3353226142/
• Kittens in a PChttp://www.flickr.com/photos/43525343@N08/6417971383/
Confoo 2014 / 2014-02-27 FE Performance: Beginner to Expert to Crazy Person 41