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
![Page 1: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/1.jpg)
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
![Page 2: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/2.jpg)
• Philip Tellis• @bluesmoon• [email protected]• SOASTA• boomerang
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 2
![Page 3: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/3.jpg)
Get the most benefit with the least effort
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 3
![Page 4: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/4.jpg)
0Beginning Web Performance
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 4
![Page 5: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/5.jpg)
Start with a really slow site
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 5
![Page 6: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/6.jpg)
0.1 Start Measuring
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 6
![Page 7: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/7.jpg)
Or use RUM for real user data (boomerang/mPulse)
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 7
![Page 8: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/8.jpg)
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
![Page 9: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/9.jpg)
You can pre-gzip
gzip_static in nginx
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 9
![Page 10: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/10.jpg)
0.3 ImageOptim
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 10
![Page 11: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/11.jpg)
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
![Page 12: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/12.jpg)
Yes, that was 10 million pies
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 12
![Page 13: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/13.jpg)
0 Congratulations
You’ve just been promoted
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 13
![Page 14: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/14.jpg)
1What the Experts Do
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 14
![Page 15: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/15.jpg)
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
![Page 16: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/16.jpg)
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
![Page 17: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/17.jpg)
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
![Page 18: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/18.jpg)
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
![Page 19: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/19.jpg)
1.1 Don’t waste it
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 19
![Page 20: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/20.jpg)
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
![Page 21: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/21.jpg)
1.3 Audit your CSS
Chrome WebDev tools
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 21
![Page 22: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/22.jpg)
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
![Page 23: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/23.jpg)
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
![Page 24: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/24.jpg)
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
![Page 25: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/25.jpg)
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
![Page 26: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/26.jpg)
1.6 Increase initcwnd
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 26
![Page 27: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/27.jpg)
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
![Page 28: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/28.jpg)
1.7 PageSpeed
mod_pagespeed and ngx_pagespeed
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 28
![Page 29: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/29.jpg)
Relax
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 29
![Page 30: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/30.jpg)
2You’ve reached crazyland
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 30
![Page 31: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/31.jpg)
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
![Page 32: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/32.jpg)
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
![Page 33: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/33.jpg)
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
![Page 34: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/34.jpg)
Bandwidth is different around the world
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 34
![Page 35: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/35.jpg)
As are people
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 35
![Page 36: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/36.jpg)
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
![Page 37: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/37.jpg)
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
![Page 38: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/38.jpg)
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
![Page 39: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/39.jpg)
2.2 Post-load
Fetch optional assets after onload
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 39
![Page 40: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/40.jpg)
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
![Page 41: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/41.jpg)
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
![Page 42: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/42.jpg)
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
![Page 43: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/43.jpg)
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
![Page 44: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/44.jpg)
Can you predict round-trip-time?
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 44
![Page 45: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/45.jpg)
Can you predict round-trip-time?
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 45
![Page 46: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/46.jpg)
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
![Page 47: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/47.jpg)
Thank You!Questions?
Paris-Web 2014 / 2014-10-17 FE Performance: Beginner to Expert to Crazy Person 47
![Page 48: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/48.jpg)
• 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
![Page 49: Frontend Performance: De débutant à Expert à Fou Furieux](https://reader034.vdocuments.mx/reader034/viewer/2022052523/55620788d8b42acd4e8b58e0/html5/thumbnails/49.jpg)
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