frontend performance: beginner to expert to crazy person (san diego web perf meetup)
DESCRIPTION
San Diego web performance meetup: http://www.meetup.com/Web-Performance-SanDiego/events/184559312/TRANSCRIPT
![Page 1: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/1.jpg)
FE Performance: Beginner to Expert to CrazyPerson
Philip Tellis / [email protected]
San Diego Web Performance Meetup / 2014-08-06
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 1
![Page 2: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/2.jpg)
• Philip Tellis• @bluesmoon• [email protected]• SOASTA• boomerang
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 2
![Page 3: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/3.jpg)
Get the most benefit with the least effort
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 3
![Page 4: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/4.jpg)
Bandwidth
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 4
![Page 5: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/5.jpg)
Patience
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 5
![Page 6: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/6.jpg)
0Beginning Web Performance
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 6
![Page 7: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/7.jpg)
Start with a really slow site
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 7
![Page 8: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/8.jpg)
0.1 Start Measuring
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 8
![Page 9: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/9.jpg)
Or use RUM for real user data (boomerang/mPulse)
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 9
![Page 10: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/10.jpg)
0.2 enable gzip
http://slideshare.net/billwscott/improving-netflix-performance-experience
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 10
![Page 11: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/11.jpg)
You can pre-gzip
gzip_static in nginx
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 11
![Page 12: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/12.jpg)
0.3 ImageOptim
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 12
![Page 13: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/13.jpg)
0.4 Cache
Cache-control: public, max-age=31415926
http://www.mnot.net/cache_docs/
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 13
![Page 14: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/14.jpg)
Yes, that was 10 million pies
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 14
![Page 15: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/15.jpg)
0 Congratulations
You’ve just been promoted
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 15
![Page 16: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/16.jpg)
1What the Experts Do
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 16
![Page 17: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/17.jpg)
1.1 CDN
Serve your root domain through a CDN
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 17
![Page 18: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/18.jpg)
1.1 CDN
And make sure your CSS is on the same domain
http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 18
![Page 19: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/19.jpg)
1.1 CDN
Google Chrome will open two TCP connections tothe primary host, one for the page, and the second
"just in case"
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 19
![Page 20: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/20.jpg)
1.2 Split JavaScript
"critical": in the HEAD,"enhancements": loaded async
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 20
![Page 21: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/21.jpg)
1.3 Audit your CSS
Chrome WebDev tools
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 21
![Page 22: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/22.jpg)
Also checkout uncss for a command line option
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 22
![Page 23: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/23.jpg)
1.4 Parallelise downloads/use sprites
You can have higher bandwidth, you cannot have lower latency.
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 23
![Page 24: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/24.jpg)
1.5 Flush Early and Often
Get bytes to the client ASAP to avoid TCP SlowStart, and speed up CSS
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 24
![Page 25: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/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/
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 25
![Page 26: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/26.jpg)
1.6 Increase initcwnd
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 26
![Page 27: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/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/
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 27
![Page 28: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/28.jpg)
1.7 PageSpeed
mod_pagespeed and ngx_pagespeed
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 28
![Page 29: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/29.jpg)
Relax
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 29
![Page 30: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/30.jpg)
2You’ve reached crazyland
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 30
![Page 31: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/31.jpg)
Sort in ascending order of signal latency
• Electrons through copper• Light through fibre• Pulsars• Station Wagons• Smoke Signals
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 31
![Page 32: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/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)
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 32
![Page 33: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/33.jpg)
Study real user data
Look for potential places to parallelise, predict orcache
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 33
![Page 34: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/34.jpg)
2.1 Pre-load
Pre-fetch assets required for the next page in aprocess flow
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 34
![Page 35: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/35.jpg)
2.1b pre-render
<link rel="prerender" href="url">
<link rel="subresource" href="">
<link rel="dns-prefetch" href="">
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 35
![Page 36: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/36.jpg)
2.1c onVisibilityChange
And while you’re at it, don’t do expensive work if thepage is hidden
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 36
![Page 37: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/37.jpg)
2.2 Post-load
Fetch optional assets after onload
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 37
![Page 38: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/38.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/
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 38
![Page 39: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/39.jpg)
2.4 Prepare for HTTP/2.0
Multiple assets on the same connection and TLS bydefault.
Breaks many of our rules.
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 39
![Page 40: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/40.jpg)
2.5 Understand 3PoFs
Use blackhole.webpagetest.org
http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 40
![Page 41: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/41.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/
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 41
![Page 42: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/42.jpg)
Can you predict round-trip-time?
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 42
![Page 43: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/43.jpg)
Can you predict round-trip-time?
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 43
![Page 44: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/44.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
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 44
![Page 45: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/45.jpg)
Thank You!Questions?
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 45
![Page 46: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/46.jpg)
• Philip Tellis• @bluesmoon• [email protected]• www.SOASTA.com• boomerang• LogNormal Blog
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 46
![Page 47: Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf meetup)](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5559ad90d8b42aa4288b517c/html5/thumbnails/47.jpg)
Image Credits
• Apple Piehttp://www.flickr.com/photos/24609729@N00/3353226142/
• Kittens in a PChttp://www.flickr.com/photos/43525343@N08/6417971383/
San Diego Web Performance Meetup / 2014-08-06 FE Performance: Beginner to Expert to Crazy Person 47