Client Side Optimization

3,158 views

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
3,158
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
69
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

×