Website performance is much talked topic these days but still surprisingly large number of webmasters neglect the impact of site loading time for their SEO, visitor experience and ultimately sales.
Here is a quick tip to improve your website performance score (as measured by YSlow). It takes literally less then 5 minutes to implement.
Add these lines to your .htaccess file:
<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf)$"> <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 30 days" </IfModule> Header unset ETag FileETag None </FilesMatch> AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript application/rss+xml application/atom_xml text/javascript
What this does is adds far expires header (make sure mod_expires is loaded in your apache config if you have problems) to your static content (images, js, css), turns off ETag headers and compresses files sent to the browser (also saving your bandwidth bill).
This will improve your score by at least a full grade, if not more.
Of course, improving YSlow grade will be just a side effect - your site will feel much quicker for browsing.
Feel free to post your YSlow results in comments before and after applying this tip.
Resources:
Website Optimization guide (originally for WordPress sites)
Adding version to theme CSS file
Javascript to Footer plugin
Yslow
Using Site speed as search ranking factor
Related Articles:
- Alternative to YSlow – Page Speed
- Organic Search Optimization Strategy for 2011
- How to effectively use SEO Doctor for diagnosing website problems
Posted in: SEO
TAGS:amazon yslow, grade overall performance score, gzip wordpress yslow, improve web performance, improve website, mod_expires yslow recommendation, performance grade, prelovac vladimir improve, total enable etags, total etags yslow, wordpress add expires headers, yslow add expires headers, yslow amazon, yslow grade, yslow htaccess, yslow super gzip compression
38 Comments
awesome.... just went from an F to a B..... thank you so much guys
Hi Vladimir, i just found ur suggestions about the change in the .htaccess file. Im using Magento and learned a lot of speed optimization for Magento. For me this optimization trick is new but it works perfect! went from C to B (86 now) Thank you!
I'm running a managed dedicated server with 1&1 and I just got off the phone with them about loading the mod_expires module. They said it was not possible....so I can't really use this fix. Bummer.
Hi,
nice tips. a while ago I consolidated a few sources of such apache rules and came up with the following: http://github.com/AD7six/mi_development/blob/master/vendors/shells/templates/skel/webroot/.htaccess
It's worth noting with the .htaccess rules you've posted that:
* If the relevant module isn't loaded you'll get a 500 - as you and a few commenters before me have mentioned
* if your static file contents change and you aren't using "fingerprint" urls (i.e. the url changes when the contents do e.g. foo.js?v1.2 or better foo.1.2.js) users will receive stale contents if you change the file contents.
* Any static file which doesn't end with the file extensions you listed won't have the right headers
* The use of .htaccess files is itself a performance hit - wherever possible you should consolidate your rules into your vhost defenition
* If your static files aren't actually static and served by the webserver (I'm looking at your tomthumb image plugin and compress-my-css-and-js-via-a-.php etc.) these changes will have no effect.
* If you have the possibility to not use apache - that'll be a bigger performance boost (kudos for using ngnix :D).
In the .htaccess file I've linked to there are a few interesting points/differences I think are worth hightlighting
* No risk of 500s because each bit is in a IfModule
* Not wordpress specific, I wrote the specific example for use with CakePHP so there will be bits that are irrelevant.
* It matches all (not php) files, so anything that's static
* Choice to either use etags and serve 304s (content always fresh) or as you've posted far-future expires and no etags.
* There's an exception for (static cached) html files which I always want to be fresh
I wish more wordpress-ers would implement such simple optimizations, I hope this comment is useful :)
AD
Hi Ad
That's very useful Can you create a version of your .htaccess just for use with WordPress (ie stripdown unnecessary stuff?)
You are fast vladimir - of course, please do :)
I meant can YOU create one? :)
Haha - I still haven't had enough coffee :D, I misread your reply.
I don't use wordpress often enough to know for sure but here you go: http://gist.github.com/440336
Hi Vlad,
I ran into an issue, presumably because of this code, but I'm not 100%. Everything was working fine until I went to edit/create posts yesterday.I was receiving "Page Not Found" errors when trying to save changes to a WordPress post. This is happening intermittently. After exhausting the standard troubleshooting steps (deactivating all plugins, clearing caches), I went to my host and asked them to check their logs.
Their reply:
I explained to them what I had added to my .htaccess and why (and referred them to this post), and their reply was:
I wonder if you have any thoughts on why intermittent 404s would occur, and also whether their advice above would still gain my the same benefits?
Thanks for your time.
E to C. Thanks Vladimir! I have been trying to figure out how to do this... thanks!
Thanks Vladimir, It increased my page load speed (yslow).
Hello Vladimir,
i've tried to add this code to .htaccess file and 500 error came up. Checked if mod_expires is loaded by the server and it is.
However server on which our site is hosted is not using PHP5, does this maybe cause the problem? If not, then what can be causing the error?
Thanks in advance
I'm wondering if I'm getting dinged for some affiliate tracking image code that doesn't seem to have a future expire header?
ad.linksynergy.com/fs-bin/show?id=YvXPSOxXAIo&bids=173903.10000025&type=4&subid=0
This is the link that spits out in YSlow. Is there someway I can update my .htaccess to cover this too? I have 4 affiliate images (images on my server) but this tracking image is on theres, probably to track traffic on my site(impressions). Any ideas?
No you can't, this is loaded from a different server.
Tried it on a different site, same server, and I went from a D 69 to a C 70, the only thing that really changed was my eTag score that went up to a B.
I get the impression that I'm missing something.
I added it on my site (I am running super cache) and it did nothing. :) No errors, no change in YSlow score ( D 65). Tried moving it to different places in the .htaccess code and still nothing. Cleared my cache, nothing.
Seems like it could definitely help, but not sure what is wrong. calling my host next . . . .
It is possible that you already have similar settings in place
Vladimir, your whole site was very slow tonight for some reason. Nothing renders for 10-15 seconds, then the whole page renders in a flash.
You caught a server reboot :)
Yes, this works with wp-super-cache. I use it. Adding gzipping to .htaccess is a good idea since Super Cache doesn't gzip anything else other than the html page.
If you're getting a 500 error then you should perhaps check for mod_headers around the etags line. All of this sort of thing should be protected with if statements just in case the module is missing. 500 errors are kinda dull.
I wrote about this and quite a few more optimizations and links to blogs about .htaccess at http://icanhazdot.net/2010/03/23/some-wordpress-stuff/
I have to tidy this up into a couple of blog posts and post all of my .htaccess code in one chunk (actually, I just did that). The samaxes site I link to is a great reference for .htaccess, especially for WordPress.
I repeat the question asked above but unanswered. I am using wp super cache. Should I still do the changes in . Htacess file?
Before
Grade C - Score 75
After
Grade B - Score 86
Thanks a lot for the great tip Vladimir!
BTW, I have some older sites hosted on GoDaddy and all of them throw a 500 error after editing the .htaccess. Probably don't have mod_expires loaded like you said...
Before .htaccess: Overall performance score 56
After .htaccess: Overall performance score 82
Hi Vladimir: About the ExpiresDefault and the ETags:
Your optimization seems oriented for sites that use multiple servers to distribute content. However, if a site uses only one server and has Etags enabled, then it'd be simpler to not apply at all the FilesMatch rules that you suggest, and just let the browser rely on the Etag, right?
The tip just follows YSlow best practices recommendation - it's not oriented towards any setup in particular. Killing Etag at least gets headers smaller when expires are set.
Just want to double confirm, is this works with WP Super-Cache plugin? Because I have enabled GZip compression in that.
I'm planning to put it on all of my 3 blogs so its better to get your approval.. :)
This is great tip. It's a strange that I had this in the vhost file and it was not working. I removed it from there, and added to htaccess and it works great. YSlow for one website went from C to A, and for another from D to B.
Now that's what I call improvement ;)
Thanks for the great tip! Simple and very efficient.
I'm hosting my static content via Amazon's CloudFront CDN and I have the option to set the headers for individual static files in my Amazon S3 bucket (using FF S3 Organizer Plugin).
Do you happen to know the code I should place for each file's header to accomplish the same effect as your code above?
Thanks again,
Alec
You lost me there dude. Same code? :)
I figured it out. It was simply the HTTP headers that I needed to add for each file.
Additionally, you may want to make a note about mod_deflate and explain that it's compressing those selected file types using your server's resources (CPU mainly) then serving them.
This may not be a problem for most people, but if your site uses many images (like a image gallery site) then it's likely going to slow down your server's performance ergo your site will appear slow too.
This post is a great review on this process: http://www.webperformanceinc.com/library/reports/moddeflate/
You should always set your headers far in the feature. This is simple, efficient and has no negative impact on CPU. It's the use of mod_deflate that should cause you to monitor your server's load balance to see if you're getting any unusual spikes due to mod_deflate's compression.
If i add this code to the bottom of the file , its throwing Error 500 all over. Do i need to put it before wordpress instruction in .htaccess file ?
Some hosting servers do not have mod_expires loaded. You should ask your hosting about enabling it.
Surrounding the ExpiresDefault entry with
should make the error go away until the mod_expires is actually enabled in your server.
When I use this code I have problems with my localhost installation. The code is only working if I comment out this.
ExpiresDefault "access plus 30 days"
to
#ExpiresDefault "access plus 30 days"
Make sure your apache loads mod_expires module
Hey Vladimir, thanks for the suggestion! Where in my wp 3.0 htaccess should I place this preferably? And will this interfere with any settings from the w3 total cache plugin?
You can place it at the end of the .htaccess file. There should be no interference with any plugin, but in any case you can easily remove it.