Front End Optimization - foursquare

From the Refinery 29 meetup "Optimizing the front end"

Transcript

1. Front End Optimization Monday, January 30, 12
2. Mike Singleton Web Client Lead Engineer @msingleton Monday, January 30, 12
3. Our Stack Amazon EC2 / CentOS NGINX HAProxy MongoDB Hadoop Solr Scala Lift Soy jQuery Backbone LESS Monday, January 30, 12
4. Some Stats {15 million+ people worldwide 1.5 billion check-ins, millions each day > 1 million visitors per day Monday, January 30, 12
5. CDN Compression LESS Closure Compiler • • • Monday, January 30, 12
6. CDN Compression LESS Closure Compiler • • • Monday, January 30, 12
7. CDN Compression LESS Closure Compiler • • • CDNs Monday, January 30, 12
8. CDN Compression LESS Closure Compiler • • • Disclosure: We use Akamai to serve some of our assets. They’re nice! Monday, January 30, 12
9. CDN Compression LESS Closure Compiler • • • Amazon CloudFront • Use S3 as the origin server • Takes about 2 minutes to setup • Straightforward pricing Monday, January 30, 12
10. CDN Compression LESS Closure Compiler • • • BOOM! 5 minutes and a 30% speed improvement* on asset delivery * totally made up Monday, January 30, 12
11. CDN Compression LESS Closure Compiler • • • But, it doesn’t support compression Monday, January 30, 12
12. CDN Compression LESS Closure Compiler • • • Monday, January 30, 12
13. Compression CDN Compression LESS Closure Compiler • • • • Use gzip-encoding to compress CSS & JS • Averages 60-90% reduction in size* • mod_gzip on Apache, or whatever you’re using * less made up than the previous stat Monday, January 30, 12
14. Supporting CloudFront CDN Compression LESS Closure Compiler • • • 1. Upload two versions to S3. gzip and non-gzip Remember to set Content-Encoding on the gzip one 2. In your app, check the HTTP Accept-Encoding header and rewrite the asset urls to your gzip versions 3. Profit! Seriously, since your CloudFront costs will be cheaper Monday, January 30, 12
15. CDN Compression LESS Closure Compiler • • • Monday, January 30, 12
16. CDN Compression LESS Closure Compiler • • • CDN Compression LESS Closure Compiler • • • Extend CSS with variables, mixins, functions, nesting, and more... Monday, January 30, 12
17. CDN Compression LESS Closure Compiler • • • CDN Compression LESS Closure Compiler • • • Modular stylesheets Reduce requests and bundle styles Monday, January 30, 12
18. CDN Compression LESS Closure Compiler • • • CDN Compression LESS Closure Compiler • • • Monday, January 30, 12
19. CDN Compression LESS Closure Compiler • • • Commonly visited pages Infrequently visited pages Frequently Updated Rarely Updated Monday, January 30, 12
20. CDN Compression LESS Closure Compiler • • • Commonly visited pages Infrequently visited pages Frequently Updated Rarely Updated Bundle Monday, January 30, 12
21. CDN Compression LESS Closure Compiler • • • Commonly visited pages Infrequently visited pages Frequently Updated Rarely Updated Bundle Cache Invalidation Monday, January 30, 12
22. CDN Compression LESS Closure Compiler • • • Commonly visited pages Infrequently visited pages Frequently Updated Rarely Updated Monday, January 30, 12
23. CDN Compression LESS Closure Compiler • • • Monday, January 30, 12
24. CDN Compression LESS Closure Compiler • • • CDN Compression LESS Closure Compiler • • • Closure Compiler Reduced file size, error checking, magic Monday, January 30, 12
25. CDN Compression LESS Closure Compiler • • • More than just a minifier Monday, January 30, 12
26. CDN Compression LESS Closure Compiler • • • More than just a minifier http://closure-compiler.appspot.com/ Monday, January 30, 12
27. CDN Compression LESS Closure Compiler • • • Whitespace Simple Advanced Just comments and whitespace, same source Minifies, renames variables and functions. Requires you to define things you don’t want changed. Aggressive, rewrites code Monday, January 30, 12
28. CDN Compression LESS Closure Compiler • • • Monday, January 30, 12
29. CDN Compression LESS Closure Compiler • • • Types! JSC_TYPE_MISMATCH Monday, January 30, 12
30. CDN Compression LESS Closure Compiler • • • Annotations @constructor @private @return @this @typedef @protected @nosideeffects @interface @implements Monday, January 30, 12
31. CDN Compression LESS Closure Compiler • • • JSC_USELESS_CODE Monday, January 30, 12
32. CDN Compression LESS Closure Compiler • • • Monday, January 30, 12
33. CDN Compression LESS Closure Compiler • • • Amazon S3 CloudFront CDN Monday, January 30, 12
34. CDN Compression LESS Closure Compiler • • • Compile LESS Compile JS Amazon S3 CloudFront CDN Monday, January 30, 12
35. Did I miss something? Monday, January 30, 12
36. Did I miss something? foursquare.com/jobs Monday, January 30, 12
37. Thanks! mike@foursquare.com Monday, January 30, 12