I know that as a user myself, I can just hit 'F5' to make sure, or clear my cache, etc.

I'm just wondering if there's anything from a web designer standpoint that can make this more "automatic," as many users may not know to do that.

For dynamic sites, this can be done with server-side "magic."

It seems that some answers to similar questions imply editing .htaccess in some way, so I'm going to investigate this. However, if anyone has a "quick tip" or code snippet that will work for a static site, that would be great.

The only PHP used on the site is for the contact form so it can automatically send off the email. The rest of the site is just images, text, etc.

I know that as a user myself, I can just hit 'F5' to make sure, or clear my cache, etc.

I'm just wondering if there's anything from a web designer standpoint that can make this more "automatic," as many users may not know to do that.

For dynamic sites, this can be done with server-side "magic."

It seems that some answers to similar questions imply editing .htaccess in some way, so I'm going to investigate this. However, if anyone has a "quick tip" or code snippet that will work for a static site, that would be great.

The only PHP used on the site is for the contact form so it can automatically send off the email. The rest of the site is just images, text, etc.

• javascript
• jquery
• html
• css
• web-deployment

• 7 All the answers below will do it for you but remember, caching is a good thing! Caching means the user has to download less data and your web server has to serve less data so use it sparingly. – Liam Commented Jan 2, 2013 at 16:51
• Have a look at "configure Etags" on this page. developer.yahoo./performance/rules.html. This explains how and when caching works. – Liam Commented Jan 3, 2013 at 8:53

5 Answers 5

You can't clear the cache with some sort of JS solution, but what you can do, is that with each new deployment / update to your website add a fake version/etc number to the end of your css/js.

For example:

main.css?v=1.5
myCode.js?v=123

Next time you update, just change it slightly: main.css?v=1.51 and when a user goes to visit your site again, since the URL will be different it will automatically reload it, ensuring they are using the most up-to-date style sheet.

Try adding a cache-busting variable to the end of your included files. E.g., instead of including main.js, include main.js?d=20120102. The JS/CSS file will ignore the variable, but the variable will cause the client to think it's a new file that hasn't been cached. You can then easily change the variable when you update the file.

try:

<img src="image/path.jpg?t=<?=time();?>" />

for every image inside your "static" website. when you're working with *.html files you could use javascript to "reload" every image within the onload event.

There are few ways to achieve this.

You can set cache meta info in your static html page to direct browsers not to cache and redirect requests to original server

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta http-equiv="cache-control" content="max-age=0" />
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

Using php, you can set the headers like this

<?php
  //set headers to NOT cache a page
  header("Cache-Control: no-cache, must-revalidate"); //HTTP 1.1
  header("Pragma: no-cache"); //HTTP 1.0
  header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past

You can also achieve no-caching using .htaccess. For this you need to have mod_headers enabled. Simply put this snippet in your .htaccess file.

<filesMatch ".(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Feb 1994 08:00:00 GMT"
</ifModule>
</filesMatch>

By using html5 boilerplate (http://html5boilerplate./), and just making sure I transferred over their "pre-made" .htaccess, my sites are displaying updates just fine.

To be honest, I didn't even really look in the file, but I'm sure it incorporates some of the concepts described here.