css phantom cache

Permalink
Is there a special way to clear the CSS cache? I am updating my CSS and still, it loads the old CSS. I have all caches turned off, running in incognito mode, have cleared the cached on the server, and added "pragma=no-cache" in the header. I have experienced this same issue with images. Eventually, like in hours, the new CSS is seen. Where do these phantom cached CSS files exist if not in files/cache? What I missing, or not doing?

Thanks

ntisithoj
View Replies: View Best Answer
weyboat replied on at Permalink Reply
weyboat
Probably your server is running 'Varnish' cache in the back end, you can usually turn it off in cPanel..
ntisithoj replied on at Permalink Reply
ntisithoj
I am running server via a terminal, but that is a good point, to look for os level caching - thanks
ntisithoj replied on at Permalink Best Answer Reply
ntisithoj
The solution is, I just discovered, was to configure Apache to expire the cache as follows
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
<Directory "/myProject/webResources">
    Options FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    Allow from all
    #ExpiresByType text/html "access plus 1 seconds"
    ExpiresByType text/css "access plus 1 seconds"
    #ExpiresByType text/javascript "access plus 1 seconds"
    #ExpiresByType image/gif "access plus 1 seconds"
    #ExpiresByType image/jpg "access plus 1 seconds"
    #ExpiresByType image/png "access plus 1 seconds"
    #ExpiresByType application/x-shockwave-flash "access plus 1 seconds"
</Directory>
mnakalay replied on at Permalink Reply
mnakalay
Hello,

this is not an optimal solution.
You are actually dealing with 2 levels of cache: the server's and the browser's. What you just did is tell your browser to only cache your CSS files for 1 second. So anytime someone comes to your website, the browser will have to ask the server again for the CSS instead of leveraging the cache.

You should set that value back to what it was to improve on user experience.

Now concerning your problem, it is just a matter of cleating the browser's cache.

One easy way is to reload your page by clicking Ctrl + F5 on your keyboard.

Another way, if you're using Chrome (I didn't try other browsers) is to open the developers' tools by clicking F12. Once they're open, if you push the browser's reload button and keep it pushed, a drop-down will appear with 3 options. The last one will be "Empty cache and hard reload". This will clear the cache and make your CSS changes appear right away.

Hope that helps
ntisithoj replied on at Permalink Reply
ntisithoj
I agree, It is certainly not optimal for a production server, but absolutely necessary for a dev server. So now there are two virtual hosts, one with cache, and one without, so going to the dev.site.com will always show fresh files, whilehttp://www.site.com will have them cached.