: How to properly cache a static website .htaccess The problem i noticed with my static website. Is that the css is not renewing itself once I updated the website code at areas (Adding new pictues,

@Lee4591628

My htaccess file looks like this:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 30 seconds"
ExpiresByType text/html "access plus 30 seconds"
ExpiresByType image/x-icon "access plus 700000 seconds"
ExpiresByType image/gif "access plus 700000 seconds"
ExpiresByType image/jpeg "access plus 700000 seconds"
ExpiresByType image/png "access plus 700000 seconds"
ExpiresByType text/css "access plus 700000 seconds"
ExpiresByType text/javascript "access plus 700000 seconds"
ExpiresByType application/javascript "access plus 700000 seconds"
ExpiresByType application/x-javascript "access plus 700000 seconds"
</IfModule>


You definitely need to be caching your .js and .css files so that users don't have to download your .js and .css files with every page load.

When I update my css I have the ability to change the style src on all of my pages (through my header file). So When I update my css and I want all users to get the copy of the new css I change the file from file1.css to file2.css.

If you just update the code in the same .css file, anyone with a cached version of your .css file might not get the update until the cache expires.

If you don't have the ability to change the file name of the .css and all of the src styling on your pages, you can update your cache expiry in htaccess so that your .css will expire sooner.

A way that this can be done is to set the .css expiry to 1 day after a new update. It will cause the user to have to load the .css file every time he visits your site for the new day, but it also ensures that he will get your new .css update if his cached version is older than a day.

ExpiresByType text/css "access plus 86400 seconds"


86400 seconds = 24 hours

Vote Up Vote Down

@Harper822

The standard options for this is to use some kind of automation where the page html that references the css assets change the css url in some way. You can either use url params as mentioned by George or if you are able to dynamically change the css file name or path (for eg, if you are combining muliple files) do that. Either way this assumes that the html is going to be retrieved by the browser again and this time with the updated css file path which means that Browser will have to call the server again for the css.

Changing the expires date or time alone won't help since during the cache period the browser won't check for an updated copy. You can try enabling Etag in htaccess which might work (because they should change when the file contents change), but I've not tested this.

Vote Up Vote Down

@Michele947

This is a double-edged sword. CSS is normally set to be cached for a very long time in order to optimize your website loading timings after the 1st load. Hence the line in your .htacccess file. Don't change it until you really know what you are doing.

In case your website is not using CMS (I have to assume here since you didn't provide enough details) you'd rather change a link to that changed resource file (CSS in this case) by adding a query string. Something like this

/css_directory/file.css?001

Any time you update CSS - change that value after ?.

This is what CMS-based websites normally do out of the box. This way you have control over what's being server to your visitors while not wasting their bandwidth on re-checking your supposed-to-be-static content (CSS) every hour.

Vote Up Vote Down