How do I set expiration headers for CSS, JS, and Images?

Question

I have recently analysed my website with pagespeed addon on firebug. It suggested me to set expiration on CSS, JS and image files.

I am wondering how do i do this?

Answer 1

Update your Apache configuration to include the directives below as part of your core configuration:

# 
# associate .js with "text/javascript" type (if not present in mime.conf)
# 
AddType text/javascript .js

# 
# configure mod_expires
# 
# URL: http://httpd.apache.org/docs/2.2/mod/mod_expires.html
# 
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 seconds"
    ExpiresByType image/x-icon "access plus 2692000 seconds"
    ExpiresByType image/jpeg "access plus 2692000 seconds"
    ExpiresByType image/png "access plus 2692000 seconds"
    ExpiresByType image/gif "access plus 2692000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 2692000 seconds"
    ExpiresByType text/css "access plus 2692000 seconds"
    ExpiresByType text/javascript "access plus 2692000 seconds"
    ExpiresByType application/x-javascript "access plus 2692000 seconds"
    ExpiresByType text/html "access plus 600 seconds"
    ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>

# 
# configure mod_headers
# 
# URL: http://httpd.apache.org/docs/2.2/mod/mod_headers.html
# 
<IfModule mod_headers.c>
    <FilesMatch "\\.(ico|jpe?g|png|gif|swf|css|js)$">
        Header set Cache-Control "max-age=2692000, public"
    </FilesMatch>
    <FilesMatch "\\.(x?html?|php)$">
        Header set Cache-Control "max-age=600, private, must-revalidate"
    </FilesMatch>
    Header unset ETag
    Header unset Last-Modified
</IfModule>

Answer 2

You can put this in your htaccess:

<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
ExpiresActive On
ExpiresDefault A2592000
</FilesMatch>

It will target files with those extensions (ico, flv, jpg and so on) and set the Expires header to be access time (A) plus 30 days (2592000 seconds). You can also add this at the server level if you have access to that.

Once implemented, you can check the file headers using this online tool.

Answer 3

It depend from the host and the way you server these things. Option 1) if you control the server make the apache to add expiration headers in the response Option 2) if you do not control the web server, or you server the images/js/css/etc you can set these headers from the script that server them

Have in mind that these hints are recommendable but not absolute truth. They are more to save you a bandwidth than to speed up your website . So if you have a low traffic to your site do not worry too much about this.

Answer 4

Setting up expires in Lightspeed Web Server

Login to Admin Console then >Server->General->Expires Settings->Expires By Type

Add the following:

text/css=A604800, text/javascript=A604800, application/javascript=A604800, application/x-javascript=A604800, application/x-shockwave-flash=A604800, image/gif=A604800, image/jpg=A604800, image/jpeg=A604800, image/png=A604800, image/ico=A604800, image/icon=A604800

604800 is the seconds of the expire, which should be suitable for your needs since its 168 hours which is 7 days. Additionally Light Speed Server does use a htaccess which you need to add the following line:

ExpiresActive On

Alternatively if you do not have admin console access try the following the .htaccess file:

  ExpiresByType image/png A604800
  ExpiresByType image/gif A604800
  ExpiresByType image/jpg A604800
  ExpiresByType image/jpeg A604800
  ExpiresByType text/javascript A604800
  ExpiresByType application/x-javascript A604800
  ExpiresByType text/css A604800