Use Shorter Caching Times When Starting Out Your Website

0
806
Clock and memory cache

When you are starting to build a new website and have just gone online, you will likely run into a problem that will make your site look really bad.

If you make frequent changes to your CSS files for example, your visitor’s browsers won’t fetch the new CSS file changes until the cache setting expires.

This is unfortunate, because your website is not going to look very good. Users will have to hit the refresh button to initiate a new download. The bad news is, most won’t because they think your site has bugs. This leaves a bad impression of your site from the visitors and you could lose your site reputation and never see the visitor appear again.

I’ve run into this problem over the years as I make changes to my websites. Today, for example, I got bit by this problem again and scratched my head wondering why my CSS changes weren’t being updated by the browser.

If I’m getting that problem I can imagine all my users getting it too. So if you’re the type that likes to tinker with your website frequently, it’s best to understand what’s going on to avoid embarrassing issues down the road.

The solution to all of this is when you are starting out, minimize the cache times and then gradually increase them as your site stabilizes. If you then go back into your website and redevelop, minimize the cache times again.

You need to study and understand the surfing habits of your visitors. Do the majority frequent your site everyday? Do they visit once a week? It is important to understand this so that you can tweak your cache settings to the one that satisfies 80% of your users.

Why do we cache? We cache to reduce the amount of data that the server has to output to the client. By doing so we can increase the number of connections and serve requests efficiently.

A general guideline should be to avoid caching anything for more than a week. If you have objects that don’t change frequently like video, music and images you can set this to a higher expire time, perhaps a week.

Other items like CSS, Javascript, HTML, XHTML, files should be set to no more than a few hours on moderate trafficked websites.

Remember, that as you decrease the cache expiration time, you are putting more load on the server.

Force User Agent To Ignore Cache Time By Metatags

If you set your cache times to be too much into the future (like months) you have an out. You can tell the user agent (browser) to download a web page with a metatag:

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
<meta http-equiv="Expires" content="0">

The first line is for HTTP 1.0 backward compatibility and in most cases will be ignored. The second line is described in RFC 2616. The third line is also explained in section 14.21 of RFC 2616 and basically means that it has expired.

This will cause the user agent to ignore what it has in it’s cache and request for the contents of the object as if it was brand spanking new.

Force User Agent To Ignore Cache Time By URL Name

Another thing that you can do is rename your objects to force the action. For example, a possible practice is to give each file a version name. If you have a style.css file, rename it to style-major-minor.css where major and minor are the version number. This way, you can make your tweaks to the file and then rename it to the new version referencing the new file and thus forcing a user agent download.

This makes sense because browsers fetch things from a cache and must index into it with some sort of key. The unique key signature is likely the URL itself as that signals on the website a unique object. So essentially, the only way you can force an update of an object on the user agent is to give it a different URI/URL.

I’ve seen this type of naming but would generally avoid doing it:

style.css?major.minor

or something involving time in the file name:

style.css?yyyymmdd-hhmmss

The reason being is that not all browsers are going to parse that correctly. I don’t even think that is legal either. So its best to stick to modifying the file name by playing it safe:

style-major-minor.css

or

style-yyyymmdd-hhmmss.css

Force User Agent To Ignore Cache By Apache Configuration

The final way we can modify the cache control is through modifying the httpd.conf configuration file and use of mod_expires and mod_headers.

ExpiresActive On
<Directory "/public_html/mysite.com">
  ExpiresDefault A86400
  <FilesMatch "\.(gif|jpg|png)$">
    Expires A14400
  </FilesMatch>
  <FilesMatch "\.(html|css|js)$">
    Expires A7200
  </FilesMatch>
</Directory>

ExpiresDefault causes all objects that don’t match the file pattern to expire every day (86400 seconds). Images are set to expire in 4 hours. HTML, CSS, and Javascript files expire in 2 hour.

If you don’t want caching at all:

<Directory "/public_html/mysite.com">
  Header set cache-control: "no-cache, no-store, must-revalidate"
</Directory>

Summary

So there you go, three ways to modify cache times to suit your needs. If you don’t have access to your Apache httpd.conf file, you can choose to add directives through .htaccess. This being so for those who are on shared hosting accounts.

For those who don’t want to mess around at the server level, you can add metatags to your pages. If you are working with a content management system, you will have to modify your page templates and include the meta tags.

Of Interest