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