when to tell your kids about client caching

When to tell your kids about presentation

caching

Matthew Deiterswww.theAgileDeveloper.com

http://www.theAgileDeveloper.com


A practical guide to stuffing your app’s bits

into someone else’s browser

Questions: @mdeiters

Rapid Feature Development

Rapid Feature Development

Adoption & Growth

Client Caching

client.is_a?(Browser) == true

Browsers &Leveraging HTTP 1.1

Fewer Requests

Smaller Responses

80/20 Rule(Pareto Principle)

80% of the wealth owned by 20% of people

80% of your time is with 20% of your acquaintances

80% of the time you wear 20% of your clothing

80% of a request is spent on the wire

Last-Modified Header

ETag Header

max-age Header

Expires Header

Reducing Network Traffic

GZip

Minification

Cookies

Today

To illustrate: Scalability

Applicable for?

Applicable for?

Enterprises

Applicable for?

Enterprises

High Traffic Web Sites

Applicable for?

Enterprises

High Traffic Web Sites

Startups

Enterprise

High Traffic Sites

Reduce network trafficReduce response timesReduce load

Facebook: Bumpersticker

1.4 Million Average Users

1.4 Million Average Users

Average 20 page views

“Push everything you possibly can to the client to reduce the amount of traffic going over the network...”

Startups

HTTP 1.1 Enity Tags

www.nextdaypets.com

http://www.nextdaypets.com


\puppies\43

HTTP/1.x 200 OKEtag: "8b2242293d5e5b02e99b3be73fc0c9fa"

www.nextdaypets.com



If-None-Match: "8b2242293d5e5b02e99b3be73fc0c9fa"

\puppies\43

HTTP/1.x 304 Not Modified

Last-Modified: Tue, 12 Dec 2006 03:03:59 GMTETag: "10c24bc-4ab-457e1c1f"

Last-Modified: Tue, 12 Dec 2006 03:03:59 GMTETag: "10c24bc-4ab-457e1c1f"

If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMTIf-None-Match: "10c24bc-4ab-457e1c1f"

+ Conditional Get

class PeopleController < ApplicationController def show @person = Person.find(params[:id])

respond_to do |wants| #... end end end

#response.rb

def last_modified=(utc_time)def etag=(etag)

#request.rb

def fresh?(response)def not_modified?(modified_at)def etag_matches?(etag)



response.last_modified = @person.updated_at.utc



response.last_modified = @person.updated_at.utc response.etag = @person



return head(:not_modified) if request.fresh?(response)

response.last_modified = @person.updated_at.utc response.etag = @person

response.etag = @person # => “5cb44721b6ce18857ff6900486dc4aba”

@person.cache_key # => "people/5-20071224150000"

def fresh_when(options)def stale?(options)


response.last_modified = @person.updated_at.utc response.etag = @person return head(:not_modified) if request.fresh?(response) respond_to do |wants| #... end end end


if stale?(:etag => @person, :last_modified => @person.updated_at.utc) respond_to do |wants| #... end end end end

Last-Modified vs ETag

response.etag = [@admin, @person, flash]

Later

def handle_conditional_get! if nonempty_ok_response? self.etag ||= body if request && request.etag_matches?(etag) self.status = '304 Not Modified' self.body = '' end end

set_conditional_cache_control! if etag? || last_modified?end

self.etag ||= body

SInce Feb 2007

http://localhost:3000/peopleGET /people HTTP/1.1

http://localhost:3000/people



HTTP/1.x 200 OK...Etag: "94785662c6f60cb96681ed1b09a44783"





http://localhost:3000/peopleGET /people HTTP/1.1If-None-Match: "94785662c6f60cb96681ed1b09a44783"







http://localhost:3000/peopleGET /people HTTP/1.1If-None-Match: "94785662c6f60cb96681ed1b09a44783"

HTTP/1.x 304 Not ModifiedEtag: "94785662c6f60cb96681ed1b09a44783"





send_file

Assets

/intl/en_ALL/images/logo.gif

ETag: "48b6a5bf-47f4-a0757"


ETag: "48b6a5bf-47f4-a0757"


ETag: "48b6a5bf-61a-21c86a4"

Avoid Cache Expiration & Validation

/stylesheets/screen.css?1219926880

CACHE BUSTER!

<FilesMatch "\.(pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "public" ExpiresActive On ExpiresDefault “access plus 10 years” FileETag None Header unset Last-Modified Header unset ETag</FilesMatch>

Now

/images/beach.png?1241477547 /images/beach.png?1241477554

Server 1 Server 2

Option 1

#config/environments/production.rb

#SubversionENV['RAILS_ASSET_ID'] = YAML::load(`svn info $RAILS_ROOT`)["Revision"].to_i

#GIT (Check out Grit too)ENV['RAILS_ASSET_ID'] = File.read(RAILS_ROOT + '/.git/refs/heads/deploy').chomp

Option 2

task :finalize_update, :except => { :no_release => true } do stamp = Time.now.utc.strftime("%Y%m%d%H%M.%S") asset_paths = %w(images stylesheets javascripts).map do |asset| "#{latest_release}/public/#{p}" end.join(" ") run "find #{asset_paths} -exec touch -t #{stamp} {} ';'; true", :env => { "TZ" => "UTC" }end

Option 2

#Capistrano 2.4set :normalize_asset_timestamps, true

Option 3

use-commit-times

Option 3

Now

ActionView::Helpers::AssetTagHelper.cache_asset_timestamps = true

Proxies & Via Header

/stylesheets/screen.css?1219926880

/stylesheets/screen.1219926880.css

Bag of Tricks

#asset_tag_helper.rbdef rewrite_asset_path(source) #... source + "?#{asset_id}" end

#Rules for Versioned Static FilesRewriteRule ^(scripts|css|images)/(.+)\.(.+)\.(js|css|jpg|gif|png)$ $1/$2.$4 [L]

DUMB-ASSES

:method => :post

Superfluous values in URL

HTTP Headers

headers['Last-Modified'] = Time.now.httpdateheaders['Expires'] = '-1'headers['Pragma'] = 'no-cache'headers['Cache-Control'] = 'no-cache, must-revalidate, max-age=0, pre-check=0, post-check=0'

#http://github.com/dancroak/no_cacheno_cache :first_name_autocomplete, :index

Now

http://github.com/dancroak/no_cache

http://github.com/dancroak/no_cache

Cache Ajax?

Speed up rendering

default 2 connections per host for HTTP 1.1

connections

ActionController::Base.asset_host = "http://mt%d.google.com"

http://assets

http://assets

ActionController::Base.asset_host = "http://mt%d.google.com"

http://mt0.google.com




http://assets

http://assets









http://mt0.google.com http://mt1.google.com http://mt2.google.com http://mt3.google.com

CNAME Now









greater than 40% drop in page load time

host_names >= 2 && host_names <= 4

# http://github.com/dhh/asset-hosting-with-minimum-ssl

config.action_controller.asset_host = AssetHostingWithMinimumSsl.new( # will serve non-SSL assetts on http://assets[1-4].example.com "http://assets%d.example.com", # will serve SSL assets on https://assets1.example.com "https://assets1.example.com" )

Now

http://github.com/dhh/asset-hosting-with-minimum-ssl

http://github.com/dhh/asset-hosting-with-minimum-ssl

http://assets

http://assets

http://assets

http://assets

https://assets1.example.com




Less requests are better

ActionController::Base.perform_caching = true

Combine Assets

<%= javascript_include_tag 'application', 'user' %>

<script src="/javascripts/application.js?1219633350" type="text/javascript"></script><script src="/javascripts/user.js?1219633368" type="text/javascript"></script>

<%= javascript_include_tag 'application', 'user', :cache => :true %>

<script src="/javascripts/all.js?1219633651" type="text/javascript"></script>

<%= javascript_include_tag 'application', 'user', :cache=>‘login’ %>

<script src="/javascripts/login.js?1219633651" type="text/javascript"></script>

application.js user.js

+login.js

Compiles on Server

Dedicated Asset Server / CDN

Not all servers may have login.js

Timestamp Conflict

<script src="/javascripts/all.js?1219633651" type="text/javascript"></script> <script src="/javascripts/all.js?1219634734" type="text/javascript"></script>

asset_packager || cramjam || CSSJSC

Minify

JSMIN || PackR

CSMINSmurfrucksack

minified_cache

YUI Compressor

http://compressorrater.thruhere.net/

Now

http://compressorrater.thruhere.net


bundle_fu

<% bundle do %>

<%= javascript_include_tag "prototype" %> <%= stylesheet_link_tag "basic.css" %> <%= calendar_date_select_includes "red" %> <script src="javascripts/application.js" type="text/javascript"></script>

<% end %>

<script src="/javascripts/cache/bundle.js?1220211999" type="text/javascript"></script>

Generates files locally during development

www.example.org dynamic contentstatic.example.org components (cookies don’t go here)

http://www.example.org


www.example.org dynamic contentstatic.example.org components (cookies don’t go here)

Now



CDN & Asset Servers

Let Google be your CDN

Google Ajax Libraries

jQuery

prototype

script.aculo.us

MooTools

dojo

“Once we host a release of a given library, we are committed to hosting that release indefinitely”

Last-Modified: Fri, 30 May 2008 06:03:19 GMTExpires: Sun, 17 Jan 2038 19:14:07 GMTCache-Control: publicDate: Sat, 30 Aug 2008 20:10:26 GMT

Cache-Control: public

mod_deflate vs mod_gzip

mod_deflate vs mod_gzipBaked w/ ApacheEasier on CPU~35% Compresion

mod_deflate vs mod_gzipBaked w/ ApacheEasier on CPU~35% Compresion

~29% Compresion

config.middleware.use Rack::Deflater

GZip + Minification + Minimum Components

Fewer Requests

Smaller Responses

There is more potential for improvement by focusing on the front-end.

Cutting it in half reduces response times by 40% or more, whereas cutting back-end performance in half results in less than a 10% reduction.

Front-end improvements typically require less time and resources than back-end projects (redesigning application architecture and code, finding

and optimizing critical code paths, adding or modifying hardware, distributing databases, etc.).

yslowLiveHTTPHeaders

Fiddlerhttp://compressorrater.thruhere.net/



Matthew Deiterswww.theAgileDeveloper.com



when to tell your kids about client caching

Documents