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.
You can now use our WP Far Future Expiration Plugin to do this task easily
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"
</FilesMatch>
or
# 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.
Video Tutorial (Adding Far Future Expiry Header)
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:
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:
Nice article! This will be quite helpful for me
Thank you for the code, I have copied and paste to my .htaccess
i am managing my website,realy need this kind of information,really very good information for me,thx very much for sharing with us!
YSlow sometimes does that unless you set it to like a year. You should notice a different in load time even though YSlow is not giving you the score for that particular item.
I cannot get this to work, similar issues to others on here. I am with hostmonster. When I add the expire header (whether it’s 2 months or 6 months), and FileETag, yslow seems to just ignore it. Any advice?
Thanks for making this so easy to understand. I have definitely seen improvements from these 2 minor tweaks.
useful information, I think I need it. thanks
Ok, I try First , i will report you later
Excellent post! I have tried second code to add to my .htaccess and it works quite good. YSlow is now “B” 82% and Page Speed also “B” 87%.
Thank you!
Doesn’t work for me, my provider told me they don’t use ‘expire’ headers, security reasons… Have .htaccess though, it will give error 500.
I would like to say that this blog really convinced me, you give me best information! Thanks, very good post.
If you are facing problem is site update as the future expire is preventing the new looks to propagate to old visitors then you need the solution discussed here:
http://www.satya-weblog.com/2010/04/how-to-delete-cached-file-on-client-side.html
@Michelle, make sure you are using the correct quotations (“) don’t just copy and paste it because there is a good chance that the font is making the quotation mark all weird.
When I add ExpiresDefault “access plus 2 monthsâ€
and
# 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
I get a 500 error.
When I use just the 2nd code, it works. Load time definitely speeds up, but I am still left with 15-50 (depending on the page) headers that have no expiration.
If you are using a shared Windows server then there is nothing you can do. The control using a .htaccess file is simply one of the rewards you get for using apache servers.
How can this be done on windows servers. It does not have .htacces file. I have looked everywhere but can find nothing for windows.
Great tips – this helped a ton with my YSlow scores and dramatically improved page loading time.
Yep, it is a standard Apache thing so the CMS doesn’t matter here.
hi, could i implemented that script to another cms, like joomla?
Im not using the ExpiresDefault method, instead im using the
Header set Cache-Control “max-age=3456000, public” for everything except js and css and
Header set Cache-Control “max-age=3456000, private” for the js and css, but Yslow is only complaining about the css not being cached =(
(3456000 is 480 weeks! so its not that!)
think i might try your method and see if it makes it any better =)
You shouldn’t get any error. Did you copy and paste the exact code I gave in the example first to see if that works before you wrote your conditions?
I’ve tried to add lines mentioned in this aticle, but I think my provider doesn’t use ‘mod_expires’.
When I add ‘ExpiresActive on’ or other Expires* commands, I’m getting Error (500). When I write condition ” and some next lines for expiring rules, my files don’t get proper expiring values (or ETag is till added to file).
Is it possible? maybe I’m doing something wrong?
Sometimes using:
ExpiresDefault “access plus 2 hours”
It didn’t work but ExpiresActive is work 🙂
Is there another wasy to achieve this?
my webhost doesn’t support the Apache-Expire-module.
Using the .htaccess codes you provided in your article, I managed to get the performance of one of my sites from 83/100 to 87/100 in the Google Page Speed Firefox Addon.
Thank you once again for this great resource.
Hi Charles, yeah you can do it… the file types specified in the “FilesMatch” conditions are the one that will get chached.
Is there any way to add expires in the .htaccess to specific files?
Since my blog is new, I don’t want to be adding certain file extensions that me be changing.
Thanks for the tip. I’ll just leave it at 30 days as I’m forever twaeking my theme files. lol.
The following comment states that the files are cached for 30 days:
# BEGIN Headers: Ensure browser caching of objects for 30 days
YSlow requires the files to be cached for longer (e.g 6 months). Until you do that it is going to keep complaining about the “missing cache expiration”. I think you can ignore that if your files are cached for 30 days.
My files are hosted on a sub domain and the .htaccess in it looks like the code below
# BEGIN Define Mime Types (in case /etc/mime.types is poorly configured or incorrect)
AddType application/x-javascript .js
AddType application/x-shockwave-flash .swf
AddType image/bmp .bmp
AddType image/gif .gif
AddType image/jpeg .jpeg
AddType image/jpg .jpg
AddType image/png .png
AddType image/svg+xml .svg
AddType image/tif .tif
AddType image/tiff .tiff
AddType image/x-icon .ico
AddType text/css .css
AddType text/htm .htm
AddType text/html .html
AddType text/plain .txt
AddType text/xml .xml
AddType text/xsd .xsd
AddType text/xsl .xsl
# END Define Mime Types
# BEGIN Headers: Ensure browser caching of objects for 30 days
# Set Expires header
ExpiresActive On
ExpiresByType application/x-javascript A2592000
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType application/wlwmanifest+xml A2592000
ExpiresByType image/bmp A2592000
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/png A2592000
ExpiresByType image/svg+xml A2592000
ExpiresByType image/tif A2592000
ExpiresByType image/tiff A2592000
ExpiresByType image/x-icon A2592000
ExpiresByType text/css A2592000
ExpiresByType text/htm A2592000
ExpiresByType text/html A2592000
ExpiresByType text/plain A2592000
ExpiresByType text/xml A2592000
ExpiresByType text/xsd A2592000
ExpiresByType text/xsl A2592000
# Set Pragma header
Header set Pragma "public"
# Set Cache-Control header
Header append Cache-Control "public, must-revalidate, proxy-revalidate"
# Set Entity Tag header
FileETag MTime Size
# END Headers: Ensure client-side caching of objects
Yet YSlow and Page Speed keep reporting The following resources are missing a cache expiration
Is my code wrong or something ? 🙁
Thanks in advance for your assistance.
Thanks again!
Yes, sub-domains are treated as a different domain.
Thanks for this really great tip.
How about if I store images of my blog on a sub-domain
ex. img.myblog.com/images/image-1.jgp
Do I need to create another .htaccess for that sub-domain and add the code to it, too?
THanks for the help!
You can place it anywhere in your .htaccess file.
Hi there.
Thanks for the info. very helpful.
does it matter where I place to “FileETag none” script?
on the same not, how about the expiration script? any specific location?
thank for the help.
In the example above you need to add:
ExpiresActive on
before
ExpiresDefault “access plus 2 hours”
Thanks for this! One thing to be aware of, the .htaccess code may copy with fancy quotes, so you’ll need to make them plain quotes before uploading.
Aha,..
Got it from u. Im using both of Google Page Speed and Yahoo!YSlow. Bad report for my weblog. I think this posting is very usefull for me. Thank for sharing.
Best Regard,
Harry
applying expire headers is giving me internal 500 errors. I am also using wp-super cache.
The answer is already in the post… it only advises to remove ETags if you are not taking advantage of this (most site’s don’t)
I don’t know about ETags, why you tell should remove it buy Yahoo guide tell should added it ?
Hi Bill, if WordPress is installed on that directory then it looks like the correct directory. Please note that YSlow won’t recognize it unless the expiry is long into the future (eg. 6 months) but you will see the performance improvement as the browser will cache the files.
I have tried both default and the long list (expires headers above) to .htaccess in ~/public_html/blog/HERE
Yslow still does not see that expires headers have been added. While i thas seen other improvements. Is .htaccess in wrong dir?
@John, try the following.. (Please make sure you always keep a backup copy of your .htaccess file when you update it just in case something goes wrong)
<ifmodule mod_expires.c>
<filesmatch “\.(ico|jpg|jpeg|png|gif|js|css|swf)$”>
ExpiresActive on
ExpiresDefault “access plus 6 months”
</filesmatch>
</ifmodule>
I changed it from 1 month to 2 months and it’s still not being recognized by YSlow. Any other suggestions?
Hi John, Please note that YSlow doesn’t recognize a component to have a far-future expiration header unless the expiration is set 2 or more months into the future. So say for example you set the expiration to 6 hours then the components will be cached and your subsequent page loads will be fast but YSlow won’t give you the rating for it as it’s not more than 2 months which they consider to be a far-future.
Thanks for the tip. I just tried this and my YSlow score improved from a C to a B. However, I’m still getting these:
There is 1 component with misconfigured ETags
– http://mysite.com/images/favicon.ico
There are 2 static components without a far-future expiration date.
– http://www.google-analytics.com/ga.js
– http://mysite.com/images/favicon.ico
Any ideas?
@Johan, Yep thats right… you can exclude the Javascript and CSS files from caching or rename them manually after every update so the browser fetches the new file. It’s a little bit of a pain but it may be wort it depending on how many javascript and CSS files you have.
This is a great article, but I wonder what happens if you set the expires header one month in the future and you do a plugin or wordpress update? Will the javascript, css, … only be updated one month in the future for the person who just visted your site for the first time?
Thanks for this great tip! I just tried it on my blog, and it speeds up access time hugely.
I’m also going to keep an eye on next month’s bandwidth stats – I’m sure this is going to reduce my bandwidth usage a lot due to caching of all the images etc.
Keep the good stuff coming! 🙂