Tweet
Tweet

Slide 1

Slide 1 text

Front End Optimization Monday, January 30, 12

Slide 2

Slide 2 text

Mike Singleton Web Client Lead Engineer @msingleton Monday, January 30, 12

Slide 3

Slide 3 text

Our Stack Amazon EC2 / CentOS NGINX HAProxy MongoDB Hadoop Solr Scala Lift Soy jQuery Backbone LESS Monday, January 30, 12

Slide 4

Slide 4 text

Some Stats {15 million+ people worldwide 1.5 billion check-ins, millions each day > 1 million visitors per day Monday, January 30, 12

Slide 5

Slide 5 text

CDN Compression LESS Closure Compiler • • • Monday, January 30, 12

Slide 6

Slide 6 text

CDN Compression LESS Closure Compiler • • • Monday, January 30, 12

Slide 7

Slide 7 text

CDN Compression LESS Closure Compiler • • • CDNs Monday, January 30, 12

Slide 8

Slide 8 text

CDN Compression LESS Closure Compiler • • • Disclosure: We use Akamai to serve some of our assets. They’re nice! Monday, January 30, 12

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

CDN Compression LESS Closure Compiler • • • BOOM! 5 minutes and a 30% speed improvement* on asset delivery * totally made up Monday, January 30, 12

Slide 11

Slide 11 text

CDN Compression LESS Closure Compiler • • • But, it doesn’t support compression Monday, January 30, 12

Slide 12

Slide 12 text

CDN Compression LESS Closure Compiler • • • Monday, January 30, 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

CDN Compression LESS Closure Compiler • • • Monday, January 30, 12

Slide 16

Slide 16 text

CDN Compression LESS Closure Compiler • • • CDN Compression LESS Closure Compiler • • • Extend CSS with variables, mixins, functions, nesting, and more... Monday, January 30, 12

Slide 17

Slide 17 text

CDN Compression LESS Closure Compiler • • • CDN Compression LESS Closure Compiler • • • Modular stylesheets Reduce requests and bundle styles Monday, January 30, 12

Slide 18

Slide 18 text

CDN Compression LESS Closure Compiler • • • CDN Compression LESS Closure Compiler • • • Monday, January 30, 12

Slide 19

Slide 19 text

CDN Compression LESS Closure Compiler • • • Commonly visited pages Infrequently visited pages Frequently Updated Rarely Updated Monday, January 30, 12

Slide 20

Slide 20 text

CDN Compression LESS Closure Compiler • • • Commonly visited pages Infrequently visited pages Frequently Updated Rarely Updated Bundle Monday, January 30, 12

Slide 21

Slide 21 text

CDN Compression LESS Closure Compiler • • • Commonly visited pages Infrequently visited pages Frequently Updated Rarely Updated Bundle Cache Invalidation Monday, January 30, 12

Slide 22

Slide 22 text

CDN Compression LESS Closure Compiler • • • Commonly visited pages Infrequently visited pages Frequently Updated Rarely Updated Monday, January 30, 12

Slide 23

Slide 23 text

CDN Compression LESS Closure Compiler • • • Monday, January 30, 12

Slide 24

Slide 24 text

CDN Compression LESS Closure Compiler • • • CDN Compression LESS Closure Compiler • • • Closure Compiler Reduced file size, error checking, magic Monday, January 30, 12

Slide 25

Slide 25 text

CDN Compression LESS Closure Compiler • • • More than just a minifier Monday, January 30, 12

Slide 26

Slide 26 text

CDN Compression LESS Closure Compiler • • • More than just a minifier http://closure-compiler.appspot.com/ Monday, January 30, 12

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

CDN Compression LESS Closure Compiler • • • Monday, January 30, 12

Slide 29

Slide 29 text

CDN Compression LESS Closure Compiler • • • Types! JSC_TYPE_MISMATCH Monday, January 30, 12

Slide 30

Slide 30 text

CDN Compression LESS Closure Compiler • • • Annotations @constructor @private @return @this @typedef @protected @nosideeffects @interface @implements Monday, January 30, 12

Slide 31

Slide 31 text

CDN Compression LESS Closure Compiler • • • JSC_USELESS_CODE Monday, January 30, 12

Slide 32

Slide 32 text

CDN Compression LESS Closure Compiler • • • Monday, January 30, 12

Slide 33

Slide 33 text

CDN Compression LESS Closure Compiler • • • Amazon S3 CloudFront CDN Monday, January 30, 12

Slide 34

Slide 34 text

CDN Compression LESS Closure Compiler • • • Compile LESS Compile JS Amazon S3 CloudFront CDN Monday, January 30, 12

Slide 35

Slide 35 text

Did I miss something? Monday, January 30, 12

Slide 36

Slide 36 text

Did I miss something? foursquare.com/jobs Monday, January 30, 12

Slide 37

Slide 37 text

Thanks! [email protected] Monday, January 30, 12