Skip to main content

Expires Http header: the magic number of YSlow

Posted by felipegaucho on August 8, 2007 at 2:29 PM EDT

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 browser cache. It is 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 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: 

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