Frontend Performance: Expert to Crazy Person
-
Upload
philip-tellis -
Category
Technology
-
view
506 -
download
3
description
Transcript of Frontend Performance: Expert to Crazy Person
![Page 1: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/1.jpg)
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
![Page 2: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/2.jpg)
• Philip Tellis• @bluesmoon• [email protected]• SOASTA• boomerang
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 2
![Page 3: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/3.jpg)
0.1 Start Measuring
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 3
![Page 4: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/4.jpg)
Or use RUM for real user data (boomerang/mPulse)
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 4
![Page 5: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/5.jpg)
You already compress, minify and cacheaggressively, right?
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 5
![Page 6: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/6.jpg)
1.1 CDN
Serve your root domain through a CDN
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 6
![Page 7: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/7.jpg)
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
![Page 8: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/8.jpg)
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
![Page 9: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/9.jpg)
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
![Page 10: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/10.jpg)
1.1 Don’t waste it
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 10
![Page 11: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/11.jpg)
1.2 Split JavaScript
"critical": in the HEAD,"enhancements": loaded async
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 11
![Page 12: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/12.jpg)
1.3 Audit your CSS
Chrome WebDev tools
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 12
![Page 13: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/13.jpg)
Also checkout uncss for a command line option
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 13
![Page 14: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/14.jpg)
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
![Page 15: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/15.jpg)
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
![Page 16: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/16.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/
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 16
![Page 17: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/17.jpg)
1.6 Increase initcwnd
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 17
![Page 18: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/18.jpg)
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
![Page 19: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/19.jpg)
1.7 PageSpeed
mod_pagespeed and ngx_pagespeed
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 19
![Page 20: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/20.jpg)
Relax
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 20
![Page 21: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/21.jpg)
2You’ve reached crazyland
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 21
![Page 22: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/22.jpg)
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
![Page 23: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/23.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)
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 23
![Page 24: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/24.jpg)
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
![Page 25: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/25.jpg)
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
![Page 26: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/26.jpg)
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
![Page 27: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/27.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
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 27
![Page 28: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/28.jpg)
2.2 Post-load
Fetch optional assets after onload
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 28
![Page 29: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/29.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/
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 29
![Page 30: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/30.jpg)
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
![Page 31: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/31.jpg)
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
![Page 32: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/32.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/
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 32
![Page 33: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/33.jpg)
Can you predict round-trip-time?
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 33
![Page 34: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/34.jpg)
Can you predict round-trip-time?
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 34
![Page 35: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/35.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
• 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
![Page 36: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/36.jpg)
Thank You!Questions?
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 36
![Page 37: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/37.jpg)
• Philip Tellis• @bluesmoon• [email protected]• www.SOASTA.com• boomerang• LogNormal Blog
WebPerfDays New York / 2014-09-18 FE Performance: Expert to Crazy Person 37
![Page 38: Frontend Performance: Expert to Crazy Person](https://reader033.fdocuments.us/reader033/viewer/2022051513/5461dc67af7959ba618b4a08/html5/thumbnails/38.jpg)
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