Skip to main content

Expires Http header: the magic number of YSlow

Posted by felipegaucho on August 8, 2007 at 11:29 AM PDT

A good way to reduce the number of Http Connections required to
load a web page is to store images and other resources in the href='http://www.procata.com/cachetest/'>browser cache. It is href='http://yuiblog.com/blog/2007/01/04/performance-research-part-2/#comment-169606'>very
well presented in this other blog. The problem is to find a correct
configuration of the names and values used by different browsers to
optimize the cache usage. To help us to identify what is going on during
the communication between browsers and servers, we have a large set of
tools available on the internet. One of my recent discoveries and preferred
tool is YSlow.

yslow icon src='http://us.i1.yimg.com/us.yimg.com/i/rt/yslow/logo_32x32.png'
width='32' height='32' /> YSlow for Firebug

YSlow is an easy-for-use plugin that allows you to inspect any
web page just clicking a button. For me, it is a preliminary step in
any web site optimization - an indicator about the site pitfalls.

For example: applying YSlow in the blog page you are reading right
now, I got the results presented in the right box (website grades go
from 1 to 99 and items values are from A to F). I will not depict
every small detail about the java.net blog evaluation, I strongly
recommend you to download and use YSlow by yourself before trying to
understand that information. I suggest you to apply YSlow against
the popular sites like google.com or against
your current web project.

For those familiar to sites optimization, I would like to talk about a minor and interesting detail
about the expiration header - item #3.

 Performance Grade of this page: F (59)

  1. A 1. Make fewer HTTP requests
  2. F - Use a CDN
  3. F - Add an Expires header
  4. F - Gzip components
  5. B - Put CSS at the top
  6. A - Move scripts to the bottom
  7. A - Avoid CSS expressions
  8. n/a - Make JS and CSS external
  9. C - Reduce DNS lookups
  10. A - Minify JS
  11. A - Avoid redirects
  12. A - Remove duplicate scripts
  13. F - Configure ETags

How to setup Expires headers

Expires is a Http header that allows you to define
when a resource (image, css, ...) will need to be reloaded. It is a
String representation of a Date in the format EEE, dd MMM yyyy HH:mm:ss z. There is lots of Java code available on the internet to produce the Expires header, the most part is similar to the following code I used during my experiments:

 	public static void setCacheExpireDate(HttpServletResponse response,
			int seconds) {
		if (response != null) {
			Calendar cal = new GregorianCalendar();
			cal.roll(Calendar.SECOND, seconds);
			response.setHeader("Cache-Control", "PUBLIC, max-age=" + seconds + ", must-revalidate");
			response.setHeader("Expires", htmlExpiresDateFormat().format(cal.getTime()));
		}
	}

        public static DateFormat htmlExpiresDateFormat() {
            DateFormat httpDateFormat = new SimpleDateFormat("EEE, dd MMM yyyy HH:mm:ss z", Locale.US);
            httpDateFormat.setTimeZone(TimeZone.getTimeZone("GMT"));
            return httpDateFormat;
        }

With the code, the browser started receiving headers like these:

        <strong>Last-Modified:</strong>  Sun, 19 Sep 2004 22:06:49 GMT
        <strong>Cache-Control:</strong>  PUBLIC, max-age=57600, must-revalidate
        <strong>Expires:</strong>         Thu, 09 Aug 2007 05:22:55 GMT
        <strong>Content-Type:</strong>   image/gif
        <strong>Content-Length:</strong> 377
        <strong>Date:</strong>             Wed, 08 Aug 2007 13:22:55 GMT
        <strong>Server:</strong>           Apache-Coyote/1.1

It was supposed to be a simple configuration step of my website optimization, but - after trying different values for the headers, including Expires header, Cache-Control and Last-Modified - the YSlow was still saying the Expires header was not
present. I got confused and started to navigate on discussions lists and
blogs when I finally figured out the problem: YSlow uses the idea of
a far future.

A far future Expires header

Well, far future seems to be one of that relatives measures,
when for a butterfly it could be 23 hours and for a mountain it could
be one million years. So, I suppose the far notion should be
pre-defined some way. I didn't find and I confess didn't search too
much about the standard values adopted by YSlow, but from my desktop
experiences I found it: The YSlow magic number far future is

172801 seconds = 48 hours + 1 second

That's it, everything more than two days seems to be far enough to YSlow - a minor detail in this complex task of websites tunning. And it is not an official information, just an empirical observation. If you need more precise guidance about YSlow, the Chief Performance Yahoo!, Steve Souders, is launching a book entirely dedicated to website optimization - a promising publishing from a company that serves millions of users every day :)

A last and very important advise: don't take decisions based only on YSlow. It is just an indicator, a tool created for Yahoo site optimization that can give you a glimpse about the quality of your web site - a helpful tool that should evolve from now on to become part of the arsenal of tips and tricks for websites tunning.

Related Topics >>
Blog Links >>