This is a small trick I've been using on a number of sites where far expiration dates have been set on the server to improve browsing performance.
Basically if you often do any changes to your CSS (like me) the old version of the file will normally be served to your visitors as the cache expiration header is set to a far future time.
To remedy this we need to add a parameter to CSS file URL that will make it distinct every time you change it. Best way to do it is by using the timestamp of the file.
You can change the CSS reference in your header.php to something like this:
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('stylesheet_url'). '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" />
For example here is how my CSS URL looks like
<link rel="stylesheet" type="text/css" href="http://static.prelovac.com/style.css?1266235697" />
See also:
- Improve website YSlow performance grade in a blink of an eye
- How to Speed up WP Super Cache
- Optimize WordPress page loading time with PHP Speedy and WP Super Cache
Posted in: WordPress
TAGS:add comments css file, adding css version comment, adding version css file, comment css file, comments css file, css file themes, css file version, css version, how add version css, how can version css, php add version css, themes css, themes css url, urlwordpress themes prelovac, version css, wordpress add cssfile
Hi! My name is 
5 Comments
My mistake, I thought it just used today's date, but I understand it uses the files modified date (is that right, sorry I'm not familiar with filemtime function, guess I should google it). Definitely makes more sense to me now. Great idea!
Excellent! I am implementing it on all of my client websites going forward. Thank you for another excellent tip Vladimir.
Awesome trick! Nice way to keep from Ctrl-refreshing all the time. But I don't think it is a good idea to keep it that way. It is kind of like a debugging feature, you only want to use it when your doing lots of trial and error testing. Otherwise, every visit requires visitors to re-download the stylesheet, which increase the page load time a little bit. What about graphics? Should we do the same when we are fine tuning graphic designs, forcing visitors to re-download graphics on every page load? I know it's absurd, but proves my point I think. But still, awesome trick!
Every visit will not require a re-download, only when the CSS is changed.
awesome trick master..
its so can include author blog :)