client side optimization

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

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

• 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

YSlow Criteria

Google “YSlow Rails”CopyPaste

=>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

• Make fewer HTTP requests

• Parallel connections

• Add Expires Headers

• Compress components with gzip

• Minify assets

Focus

All with a little help from Rails

AssetTagHelper

Combine

javascript_include_tag :all, :cache => truestylesheet_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>

NGINXserver {  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>

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

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