frontend performance: de débutant à expert à fou furieux
DESCRIPTION
Frontend Performance Beginner to Expert to Crazy Person The very first requirement of a great user experience is actually getting the bytes of that experience to the user before they they get tired 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. La performance front-end de débutant, à expert, à fou furieux ! La toute première condition nécessaire à une bonne expérience utilisateur est de pouvoir obtenir les octets de cette expérience avant que l'utilisateur ne se lasse et parte. Nous débuterons cette conférence avec les bases pour progressivement devenir démentiel. Nous aborderons plusieurs des meilleurs pratiques de la performance front-end, quelques anti-patterns à éviter, le raisonnement derrière les règles, et comment ces dernières ont changé au fil des ans. Nous regarderons d'un peu plus près quelques très bon outils qui peuvent vous aider.TRANSCRIPT
FE Performance: Beginner to Expert to CrazyPerson
Philip Tellis / [email protected]
Paris-Web 2014 / 2014-10-17
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 1
• Philip Tellis• @bluesmoon• [email protected]• SOASTA• boomerang
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 2
Get the most benefit with the least effort
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 3
0Beginning Web Performance
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 4
Start with a really slow site
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 5
0.1 Start Measuring
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 6
Or use RUM for real user data (boomerang/mPulse)
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 7
0.2 enable gzip
http://slideshare.net/billwscott/improving-netflix-performance-experience
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 8
You can pre-gzip
gzip_static in nginx
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 9
0.3 ImageOptim
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 10
0.4 Cache
Cache-control: public, max-age=31415926
http://www.mnot.net/cache_docs/
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 11
Yes, that was 10 million pies
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 12
0 Congratulations
You’ve just been promoted
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 13
1What the Experts Do
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 14
1.1 CDN
Serve your root domain through a CDN
Paris-Web 2014 / 2014-10-17 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
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 16
1.1 CDN
Google Chrome will open two TCP connections tothe primary host, one for the page, and the second
"just in case"
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 17
1.1 Google Chrome will open two TCP connections to theprimary host, one for the page, and the second "just in case"
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 18
1.1 Don’t waste it
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 19
1.2 Split JavaScript
"critical": in the HEAD,"enhancements": loaded async
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 20
1.3 Audit your CSS
Chrome WebDev tools
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 21
Also checkout uncss for a command line option(also with a grunt version)
Paris-Web 2014 / 2014-10-17 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.
Paris-Web 2014 / 2014-10-17 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
Paris-Web 2014 / 2014-10-17 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/
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 25
1.6 Increase initcwnd
Paris-Web 2014 / 2014-10-17 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/
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 27
1.7 PageSpeed
mod_pagespeed and ngx_pagespeed
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 28
Relax
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 29
2You’ve reached crazyland
Paris-Web 2014 / 2014-10-17 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
Paris-Web 2014 / 2014-10-17 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)
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 32
Study real user data
Look for potential places to parallelise, predict orcache
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 33
Bandwidth is different around the world
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 34
As are people
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 35
2.1 Pre-load
Pre-fetch assets required for the next page in aprocess flow
Paris-Web 2014 / 2014-10-17 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="">
Paris-Web 2014 / 2014-10-17 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
https://developer.mozilla.org/en-US/docs/Web/Guide/
User_experience/Using_the_Page_Visibility_API
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 38
2.2 Post-load
Fetch optional assets after onload
Paris-Web 2014 / 2014-10-17 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/
Paris-Web 2014 / 2014-10-17 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.
Paris-Web 2014 / 2014-10-17 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
Paris-Web 2014 / 2014-10-17 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/
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 43
Can you predict round-trip-time?
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 44
Can you predict round-trip-time?
Paris-Web 2014 / 2014-10-17 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
• grunt-uncss – https://github.com/addyosmani/grunt-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
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 46
Thank You!Questions?
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 47
• Philip Tellis• @bluesmoon• [email protected]• www.SOASTA.com• boomerang• LogNormal Blog
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 48
Image Credits
• Apple Piehttp://www.flickr.com/photos/24609729@N00/3353226142/
• Kittens in a PChttp://www.flickr.com/photos/43525343@N08/6417971383/
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 49