Client Side Optimization
1 like1,667 views
The document outlines client-side optimization techniques that improve website performance and user experience by minimizing HTTP requests, compressing components, and utilizing content delivery networks. It provides specific guidelines based on YSlow and Google Page Speed metrics, including caching strategies and asset minification. The author, Patrick Hüsler, emphasizes the importance of thoughtful optimization to enhance page load times and reduce server load.
![NGINX
server {
location ~* .(ico|css|js|gif|jp?g|png)(?[0-9]+)?$ {
expires max;
break;
}
}](https://image.slidesharecdn.com/presentation-100603123327-phpapp01/85/Client-Side-Optimization-41-320.jpg)
Client Side Optimization
- 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. define “Client Side Optimization”
- 3. Not about improving your customer
- 4. train him to perform better
- 5. and maybe add some cardio funk
- 6. So that you can turn this fellow into
- 7. Into this. Although, if someone knows how to do this legally, I’d love to hear that
- 8. Client == Browser Rails doesn’t scale
- 9. Performance == Page
- 10. page_load.should be_fast
- 12. Yahoo YSlow
- 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. 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. 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. YSlow Criteria • Use cookie-free domains • Avoid AlphaImageLoader filter • Do not scale images in HTML • Make favicon small and cacheable
- 18. Google “YSlow Rails” Copy Paste => Done!!!
- 21. Increased User Experience >
- 22. Less data to <
- 23. Less connections to open <
- 24. Faster page load
- 25. Snappier UI
- 27. $$$
- 28. Less Bandwidth <
- 29. Less Connections <
- 30. Less Server load ~<
- 31. ~= Save money
- 32. Focus
- 33. 80/20
- 34. Focus • Make fewer HTTP requests • Parallel connections • Add Expires Headers • Compress components with gzip • Minify assets
- 35. All with a little help from Rails
- 36. AssetTagHelper
- 37. Combine javascript_include_tag :all, :cache => true stylesheet_link_tag :all, :cache => true
- 38. Parallelize ActionController::Base.asset_host = Proc.new { |source| "http://assets#{rand(2) + 1}.example.com" }
- 40. Apache <FilesMatch ".(ico|gif|jpe?g|png|js|css)$"> ExpiresDefault "access plus 1 year" </FilesMatch>
- 41. NGINX server { location ~* .(ico|css|js|gif|jp?g|png)(?[0-9]+)?$ { expires max; break; } }
- 43. 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>
- 44. 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
- 45. 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;}
- 46. Minify Assets • http://github.com/thumblemonks/smurf • http://synthesis.sbecker.net/pages/ asset_packager
- 47. Resources • http://developer.yahoo.com/yslow/ • http://code.google.com/speed/page-speed/ • http://www.alistapart.com/articles/sprites
- 48. Thank You • patrick.huesler@googlemail.com • @phuesler • http://github.com/phuesler • http://www.huesler-informatik.ch/blog
- 49. Questions? ? ? ? ? ? ? ? ?
- 50. Thank You • patrick.huesler@googlemail.com • @phuesler • http://github.com/phuesler • http://www.huesler-informatik.ch/blog