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" />
Related Articles:
- How to Speed up WP Super Cache
- Optimize WordPress page loading time with PHP Speedy and WP Super Cache
- 7 tips to insure your blog against web tsunami
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
8 Comments
this tip help me to do my work easy..thank you..keep posting
I've had issues in Firefox on a client site I was building.
Looks like Firefox 3.x has some caching problems and that resulted in it not always being able to load my style.css.
So I searched and found your solution, but as you say, it only works when the CSS changes.
My CSS is not changing but stupid Firefox still can't load it after a few browsed pages.
My solution, inspired by yours, was to use PHP's uniqid() function in order to append a unique number after the '?' at the end of the file URI.
Here's how (please edit in case WordPress screws up the code)
Ok, so it did screw it up...
I've pasted the code to TinyPaste: http://tinypaste.com/8f49b4
Cheers,
Cosmin.
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 :)