Primed Cache

donderdag 4 maart 2010

14:51

Overview

For web sites, speed may be feature #1. Users hate waiting.
The problem however is that web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page.
At Yahoo they've measured that the number of page views with a primed cache is 75-85%. Therefore if a primed cache is used (A "primed cache" already contains all of the
components in the page.) a user simply does not have to wait. Therefore building up a primed cache for each and every user would be a #1feature .

Here’s a quick refresher on how a web browser gets a page from the server:

a. Browser: Yo! You got index.html?

b. Server: (Looking it up)
c. Server: Totally, dude! It’s right here!
d. Browser: That’s rad, I’m downloading it now and showing the user.

The next request for the same page would use the Last-Modified or ETag to check for each and every component whether or not a component is still valid.

a. Browser: Hey, give me logo.png, but only if it’s been modified since Mar 16, 2007.
b. Server: (Checking the modification date)
c. Server: Hey, you’re in luck! It was not modified since that date. You have the latest version.
d. Browser: Great! I’ll show the user the cached version.

As a result caching a file and checking with the server is nice, except for one thing: we are still checking with the server.
This is where the Expire header starts knocking on the door. If the expire header is used the cycle would become :

There isn’t a conversation here; the browser has a monologue.

a. Browser: Self, is it before the expiration date of Mar 20, 2007? (Assume it is).
b. Browser: Verily, I will show the user the cached version.

And that’s that. The web server didn’t have to do anything. The user sees the file instantly.

How to implement a primed cache

Caching is useful for scripts, styles, flash and images and uses the Apache module mod_expires.
The implementation of this module is a two step process :

○ Adjust conf/httpd.conf
#
# Add the following modules
LoadModule expires_module modules/mod_expires.so

○ Adjust /conf/extra/httpd-vhosts.conf
….
<VirtualHost *:80>
...
<Location />
...
ExpiresActive On
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType image/jpeg "access plus 1 seconds"
ExpiresByType image/png "access plus 2 years"
ExpiresByType text/css "access plus 2 years"

Fundamentals Pagina 1
 ExpiresByType text/css "access plus 2 years"
ExpiresByType text/javascript "access plus 2 years"
ExpiresByType application/x-javascript "access plus 2 years"
...
</Location>
</VirtualHost>

And note ExpiresByType controls the setting of both the Expires HTTP header and the max-age directive of the Cache-Control HTTP header in server responses
The actual value of ExpiresByType depends on the type of component required to be cache :
○ For static components; implement a "Never expire" policy by setting far future Expires header
○ For dynamic components; use an appropriate policy for setting the future Expires header
○ For truly dynamic components; implement a "Always expire" policy and force resources to not be cached by setting an age of zero seconds
As a result by designing your site with caching in mind, you can target different classes of resources to give them different expiration times with only a few lines of code

Verify solution
○ Use firebug to verify Expires and Cache-Control are present as part a response header or to verify HTTP 304 is returned or that no additional requests are executed

How to push a new version of a cached component

In case of design change you must prevent using outdated content that browsers have in their cache.
This can be done by embeding versions in filenames:

script.js -> script1.js -> script2.js -> ... etc

References
○ http://developer.yahoo.com/performance/rules.html#expires
○ http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
○ http://www.webreference.com/programming/web_optimization/2.html
○ http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/
○ http://www.websiteoptimization.com/speed/tweak/cache/
○ http://tomayko.com/writings/things-caches-do

Fundamentals Pagina 2