Setting “expires” tells browsers downloading these files that they don’t need to request it again for this specific length of time. In otherwords, use the cache instead if you have it. This can reduce stress on the server for you, and speed up page load time for visitors.
# BEGIN EXPIRES
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 10 days"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/plain "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 1 year"
</IfModule>
# END EXPIRES
I would add that if you are using something like that, embed a datestamp or version identifier in the filenames of resources. That way, if you update a resource you can increment the indicator so that visitors will load the new one instead of continuing to use the old one until the expires period runs out.
Yes! I’ve found this to be critical with flash files.
Can you offer a snippet that would do just that? Sounds like a great idea… but I wouldn’t know how to do it.
This increment thing the two above you are talking about is likely simpler then you think.
It goes like this:
[link rel="stylesheet" href="http://path/style.css?v=001" type="text/css" /]
those of you knowing PHP will recognize the v-parameter and “001” as a value. Now… what does PHP has to do with CSS exactly ?
Answer: Nothing !
However the browser doesn’t know that and will think that style.css?v=001 is not the same as style.css?v=002 . So, use the snippet above from Chris Coyier and append a v-parameter to the url and whenever the v-parameter changes the cache/setExpires will be ingnored and reset to 0.
Also, if you’re using this in WordPress, I recommend not setting it manually in header.php but make a function in functinons.php like so:
[?php
function version(){
$version = "001";
return $version;
}
?]
# header.php
href="style.css?v=[?php echo version(); ?]"
This is what Google says:
Don’t include a query string in the URL for static resources.
Most proxies, most notably Squid up through version 3.0, do not cache resources with a “?” in their URL even if a Cache-control: public header is present in the response. To enable proxy caching for these resources, remove query strings from references to static resources, and instead encode the parameters into the file names themselves.
Do you need to specify Expires paths?
I’ve always wondered—is there a way to turn this code off in a sense if you decide to make updates to your Javascript or image files for example? I’ve read that you have to rename them, but is there a way around this or do you have to wait for the cached time to run out?
Thanks to the team of CSS-Tricks.com, I appreciate your help, Your website is very resource able. I learned many tricks and tips and still learning.
I have one problem need help please. I am unable to display images from my website in google chrome browser. It works fine in IE and Firefox. When I was researching regarding this issue, I learned that we have to set expire for the images. Can any one please guide me how to set expiry for the images in CSS or else any other way.
Thanks for your all support.
This code is not working on my site . Tell me why?
Face palms @ delivery of question
really nice snippet.
This website is a great resource. no doubt!
Just a quick question: What is the difference between “ExpiresByType application/x-javascript” and “ExpiresByType application/javascript”?
What is “x-javascript” exactly?
thanks
jpg was left out of the filetype list, might save some confussed people some time to add it. Took me a few hours to notice! or is there something i dont know? are jpegs the same as jpgs, well i suppose they are but are they to the server?
jpg was left out of the filetype list, might save some confussed people some time to add it. Took me a few hours to notice! or is there something i dont know? are jpegs the same as jpgs, well i suppose they are but are they to the server i have tha some question
Excellent idea. Thanks for sharing
I have use this code in a couple of website, but it is add, it does not get recognized at all.
This is what I get for example in Yslow:
Grade F on Add Expires headers
http://mywebsite.com/wp-content/themes/theme/scripts.js
What would prevent this code from been added to the expired rules?
Thanks,
Hi , I’ve a file with .css.php extension that didnt take those rules above.
What I should do for this file ????
mohammad,
make sure your PHP sends the CSS with the correct MIME type. Usually with a
header("Content-type: text/css");at the top of your script.that is too primitive — and problematic
it needs to be relative to file modification time assuming you upload with that information intact
Thanks for the Set Expires tip. I got my site boosted over the A-grade on gtmetrix thanks to this tip.
This page allows you to inspect the HTTP headers sent back by any web server, so you can check page expiration, caching settings and server version.
http://web.forret.com/tools/analyze.aspx?url=
I have set the expiration to my site. thanks a lot. now pagespeed shows good.
How you set the expiration in your website?
How do I set this in a blogspot.com blog?
I don’t have access to the .htaccess file.
Can I set these as a meta tag in my header?
Thanks!
I have added the rule in my .htaccess file for CSS
ExpiresByType text/css “access plus 1 week”
But the css file are using version like front.css?ver=4.1
and it doesn’t reflect any expiry
Below are the details
There are 48 static components without a far-future expiration date.
@Anand Vaishnav these tags does not add any expiry date time on you urls for file. It would only request them after that time. 1 week in your case
Thank You for your reply :) Well This is downgrading my performance rating so I was worried. Thank Again :) Will it mess any thing if I remove the version details from the end of URL ??
I do not have access to my .htaccess file.
Is there a way to add some code right in the web page for my .jpg images only?
If so, could give me the sample code?
Please…….?
I have used the .htaccess expiry but google page speed still shows
Consider Fixing:
Leverage browser caching
Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
and list all the images and js under it but the css is not being shown in the list. Any idea what is wrong. here is my code
BEGIN EXPIRES
ExpiresActive On
ExpiresByType text/css “access plus 1 week”
ExpiresByType text/plain “access plus 1 month”
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType text/html “access plus 1 month”
ExpiresByType text/php “access plus 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-javascript “access plus 1 month”
ExpiresByType application/javascript “access plus 1 week”
ExpiresByType application/x-icon “access plus 1 year”
ExpiresDefault “access plus 1 month”
END EXPIRES
This link might help you refine your htaccss file to get a better score on the Google page insight. http://community.mybb.com/thread-121754.html
hope this help >.<
RewriteEngine On
BEGIN Mod Header
ExpiresActive On
Turn on Expires and set default expires to 10 years
END Mod Header
BEGIN Cache Control
Header set Expires “Thu, 15 Apr 2012 20:00:00 GMT”
Header unset ETag
FileETag None
#END Cache Control
Expires Caching
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access plus 10 years”
End
Hey buddies,
I want to add expiration of a specific .js cdn in .htaccess
cdn is here
http://w.sharethis.com/button/st_insights.js
Please tell me how can i do that?
I m speeding my website and doing leverage browser caching in .htaccess.
Hello,
its possible to add a variable Expire in meta link ?
Thanks for the Set Expires tip. I got my site boosted over the A-grade on gtmetrix thanks to this tip.
There are three possible code here:
1.
Header set Cache-Control “max-age=604800, public”
2.
ExpiresActive On
ExpiresDefault A2592000
3.
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
Thanks…