(+84) 463.28.7979

How to Add Far Future Expires Headers to Your WordPress Site

Few weeks ago I wrote on how to optimize your WordPress site for better performance which has some tips and tricks on how to speed up a WordPress Site. I received a few requests to elaborate on some of the points as not all of them are obvious changes. In this article I have explained how you can add far future expiry header to your image, css and javascript files to speed up your site.

Adding expires headers do not affect the site load time for a first time visitor but you will be surprised how much the page load time decreases (faster page load) for subsequent page views/return visits from that visitor. Expires header specifies a time far enough in the future so that browsers won’t try to re-fetch images, CSS, javascript etc files that haven’t changed (this reduces the number of HTTP requests) and hence the performance improvement on subsequent page views.

If your server is Apache (most web servers), you can use the ‘ExpiresDefault’ directive to set an expiration date relative to the current date.

ExpiresDefault “access plus 2 months”

This sets the expiry date of the file 2 months into the future from the current time. The following values can be used to specify the time period:

  • years
  • months
  • weeks
  • days
  • hours
  • minutes
  • seconds

eg. ExpiresDefault “access plus 14 days”

To add expires header to the image, CSS, javascript files add the following to your .htaccess file
#Expire Header
<FilesMatch ".(ico|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresDefault "access plus 2 hours"

# Expire images header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000

A2592000 means 1 month in the future (60*60*24*30=2592000)

Keep in mind that when you use expires header the files are cached in the browser until it expires so do not use this on files that changes frequently. If you change/update a file that has a far future expiry (eg. CSS or javascript files) then you should rename that file and use the renamed version so the browser doesn’t fetch the old file.

Removing ETags

According to Wikipedia – “An ETag (entity tag) is an HTTP response header returned by an HTTP/1.1 compliant web server used to determine change in content at a given URL. When a new HTTP response contains the same ETag as an older HTTP response, the contents are considered to be the same without further downloading.”

ETags were added to provide a mechanism for validating entities that is more flexible than the last-modified date but If you’re not taking advantage of the flexible validation model that ETags provide, it’s better to just remove the ETag altogether. Removing the ETag reduces the size of the HTTP headers in the response and subsequent requests thus improving site performance.

Add the following to your .htaccess file to remove ETags:

FileETag none

These tweaks can dramatically improve the performance of your site even though they are minor and doesn’t take that long to apply. I have seen a 20% speed improvement on my page loads just by adding these tweaks. My home page used to take around 5 seconds to load but then it dropped to around 3 seconds after these tweaks. Below is a screenshot of YSlow:
Screenshot of my Home Page Load Time

Leave a Reply

Your email address will not be published. Required fields are marked *