Patrick Hüsler, huesler informatik




   Client Side Optimization




Talked to several people, it is not entirely clear,...
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 wit...
YSlow Criteria
• Avoid CSS expressions
• Make JavaScript and CSS external
• Reduce DNS lookups
• Minify JavaScript and CSS...
YSlow Criteria
• Configure entity tags (ETags)
• Make AJAX cacheable
• Use GET for AJAX requests
• Reduce the number of DOM...
YSlow Criteria

• Use cookie-free domains
• Avoid AlphaImageLoader filter
• Do not scale images in HTML
• Make favicon smal...
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 ass...
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 te...
NGINX
gzip on;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_proxied any;
gzip_types text/plain text/html text/css
applic...
CSS Sprites
#panel1b a:hover {
  background: transparent url(test-3.jpg)
  0 -200px no-repeat;}
#panel2b a:hover {
  backg...
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/arti...
Thank You
•   patrick.huesler@googlemail.com

•   @phuesler

•   http://github.com/phuesler

•   http://www.huesler-inform...
Questions?
?   ? ? ?
  ?
?   ? ?
Thank You
•   patrick.huesler@googlemail.com

•   @phuesler

•   http://github.com/phuesler

•   http://www.huesler-inform...
Client Side Optimization
Upcoming SlideShare
Loading in...5
×

Client Side Optimization

2,767

Published on

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

Published in: Technology
2 Comments
2 Likes
Statistics
Notes
  • 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. :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • this isn't working
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,767
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
68
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

Client Side Optimization

  1. 1. 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
  2. 2. define “Client Side Optimization”
  3. 3. Not about improving your customer
  4. 4. train him to perform better
  5. 5. and maybe add some cardio funk
  6. 6. So that you can turn this fellow into
  7. 7. Into this. Although, if someone knows how to do this legally, I’d love to hear that
  8. 8. Client == Browser Rails doesn’t scale
  9. 9. Performance == Page
  10. 10. page_load.should be_fast
  11. 11. Measure and Analyze
  12. 12. Yahoo YSlow
  13. 13. Google Page Speed
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. YSlow Criteria • Use cookie-free domains • Avoid AlphaImageLoader filter • Do not scale images in HTML • Make favicon small and cacheable
  18. 18. Google “YSlow Rails” Copy Paste => Done!!!
  19. 19. Google Driven Development
  20. 20. Increased User Experience >
  21. 21. Less data to <
  22. 22. Less connections to open <
  23. 23. Faster page load
  24. 24. Snappier UI
  25. 25. ~= Better user experience
  26. 26. $$$
  27. 27. Less Bandwidth <
  28. 28. Less Connections <
  29. 29. Less Server load ~<
  30. 30. ~= Save money
  31. 31. Focus
  32. 32. 80/20
  33. 33. Focus • Make fewer HTTP requests • Parallel connections • Add Expires Headers • Compress components with gzip • Minify assets
  34. 34. All with a little help from Rails
  35. 35. AssetTagHelper
  36. 36. Combine javascript_include_tag :all, :cache => true stylesheet_link_tag :all, :cache => true
  37. 37. Parallelize ActionController::Base.asset_host = Proc.new { |source| "http://assets#{rand(2) + 1}.example.com" }
  38. 38. Add expires headers
  39. 39. Apache <FilesMatch ".(ico|gif|jpe?g|png|js|css)$"> ExpiresDefault "access plus 1 year" </FilesMatch>
  40. 40. NGINX server {   location ~* .(ico|css|js|gif|jp?g|png)(?[0-9]+)?$ {     expires max;     break;   } }
  41. 41. Compress contents
  42. 42. 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>
  43. 43. 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
  44. 44. 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;}
  45. 45. Minify Assets • http://github.com/thumblemonks/smurf • http://synthesis.sbecker.net/pages/ asset_packager
  46. 46. Resources • http://developer.yahoo.com/yslow/ • http://code.google.com/speed/page-speed/ • http://www.alistapart.com/articles/sprites
  47. 47. Thank You • patrick.huesler@googlemail.com • @phuesler • http://github.com/phuesler • http://www.huesler-informatik.ch/blog
  48. 48. Questions? ? ? ? ? ? ? ? ?
  49. 49. Thank You • patrick.huesler@googlemail.com • @phuesler • http://github.com/phuesler • http://www.huesler-informatik.ch/blog
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×