Front end performance (RailsWayCon 2009 short talk)

Front End Performance Ralph von der Heyden Dienstag, 2. Juni 2009

/me Ruby on Rails developer Studied computer science and business administration Working at XING (http://xing.com) Dienstag, 2. Juni 2009

Front end performance matters... Why? Dienstag, 2. Juni 2009

For website operators Dienstag, 2. Juni 2009

For website operators Fast websites Dienstag, 2. Juni 2009

For website operators Happy customers Dienstag, 2. Juni 2009

For website operators More customers Dienstag, 2. Juni 2009

For website operators More money Dienstag, 2. Juni 2009

For web consultants Dienstag, 2. Juni 2009

For web consultants Easy to learn Dienstag, 2. Juni 2009

For web consultants Big effect Dienstag, 2. Juni 2009

For web consultants Extented portfolio Dienstag, 2. Juni 2009

For web consultants More consulting jobs Dienstag, 2. Juni 2009

Facts: The impact of user perceived performance Amazon: Sells 1% less stuff per 100ms more loading time Google: 20% less trafﬁc on the search page after increasing the load time by 500ms Dienstag, 2. Juni 2009

What is the front end? HTML Everything beyond generation = front end Dienstag, 2. Juni 2009

But I can tune the back end! Back end: 10% of loading time Front end: 90% of loading time Assume you could double the speed of either one Dienstag, 2. Juni 2009

But I can tune the back end! Back end: 10% of loading time 3s Front end: 90% of loading time 3s Assume you could double the speed of either one Dienstag, 2. Juni 2009

But I can tune the back end! Back end: 10% of loading time 3s 2.85s Front end: 90% of loading time 3s Assume you could double the speed of either one Dienstag, 2. Juni 2009

But I can tune the back end! Back end: 10% of loading time 3s 2.85s Front end: 90% of loading time 3s 1.65s Assume you could double the speed of either one Dienstag, 2. Juni 2009

How to do it? Fewer Requests Smaller Requests Speed up Requests Dienstag, 2. Juni 2009

Fewer Requests Dienstag, 2. Juni 2009

Fewer Requests: Join CSS and JavaScripts Dienstag, 2. Juni 2009

Fewer Requests: Join CSS and JavaScripts <%= stylesheet_link_tag ['layout',  'pagination'], :media => quot;screen,  projectionquot;, :cache => quot;stylequot; %> <%= javascript_include_tag(['prototype',  'application'], :cache => true) %> Only 1 GET request in production RailsWayCon Startpage: 5 JS ﬁles, 8 CSS ﬁles Dienstag, 2. Juni 2009

Fewer Requests: Join CSS and JavaScripts <%= stylesheet_link_tag ['layout',  'pagination'], :media => quot;screen,  projectionquot;, :cache => quot;stylequot; %> <%= javascript_include_tag(['prototype',  'application'], :cache => true) %> Only 1 GET request in production X RailsWayCon Startpage: X JS ﬁles, 8 CSS ﬁles 5 ⇓ ⇓ 2 1 Dienstag, 2. Juni 2009

Fewer Requests: Join CSS and JavaScripts e d ! <%= stylesheet_link_tag ['layout',  av 'pagination'], :media => quot;screen,  s s projectionquot;, :cache => quot;stylequot; %> e s t <%= javascript_include_tag(['prototype',  q u 'application'], :cache => true) %> e 0 r Only 1 GET request in production 1 X X RailsWayCon Startpage: 5 JS ﬁles, 8 CSS ﬁles ⇓ ⇓ 2 1 Dienstag, 2. Juni 2009

Fewer Requests: Sprite your images Background image Size Position RailsWayCon: more than 30 images < 5K Dienstag, 2. Juni 2009

Fewer Requests: Sprite your images Background image Size Position 1 Sprite RailsWayCon: more than ⎯⎯⎯⎯ < 5K 30 images Dienstag, 2. Juni 2009

Fewer Requests: Sprite your images Background image Size e d ! Position s av st s q u e re 3 0 1 Sprite RailsWayCon: more than ⎯⎯⎯⎯ < 5K 30 images Dienstag, 2. Juni 2009

Fewer Requests: Far future expires header Static ﬁles (usually) don‘t change Dienstag, 2. Juni 2009

Fewer Requests: Far future expires header Static ﬁles (usually) don‘t change C Dienstag, 2. Juni 2009

Fewer Requests: Far future expires header Static ﬁles (usually) don‘t change C S Dienstag, 2. Juni 2009

Fewer Requests: Far future expires header Static ﬁles (usually) don‘t change Gimme ﬁle C S Dienstag, 2. Juni 2009

Fewer Requests: Far future expires header Static files (usually) don‘t change Gimme file C S Here you go! file Dienstag, 2. Juni 2009

Fewer Requests: Far future expires header Static files (usually) don‘t change Gimme file C S first visit Here you go! file Dienstag, 2. Juni 2009

Fewer Requests: Far future expires header Static files (usually) don‘t change Gimme file C S first visit Here you go! file C S second visit file Dienstag, 2. Juni 2009

Fewer Requests: Far future expires header Static files (usually) don‘t change Gimme file C S first visit Here you go! file Gimme file, if fresher than mine C S second visit file Dienstag, 2. Juni 2009

Fewer Requests: Far future expires header Static files (usually) don‘t change Gimme file C S first visit Here you go! file Gimme file, if fresher than mine C S second visit 304 Not Modified file Dienstag, 2. Juni 2009

Fewer Requests: Far future expires header Conditional GETs are plugging up the queue Avoid Conditional GETs altogether Expires: Thu, 27 May 2010 20:00:00 GMT Cache-Control: max-age=31536000 <filesmatch quot;.(jpg|gif|png|css|js)$quot;> ExpiresActive on ExpiresDefault quot;access plus 1 yearquot; </filesmatch> Dienstag, 2. Juni 2009

Fewer Requests: Revving filenames Reflect change in the URL File.mtime(quot;my.jsquot;).to_i_to_s /javascripts/my.js?1242765640 Also: Be careful with CSS images Disable ETags for static files! Dienstag, 2. Juni 2009

Fewer Requests: Far future expires header Dienstag, 2. Juni 2009

Fewer Requests: Far future expires header e d ! v s) sa ew s vi st age e p u e q iv re cut 0 nse 7 co ~ r (fo Dienstag, 2. Juni 2009

Smaller Requests Dienstag, 2. Juni 2009

Smaller Requests: gzip Enable gzipping for all text ﬁles Apache: mod_deﬂate RailsWayCon: without gzip 169K, with gzip 54K Dienstag, 2. Juni 2009

Smaller Requests: gzip g s Enable gzipping for all text files a Apache: mod_deflate v in s % tfi le s RailsWayCon: without gzip 169K, with gzip 54K 6 8 x r te fo Dienstag, 2. Juni 2009

Smaller Requests: Minify your JS and CSS Strip comments, whitespace etc. Rails: asset_packager plugin RailsWayCon: 151K -> 108K Dienstag, 2. Juni 2009

Smaller Requests: Minify your JS and CSS g s in Strip comments, whitespace etc. sav Rails: asset_packager plugin S .5 % RailsWayCon: 151K -> 108K d J 28 a n C S S f o r Dienstag, 2. Juni 2009

Smaller Requests: Know your images PNG is usually smaller than GIF when optimized* Strip JPG meta data and thumbnails* Use smush.it (http://smush.it) to show optimization potential *Mac users: PNGpong, ImageOptim Dienstag, 2. Juni 2009

Smaller Requests: Know your images Total page weight: 331 KB Images: 286 KB Dienstag, 2. Juni 2009

Smaller Requests: Know your images g s av in % s g e .6 p Total page weight: 331 KB a 17 otal Images: 286 KB o r t f Dienstag, 2. Juni 2009

Speed up Requests Dienstag, 2. Juni 2009

Speed up requests: Domain sharding Most browsers load 2 ﬁles per host Multiple domains for static content (CNAMEs) Rails: Set 4 asset hosts 8 parallel downloads config.action_controller.asset_host  = quot;http://assets%d.example.comquot; Dienstag, 2. Juni 2009

Speed up requests: Domain sharding html image image image image image image image image image image time Dienstag, 2. Juni 2009

Speed up requests: Content Delivery Network Rails S ﬁles Edge C S USA Edge USA C S Euro Euro Edge C S Asia Asia Dienstag, 2. Juni 2009

Speed up requests: Content Delivery Network Rails S files Edge C S files USA Edge USA C S Euro Euro files Edge C S files Asia Asia Dienstag, 2. Juni 2009

Speed up requests: Content Delivery Network Rails S files HTML HT M Edge L C S files USA Edge USA C L S M HT Euro Euro files Edge C S files Asia Asia Dienstag, 2. Juni 2009

Speed up requests: Content Delivery Network Rails S files HTML HT M Edge L C files S files USA files Edge USA C L S M HT Euro Euro files Edge C files S files Asia Asia Dienstag, 2. Juni 2009

Weapon of choice Dienstag, 2. Juni 2009

Weapon of choice: Firebug and YSlow Performance Grade Shows your weak spots Hints how to improve Other performance related tools Dienstag, 2. Juni 2009

Weapon of choice: Firebug and YSlow Dienstag, 2. Juni 2009

Where to start? Dienstag, 2. Juni 2009

Where to start: Priorities Start with optimizations that... Avoid requests Make requests smaller Speed up requests the most! Trade off between ease of deployment and efﬁciency Dienstag, 2. Juni 2009

Where to start: Priorities Start with optimizations that... Avoid requests Joining, Sprites, Expires Header Make requests smaller Speed up requests the most! Trade off between ease of deployment and efﬁciency Dienstag, 2. Juni 2009

Where to start: Priorities Start with optimizations that... Avoid requests Joining, Sprites, Expires Header Make requests smaller gzip, image compression Speed up requests the most! Trade off between ease of deployment and efﬁciency Dienstag, 2. Juni 2009

Where to start: Priorities Start with optimizations that... Avoid requests Joining, Sprites, Expires Header Make requests smaller gzip, image compression Speed up requests domain sharding, cdn the most! Trade off between ease of deployment and efﬁciency Dienstag, 2. Juni 2009

SSL & Caching ETags Redirects Questions? gzipping HARD! Script loading Proxies Dienstag, 2. Juni 2009

Twitter @ralph http://rvdh.de Dienstag, 2. Juni 2009

Thank you for your kind attention! Dienstag, 2. Juni 2009

Fewer Requests: SSL and https SSL: Loading http assets from a https page: Warning! DHH suggests (Google for „37signals mixed content“): config.action_controller.asset_host = Proc.new do |source, request| non_ssl_host = quot;http://asset%d.example.comquot; ssl_host = quot;https://asset1.example.comquot; if request.ssl? case when source =~ /.js$/ ssl_host when request.headers[quot;USER_AGENTquot;] =~ /(Safari)/ non_ssl_host when request.headers[quot;USER_AGENTquot;] =~ /Firefox/ && source =~ /^/images/ non_ssl_host else ssl_host end else non_ssl_host end end Dienstag, 2. Juni 2009

Fewer Requests: Avoid redirects Redirect to asset: breaks caching Redirect to html: Delays loading of assets Always add Trailing-Slash to URLs Dienstag, 2. Juni 2009

http://blog.rvdh.de	34
http://www.slideshare.net	13
http://braintrust.io	10
http://rvdh.de	9
http://www.rvdh.de	3
http://localhost:4000	1

Front end performance (RailsWayCon 2009 short talk)

by Ralph von der Heyden

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 70

Statistics

Front end performance (RailsWayCon 2009 short talk) Presentation Transcript