Add Expires Headers For A Considerably Faster Site

Add Expires Headers For A Considerably Faster Site

Web pages are almost always a combination of files, including the initial HTML, Cascading Style Sheet (CSS) files, JavaScript files and images. As of March 2014, the average number of requests per page is 93 summing 1700 KB, according to the HTTP Archive. When your browser requests to see a web page, if it doesn’t have any of the page objects in cache, it must make 93 separate requests and download 1700 KB of data, on average, to display.

Cache web page

When your site visitors visit your site, their browser may cache many of the page objects, so that subsequent requests for the same objects will be instant. To cache web page, you need to add expires headers.

Speeding Up Your Website

To have a caching website, first you need to know what objects are on your page and then you can tell your web server to add expires headers. Read on to see how easy speeding up your website can be.

If you go to http://www.webpagetest.org/ and open the Advanced Options, you’ll notice a default option of “First View and Repeat View”. Repeat view is what visitors will experience on subsequent visits to your site.

wpt-first-vs-repeat

One thing to note, however, is the repeat page may be deceiving. Browsers will often cache static objects in the current session, even in the absence of expires headers. This is good for subsequent page views in the same browser session, but won’t persist a browser close/open. Look for the “Cache Static Content” button at the top right to see what grade your site received and click it.

wpt-grades

You’ll see a listing of objects missing expires headers, or with short lived expires headers, like this:

Add Expires Headers For A Considerably Faster Site

How to edit .htaccess to add expires headers

In the example above, there are a number of font files that end in “woff” missing expires headers. To add expires headers to this type of file, you need to know the content type of woff files. To determine this, go to the webpagetest Details page to see the Waterfall View. Click on [one of] the file[s] to bring up the request/response details. Click on the Response link. Take note of the Content-Type.

wpt-content-type

Now, edit your .htaccess file and add the following. Notice the “application/x-font-woff”, relevant to this example. The other content types are just a good idea.

<IfModule mod_expires.c>
    # Activate mod_expires for this directory
    ExpiresActive on
    # locally cache common image types for 365 days
    ExpiresByType image/jpg "access plus 365 days"
    ExpiresByType image/jpeg "access plus 365 days"
    ExpiresByType image/gif "access plus 365 days"
    ExpiresByType image/png "access plus 365 days"
    # cache CSS files for 365 days
    ExpiresByType text/css "access plus 365 days"
    # cache JS files for 365 days
    ExpiresByType application/javascript "access plus 365 days"
    # cache WOFF font files for 365 days
    ExpiresByType application/x-font-woff "access plus 365 days"
</IfModule>

Rerun webpagetest. Did your “cache static content” grade improve?

wpt-grades2

wpt-cache-static2

In this example, I eliminated the FAILED and WARNING on the woff, css and js files. The remaining tracking pixels I’ll ignore, because they are served outside of my control and need not be cached; a trade off for tracking information.

Lastly, a warning about adding expires headers to your static content. If you change a file, your repeat site visitors won’t get the new file. Combat this problem by not changing files. If you need to update an image, for example, upload a new image with a new filename. Then change your HTML source to use the new filename. This point is hard for people to understand and why most hosting providers don’t enable mod_expires by default. If you can handle this caveat, you’ll enjoy a major performance enhancement on your site.

Written By at .

One thought on “Add Expires Headers For A Considerably Faster Site

  1. With Windows IIS7, including GoDaddy Plesk, you can instruct IIS to cache static files (up to IIS to determine what’s static), by adding a web.config file to the document root, like this.

    web.config

    <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
        <system.webServer>
            <staticContent>
                <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
            </staticContent>
        </system.webServer>
    </configuration>
    

Leave a Reply

Your email address will not be published. Required fields are marked *