Grow your CSS skills. Land your dream job.

Last updated on:

Set Expires

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

Comments

  1. Permalink to comment#

    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.

    • Permalink to comment#

      Yes! I’ve found this to be critical with flash files.

    • Jacob Dubail
      Permalink to comment#

      Can you offer a snippet that would do just that? Sounds like a great idea… but I wouldn’t know how to do it.

    • TeMc
      Permalink to comment#

      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(); ?]"

    • Permalink to comment#

      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.

  2. Permalink to comment#

    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?

  3. muheeb
    Permalink to comment#

    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.

  4. Permalink to comment#

    This code is not working on my site . Tell me why?

  5. bob
    Permalink to comment#

    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

  6. Thanks and q's
    Permalink to comment#

    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?

  7. 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

  8. Mladen Petrov
    Permalink to comment#

    Excellent idea. Thanks for sharing

  9. Permalink to comment#

    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,

  10. Hi , I’ve a file with .css.php extension that didnt take those rules above.
    What I should do for this file ????

    • Ray

      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.

  11. that is too primitive — and problematic

    it needs to be relative to file modification time assuming you upload with that information intact

  12. Thanks for the Set Expires tip. I got my site boosted over the A-grade on gtmetrix thanks to this tip.

  13. 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=

  14. Vineesh C
    Permalink to comment#

    I have set the expiration to my site. thanks a lot. now pagespeed shows good.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".