1

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, text, colours).

I checked immediately once i updated. Everything renewed properly except the css. (The colours didnt change)

Heres my .htaccess for cache

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$"> Header set Cache-Control "max-age=2628000, public" </filesMatch>

My objective is for updates to reflect completely once you go on the website or even click the website link on google.

Should I add this as well?

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access 1 hour"
ExpiresByType image/gif "access 1 hour"
ExpiresByType image/jpeg "access 1 hour"
ExpiresByType text/javascript "access 1 hour"
ExpiresByType text/css "access 1 hour"
ExpiresByType text/html "modification 4 hours"
ExpiresDefault "access 2 days"

Please help on what i may be doing wrong or what else that i should add in the .htaccess for this issue.

  • Remove CSS from your code and clear your browser cache. Then try again. – closetnoc Mar 1 '18 at 1:19
2

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.

  • Hi. Im not using a CMS, I only have a few pages. Just to confirm i rename my css file to (example: body.css?001) wouldn't i need to rename the head section of the html to (body.css?001) as well? – Rivash Harripersad Mar 1 '18 at 10:07
  • Not exactly. You keep the file name as is. Just update how it is being referenced. Per HTML links /css_directory/file.css?001 and /css_directory/file.css and /css_directory/file.css?002 are pointing to the same file but the arguments (after ?) will cause browsers to force refresh its content. – George Mar 1 '18 at 15:20
  • Hi I tried this out. It works perfectly thank you so much. I did notice that if i got back to .css it shows the old code again but anyway its fine. Last question, is there anyway to implement this method some way through .htaccess? How do CMS websites mange to get things done without physically changing the code? – Rivash Harripersad Mar 1 '18 at 17:38
  • I'd recommend reading through the way caching is working in the Internet. You can start with Cache-Control HTTP header. As for CMS — they just detect file changes on the disk and change that part after ? when rendering the HTML pages. – George Mar 1 '18 at 18:49
2

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.

1

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

  • Hey instead of changing the file name do what George says above. It works. – Rivash Harripersad Mar 1 '18 at 17:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.