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:
@Derek, There shouldn’t be any issue with using this along side W3 Total Cache plugin. It is perfectly okay if you add the htaccess code to the file manually.
Great post. It has been helpful to track down an issue I was experiencing with a site. Perhaps you can also elaborate on an issue.
After recently making the switch over from super cache to w3 total cache, I noticed that for all its improvement in site performance, the one line you posted:
ExpiresDefault “access plus 2 months”
is not even listed within the htaccess code that W3 includes. Has this been an issue that was missed by them? Or something that nobody thought might make a difference?
Also, as you have created a plugin to do this simple fix, has there been or will there be any issues using along side of the W3TC plugin?
As it is not listed in my present htaccess file, I was hoping to add it manually as I could not find it located within W3TC anywhere.
@Hatchemoto, When you say the “WP Plugin”, do you mean the following plugin?
https://www.tipsandtricks-hq.com/how-to-add-far-future-expires-headers-to-your-wordpress-site-1533
The problem people are having with the WP plugin is that it’s not adding the ExpiresActive On directive. Do that, and you will see the results you’re looking for.
Hi there, I want to give a huge thumbs up for this great little utility post.
@Lucas, I have seen in the past where YSlow fails to detect the far future expiry correctly on some files. If you have added the rule correctly then the browser will cache them. I think you can ignore the YSlow warning on those files.
@admin: thanks for your tip! Unfortunately the issue still persists, I’ve even installed your Far-Futre Expiry plugin, it wouldn’t solve the problem. Any ideas?
@Lucas, you should be able to apply expiry header to the icon file and the JS file by targeting the .ico and .js file extensions. Use a long expiry time (more than 1 year in the future maybe).
Hi there!
Great post, it really helped me out a lot. I added the far-future expiration and it instantly boosted my Y-slow scores 🙂 However, there are a few things remain unsolved – a favicon (png) (no expires), Google fonts api (expires 2013/7/30) and a js file (expires 2013/7/30). These are the info shown in Firebug’s YSlow. What do you suggest me to do?
Thanks!
Lucas
@Jeremy, Adding expire headers won’t cause any issue with WP eStore and WP Affiliate Platform plugins.
Do expires headers cause problems with WP eStore and wp Affiliate?