Client Side Optimization
Upcoming SlideShare
Loading in...5
×
 

Client Side Optimization

on

  • 3,023 views

Client Side Optimization can give websites a snappier interface and by reducing bandwidth save money. Presentation given at RailsWayCon 2010

Client Side Optimization can give websites a snappier interface and by reducing bandwidth save money. Presentation given at RailsWayCon 2010

Statistics

Views

Total Views
3,023
Views on SlideShare
3,017
Embed Views
6

Actions

Likes
2
Downloads
62
Comments
2

1 Embed 6

http://www.slideshare.net 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • An interesting point of the internet is the ability to become and live your dreams. You can be who ever you wish leaving open also the avenue of creating false entities or projecting false information. Yes there is a lot of amazing facts, but i do notice the language is becoming a bit out of reach. Some are making words up to fit what they have an opinion on where I personally have researched many instances and have found nothing on the subjects at all. Just something I thought I would share. :)
    Are you sure you want to
    Your message goes here
    Processing…
  • this isn't working
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Client Side Optimization Client Side Optimization Presentation Transcript

    • Patrick Hüsler, huesler informatik Client Side Optimization Talked to several people, it is not entirely clear, what client side optimization actually ist Listened 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
    • YSlow Criteria • 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
    • Google “YSlow Rails” Copy Paste => 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
    • Focus • Make fewer HTTP requests • Parallel connections • Add Expires Headers • Compress components with gzip • Minify assets
    • All with a little help from Rails
    • AssetTagHelper
    • Combine javascript_include_tag :all, :cache => true stylesheet_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>
    • NGINX server {   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>
    • NGINX gzip 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 • patrick.huesler@googlemail.com • @phuesler • http://github.com/phuesler • http://www.huesler-informatik.ch/blog
    • Questions? ? ? ? ? ? ? ? ?
    • Thank You • patrick.huesler@googlemail.com • @phuesler • http://github.com/phuesler • http://www.huesler-informatik.ch/blog