Speed Up Your Web Pages With Browser Caching

A fast loading web page is an important factor that heavily weighs into a user’s experience on your web site. And it’s not just your audience taking notice of how quickly a page loads into their browser, Google uses this metric as part of their PageRank algorithm. Web designers and developers who are creating web sites will want to take this into consideration, and usually do by optimizing image file sizes, using semantic HTML and CSS, and controlling the amount of content that appears on any given page to leverage browser caching. However, web designers and developers can decrease their page load times even more by forcing the browser to cache specific types of content via the Expires header. In fact, both Google and Yahoo recommend implementing browser caching by setting the Expires header.

An overview of browser caching using the Expires header

Most web servers, for example, Apache and Nginx, can be configured to include the Expires header in the response for content that doesn’t change very often. When the web browser sees the Expires header in a response, it will not make any future requests for that file until the time allotted has expired or until the browser is forced to request the file again (i.e. a force refresh or a page reload). This is beneficial for web pages containing static images, Javascript and CSS, files that do not change often. By enforcing the browser cache refresh with the Expires header, the browser will pull those static files from it’s cache instead of requesting them from your web server.

Without the Expires header, the web browser will send a request to the web server and receive a 304 status code (not modified) in the response header. At that point it will pull the requested file from it’s own cache. The problem with this approach is that the web browser still has to make the initial request for that file, which costs you an available connection on the web server. When you use the Expires header, the web browser does not make that initial request at all, and instead goes straight to it’s cache to retrieve the file. The web server does less work and the page loads faster. It’s a win-win.

How to implement the Expires header in Apache

Apache is the world’s most popular web server and is most likely what you are using to serve up your web site. Implementing the Expires header using Apache requires the module mod_expires. First, decide what type of content will be cached by the browser, then configure the Apache web server to instruct the browser via the Expires header.

For example, if you wanted to force the web browser to cache all CSS files for one month, add the following to your .htaccess file in the directory containing the CSS files:
ExpiresActive On
ExpiresByType text/css "access plus 1 month"

Note: this code can also be added to the server config, virtual host, or directory, however, these conventions are less accessible. Most web developers should have the ability to create and upload a .htaccess file.

How to implement the Expires header in NGINX

NGINX has already become the fourth most popular web server on the Internet, putting it well ahead of Lighttpd and just behind Microsoft IIS. It’s a very fast web server with plenty of plugins available from the NGINX community. NGINX can also be configured to respond with the Expires header for certain types of content using the HTTPHeadersModule.

Using the same example of caching CSS files for one month, add the following to your nginx.conf file:
location ~* \.css$ {
expires 30d;
}

Note: NGINX also allows the Expires header to be set to “max” to instruct the browser to cache files indefinitely.

Fingerprinting: How to account for when static content changes

Now that we’ve shown how to instruct the web browser to cache static content, what do we do when that static content changes and we want the web browser to re-cache the content? Now that the browser is no longer communicating with the web server to retrieve the cached files, we need a way to tell the browser to request the changed file.

We have to enable dynamic caching by fingerprinting each file so that it has a unique filename. Fingerprinting allows us to set Expires headers for dates way out in the future while still enabling us serve up the new file when it is changed. For this to work, each cached file must have a unique filename. When the contents of the file change, so does the filename, thereby informing the web browser to make a new request to the web server.

To keep track of the unique filenames we maintain a file containing key/value pairs that map the original filename to the unique filename. For example, it maps screen.css to something like screen_b2f6811c5d2b993488d538368fe81c9d.css. We’ll explain more about how to do this below.

Examples of Fingerprinting static content in PHP

Assuming you are working in PHP, here is how you would implement a CSS fingerprinting mechanism. The goal is to create a unique filename for each file, a key/value map, and a way to link in the fingerprinted file.

1. Fingerprint each of the files
   To obtain a unique filename for each file, we use the md5_file() function. This function returns the md5 hash of a given file. Then we copy the original file to a new file using the returned md5 hash.
   <?
$dir = 'i/css/';
$filename = 'screen.css';
$ufilename = md5_file($dir . $filename);
copy($dir . $filename, $dir . $ufilename);
?>

2. Create a key/value array to map the filenames
   The next step is to create a PHP array that maps the original filename to the unique filename. This array can be stored in a PHP file that is generated by a script using the code form step 1. This file will also need to be included on any page using the static content, as we’ll see in step 3.
   <?
$ufilenames = array(
'screen.css' => 'screen_b2f6811c5d2b993488d538368fe81c9d.css'
);
?>

3. Reference the static content using the key/value array
   Finally, we add a snippet of PHP code to our web page that will link in the correct static file.
   <? include('css_map.php'); ?>
<link rel="stylesheet" href="<?= $ufilenames['screen.css'] ?>" type="text/css" />


That’s it!

Now you have the basic beginnings for configuring browser caching for your web site. Although we’ve used CSS fingerprinting in the examples, this methodology can be extended to any type of static file, including Javascript and images. Once implemented, you’ll notice your web site loading faster and faster as you click around. And Google will notice too, and reward your web site with a higher ranking in it’s search results.