client side optimization
DESCRIPTION
Client Side Optimization can give websites a snappier interface and by reducing bandwidth save money. Presentation given at RailsWayCon 2010TRANSCRIPT
Patrick Hüsler, huesler informatik
Client Side Optimization
Talked to several people, it is not entirely clear, what client side optimization actually istListened to a marketing talk, people use one term and mean something completely different
define “Client Side Optimization”
Not about improving your customer
train him to perform better
and maybe add some cardio funk
So that you can turn this fellow into
Into this.Although, if someone knows how to do this legally,I’d love to hear that
Client == Browser
Rails doesn’t scale
Performance==
Page
page_load.should be_fast
Measure and Analyze
Yahoo YSlow
Google Page
Speed
• Make fewer HTTP requests
• Use a Content Delivery Network
• Add Expires Headers
• Compress components with gzip
• Put CSS at top
• Put JavaScript at bottom
YSlow Criteria
• Avoid CSS expressions
• Make JavaScript and CSS external
• Reduce DNS lookups
• Minify JavaScript and CSS
• Avoid URL redirects
• Remove duplicate JavaScript and CSS
YSlow Criteria
• Configure entity tags (ETags)
• Make AJAX cacheable
• Use GET for AJAX requests
• Reduce the number of DOM elements
• Avoid HTTP 404 (Not found) error
• Reduce cookie size
YSlow Criteria
• Use cookie-free domains
• Avoid AlphaImageLoader filter
• Do not scale images in HTML
• Make favicon small and cacheable
YSlow Criteria
Google “YSlow Rails”CopyPaste
=>Done!!!
Google Driven Development
Increased User Experience
>
Less data to
<
Less connections to open
<
Faster page load
Snappier UI
~=Better user experience
$$$
Less Bandwidth
<
Less Connections
<
Less Server load
~<
~=
Save money
Focus
80/20
• Make fewer HTTP requests
• Parallel connections
• Add Expires Headers
• Compress components with gzip
• Minify assets
Focus
All with a little help from Rails
AssetTagHelper
Combine
javascript_include_tag :all, :cache => truestylesheet_link_tag :all, :cache => true
Parallelize ActionController::Base.asset_host = Proc.new { |source| "http://assets#{rand(2) + 1}.example.com" }
Add expires headers
Apache <FilesMatch "\.(ico|gif|jpe?g|png|js|css)$"> ExpiresDefault "access plus 1 year" </FilesMatch>
NGINXserver { location ~* \.(ico|css|js|gif|jp?g|png)(\?[0-9]+)?$ { expires max; break; }}
Compress contents
Apache<directory "/Users/joe/work/cootweet/public">Options -Indexes AddOutputFilterbyType DEFLATE text/plain text/html text/css application/javascript text/xml application/xml application/xml+rss text/javascript</directory>
NGINXgzip on;gzip_http_version 1.0;gzip_comp_level 2;gzip_proxied any;gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript
CSS Sprites #panel1b a:hover { background: transparent url(test-3.jpg) 0 -200px no-repeat;} #panel2b a:hover { background: transparent url(test-3.jpg) -96px -200px no-repeat;} #panel3b a:hover { background: transparent url(test-3.jpg) -172px -200px no-repeat;} #panel4b a:hover { background: transparent url(test-3.jpg) -283px -200px no-repeat;}
Minify Assets
• http://github.com/thumblemonks/smurf
• http://synthesis.sbecker.net/pages/asset_packager
Resources
• http://developer.yahoo.com/yslow/
• http://code.google.com/speed/page-speed/
• http://www.alistapart.com/articles/sprites
Thank You
• @phuesler
• http://github.com/phuesler
• http://www.huesler-informatik.ch/blog
??? ??
Questions?
? ??
Thank You
• @phuesler
• http://github.com/phuesler
• http://www.huesler-informatik.ch/blog