Enable browser caching of static assets

Web Performance Discuss Test Results
1

Newbie here. I ran test results on this page:
http://www.southafrica.to/transport/Airlines/Kulula-flights/Kulula-flights.php5
http://www.webpagetest.org/result/100912_4ST1/1/performance_optimization/

One of the things which came up is that “Enable browser caching of static assets” FAILED (No max-age or expires). How do I go about fixing this up?

I host on Godaddy (note sure if that’s relevant).

Would appreciate any assistance.

2

Try to add something like this, to an .htaccess file in the root-Folder of your website.

The settings add the expire header for the mime-types (Javascript, CSS, png, jpg and so on) beginning at the time the client access the file and adding the time specified as expiration time.
In the code below A604800, stands for accesstime + 604800 seconds is the expiration time.

In this time the client do not request the content again. Unless the client uses a local cache.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType application/javascript A604800
ExpiresByType application/x-javascript A604800
ExpiresByType text/javascript A604800
ExpiresByType text/css A604800
ExpiresByType image/gif A604800
ExpiresByType image/x-icon A604800
ExpiresByType image/icon A604800
ExpiresByType image/jpg A604800
ExpiresByType image/jpeg A604800
ExpiresByType image/png A604800
</IfModule>

Just check the HTTP-Header of any file mathing this. If the expire-header is not used, your provider has not enabled mod_expires for the Apache webserver. Ask him to do that.

3

Thanks. I added that exact code at www.southafrica.to/.htaccess (just copied & pasted).

But I’m still getting the same error at http://www.webpagetest.org/result/100912_4SXM/1/performance_optimization/

4

I’d be surprised if they didn’t, but check with GoDaddy and make sure they have mod_expires installed and activated for your Apache instance.

Be careful before you turn it on so that you understand the ramifications though. Your site needs to be designed to expect the user to be able to cache those files and never check for an updated version. That means if you update the css and don’t change the file name the users with the cached copy will not see the updates (potentially viewing a broken page).

5

And what are you suggesting to do? i mean how to make users be aware of it?

6

You don’t make the users aware of it, it needs to be designed into the site itself. If you are expecting to change css or javascript files then you need to have a system in place where you can change the file name every time you change the contents.

Personally, I do this by having a version number declared in a global file and I bump the version number any time I edit the css or javascript. Anywhere they are included they are included as ?v=. The query parameter is just ignored by the web server so the ACTUAL file name can be the same but it’s enough to bust the cache.

Purists may comment that the query string may prevent intermediate proxies from caching the content and that you should add the version to the URL itself but it wasn’t worth the extra effort for my needs.