Improve your web site performance – tips & tricks to get a good YSlow rating
When YSlow was released to indicate how well a web site performed, there were a lot of people disappointed, and perplexed, by their own score. Overall, I think performance is underrated, so I thought I’d give you some short guidelines how to improve the performance of your web site.
YSlow, for those not familiar with it, is a tool based on the research done by Steve Souders (ex-Yahoo!, now Google) and the Yahoo! performance team, to help people improve web site performance and find common bottle-necks.
The rules and their values
In YSlow, there are 13 rules, which have different values in the overall score, that goes from 0 to 100 (the one rule that has fallen out from the original 14 rules in the High Performance Web Sites book is about AJAX and caching). These are, with respective point values (taken from Dissecting YSlow):
- Rule 5 – Put CSS at the top
- Rule 2 – Use a Content Delivery Network
- Rule 11 – Avoid redirects
Rule 1 – Make fewer HTTP requests (CSS Background images)
Rule 7 – Avoid CSS expressions
What rules to care about
This is where it becomes a little bit more interesting. Most rules everyone agrees about, but there are some that has caused a little bit of a controversy in there. While YSlow: Yahoo’s Problems Are Not Your Problems goes into detail a little bit more, I would argue that the only rule I would definitely want to be optional, and turned off by default, is the Use a Content Delivery Network (CDN) one.
Basically, using a CDN is about having your static content spread out through servers across the world, to offer something as geographically close to your end user as possible, and to meet traffic spikes in the most prepared manner. The fine print here is that CDNs are extremely costly, and the need for one really only applies to enormously high-traffic web sites such as Google, Yahoo! etc.
To force this rule upon us mere mortals with less than one million visitors per day or so is pretty much a waste. CDNs are a good thing, no doubt, but since it only applies to a minority, it should be left out. This means that the best score you can get for a web site is 90/100, so start considering 90 to be top notch/high score.
Some other rules can discussed, but generally, all the rest of them are good ones.
The bases for the following advice is that you have access to two files:
httpd.conf, which is located in your Apache installation folder, and
.htaccess, which is the root of your web site (if it’s not there, just create it).
How to Gzip compontents
Gzipping is the most effective way to compress files, and the way it works is that a web browser states to server that it accepts gzip when it makes a request, and the server then returns the content in a gzipped format. This means that what’s sent over the wire is much, much smaller, thus decreasing bandwidth usage and request time. After the web browser has received the file, it unpacks it and the file works in its original format.
httpd.conf and uncomment this line (for those new to this file, a hash mark (#) is used to comment out a line; just remove it to activate that line):
LoadModule deflate_module libexec/apache2/mod_deflate.so
This approach is rather based on compressing everything, and then specify which file types to exclude from that. Typically, you don’t want to compress images and some other formats, since they are already so compressed to begin with.
SetOutputFilter DEFLATE DeflateFilterNote ratio SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ \ no-gzip dont-vary SetEnvIfNoCase Request_URI \ \.(?:exe|t?gz|zip|bz2|sit|rar)$ \ no-gzip dont-vary SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
Covering up for web browsers which might fail
Naturally, there are web browser out there claiming to support gzip when talking to the server, but not living up to it in practice. Amongst these are Internet Explorer (shocker), at least up till version 6, so you can also add this to the file:
BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0 no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
An alternative way to Gzip
Chances are, your host maybe doesn’t allow you to edit the
httpd.conf file, meaning you can’t rely on Apache to do this for you. However, I found another way to do it through Reducing Bandwidth Usage when Deploying Web Applications. The idea is to locally gzip your files(s), and then name them with a
.gz.css extension, to get the web server and requesting web browsers to treat them as pre-gzipped files.
Open up the Terminal where your files are, and gzip them like this:
gzip -c originalFile > myDeployFile.gz.js
When it comes to the HTML content itself, many tools out there supports compressing it on its own (for you bloggers, WordPress has this under Options > Reading: “WordPress should compress articles (gzip) if browsers ask for them”).
How to configure ETags
ETags are HTTP headers, which identify when a file was changed. The basis is that a web browser will only get that file if the ETag has changed since the last request. There is a very simple way to tell Apache to add an ETag consisting of the file’s modified time and its file size.
Open up the
.htaccess file, add this line, and you’re good to go:
FileETag MTime Size
How to add Expires headers
First, let me explain how requests for a file works:
- If the visitor has an empty cache (in regards to your content), it will fetch all necessary files from the server.
- If the visitor has your files in the web browser cache, it still has to send a conditional GET request to your server, to compare if the last modified time of the file in the web browser cache is the same as the file on the server. If not, it fetches a new version of the file in question.
- If a file has a future expires value set, it won’t even go to the server at all until that time has occurred, thus leading to completely eliminating that request.
Therefore, using expires headers are extremely efficient for static files in your web site. To do it, begin with opening up the
httpd.conf file and enable the expires module:
LoadModule expires_module libexec/apache2/mod_expires.so
Then, open up the
.htaccess file and add what file types you want to set expires header for, and how long that time should be:
Another option can be to turn on expires header for everything:
ExpiresActive On ExpiresDefault "access plus 3 days"
The value needed to get a good YSLow grade is to have expires headers set at least 48 hours into the future, but in practice, you need configure the values that suits your needs the best. Note: If you need to push out new files to the end user and overriding the existing web browser cache, you either have to change the actual file names, or adding a query string to the requests with a new value. For example, changing 19 in the query string below to, e.g. 20, would force the web browser to get a new version from the server.
<link rel=”stylesheet” href=”/css/base.css?19″ type=”text/css”>
We want proof that this works!
Curious and hungry for knowledge, I naturally had to try all this out to improve the end user experience for you, my dear readers. The result of implementing the above solutions are a YSlow ranking for Robert’s talk of (mostly) 80, and for the DOMAssistant web site, a value of 88.
Someone visiting Robert’s talk for the first time will get 30 HTTP requests, while a returning visitor will only have 6 HTTP requests. Quite an improvement, right? 🙂
The reasons for not getting 90 (top score unless you’re Donald Trump, remember?) is, for Robert’s talk, my Flickr images and a couple of statistics scripts. With the DOMAssistant web site, it’s only statistics script holding it back from being top notch.
Internet Information Server (IIS)
- IIS 7.0: Configuring HTTP Compression in IIS 7.0
- IIS 7.0: Configure the HTTP Expires Response Header
Django, Apache, and Lighttpd
Also, if you want to read more about what I touched on above, I definitely recommend reading Tools for optimizing your website: Etag and Expire headers in Django, Apache, and Lighttpd.
Performance does matter
At the end of the day, I want you to get good web sites that are incredibly fast to load. Therefore, I sincerely hope you’ve learned something from this that will improve the future performance of the web sites you’ll be working on.
Good luck performing! 🙂
A big thanks, your post is excelent and came precisely when I need some informations about that.
But, I have just one note : Most of the time, visitors have a browser's cache full.. So, in that case configuring, ETags, Expire and GZip isn't a big improvement…
[…] Improve your web site performance – tips & tricks to get a good YSlow rating – Robertâ€™s talk … Improve your web site performance – tips & tricks to get a good YSlow rating (tags: web performance yahoo yslow) […]
Nice post Robert! Really enoyed reading it. GZipping content on the serverside is always the best way to start, as the gziping does a very good job. In my last project I have had a compression rate of almost 70%! This was especially good as it was a webapp with a quite complex ui written in js and a lot of ajax going on…
You couldn't notice the ajax request going on in the background after I turned on gzip compression.
But I would suggest to always develop without those things turned on at first, as it leads you to blow up your code because you think that it is compressed anyway… you should NOT! 🙂
This is from memory, so might be inaccurate, BUT!
One thing to note, is that it's usually better to use httpd.conf, or another .conf file on your apache server to set directives.
.htaccess files should be a last resort if you cannot modify your .conf files, as the server will evaluate it for each request instead of once, when the server starts.
Glad to hear that my timing was right. 🙂
With a full cache, ETags and Gzip won't matter that much, but Expires is still great, since it completely removes conditional GET requests for each file, to compare if the the web browser have the latest version in the cache.
Yes, the result is fantastically good! 🙂
Interesting to hear. If that's true, and one have access to the <code>httpd.conf</code> file, by all means, use that. If you find anything about this please let me/us know!
Robert, will you share your YSlow scores for these sites before making the above tweaks? – just curious. Thanks and really handy article. The YSlow team should link to this.
Thanks! I'd be very happy if they were to link to this article. 🙂
But if I remember correctly, it was somewhere between 50-60, so the improvement was substantial!
With the DOMAssistant web site, the irony is that I don't use any scripts on it (except for stats purposes), so the grade was already close to 70 when I started. Still, getting 88 is something I'm quite pleased with as well. 🙂
Do you recommend using gzip for css and js files if they are 20 to 30k or under?
I am having my host configure apache to add expires headers, and enable gzip, but they said that my stylesheets are too small to be worth it. Curious to know what you guys think, if there is a minimum size where gzip would not do you any good.
au.yahoo.com scores 75 ^_^
Nice! I've added most of them to my framework but wasn't sure about the ETags-one. Cheers for clearing that up.
From what I've read, at least, gzip is supposedly always a good idea as long as the files are over 1-2 kb.
Oh, wow. Maybe time for some internal spanking? 🙂
Regarding ETags, what might be interesting to know, with multiple servers and load-balancing, ETags might also be a less good thing. Then you can remove ETags completely from your files instead, in the <code>.htaccess</code> file:
[…] been allot of optimizing for me the last couple of weeks. I’ve been reading up on yslow issues, paths to a faster loading sequence, high performance websites and much much […]
Great article, thank you very much Robert! I am thinking to improve my web site performance. This articles will help me a lot!
[…] Robert Nyman, has written a great article about optimizing web site performance using YSlow: an add-on for Firebug for Firefox. In his article Robert presents not only the add-on […]
[…] du fÃ¶rbÃ¤ttra din sajts prestanda. Robert Nyman berÃ¤ttar mer exakt hur du gÃ¶r detta i artikeln Improve your web site performance – tips & tricks to get a good YSlow rating. Det handlar till exempel om […]
[…] stumbled upon an article of Robert Nyman about YSlow – a performance measurement Firefox add-in: Improve Your Web Site Performance – Tips & Tricks To Get A Good YSlow Rating. Because the tool presents not only the test results, but also helps you fixing the discovered […]
[…] Improve your web site performance – tips & tricks to get a good YSlow rating […]
I would also recommend to use this online free performance testing tool – http://Site-Perf.com/
It measure loading speed of page and itâ€™s requisites (images/js/css) like browsers do and shows nice detailed chart – so you can easily spot bottlenecks. It's very detailed and accurate, supports a lot of features like Keep-Alive and HTTP-compression.
Also useful feature is that this tool can measure quality of internet link of your server.
Thanks for the tip, seems to be a addition! Developed by you?
Robert, you are welcome )
Yes, I'm author.
Hope you find it helpful.
[…] Tips To Get A Good YSlow Rating, May, 2008 […]
[…] performance, performance (for anyone interested in delving deeper into that, please read Improve your web site performance – tips & tricks to get a good YSlow rating). For them, cutting down any HTTP request is crucial, although that’s no excuse for not […]
Article about mod_deflate settings like on Amazon EC2 AMI
[…] performance, performance (for anyone interested in delving deeper into that, please read Improve your web site performance – tips & tricks to get a good YSlow rating). For them, cutting down any HTTP request is crucial, although thatâ€™s no excuse for not having […]
Excellent information. I will use this in all my sites.
[…] Improve your web site performance – tips & tricks to get a good YSlow rating – Robert’s ta… […]
thanks for the great post. also conside checking Top 7 Easy-to-Apply Tips to Improve Your Web Site Performance
Thanks, glad you liked it!
[…] et… performance (ceux qui veulent approfondir la question plus profondément peuvent lire Improve your web site performance – tips & tricks to get a good YSlow rating). Mais bien que pour l’équipe de Google l’élimination de chaque requête HTTP […]
whoaahhh! another genius on the planet. Thanks for the advice sir. It really helps. I was looking so long for this, now that i've found it, i won't let you go (bookmarked!)…lol.
Just one more problem, regarding the gzip, my host, which is bluehost won't allow me to edit the httpd.conf. They said that i should use .htaccess instead. How can i do it in htaccess?
And one more thing, i also use w3 total cache wordpress plugin, do you have any thoughts about it?
thank you once again…may you have a nice day superman…
You can use the same code in <code>.htaccess</code>, which is just a file stored at the root of your web site.
I haven't used that WordPress plugin, so I can't really tell, unfortunately.
Good day Sir. That's a quick reply. Thanks again.
Which on is better? YSLOW? or Google Page Speed? I have heard that YSlow have some false positive issue, i've tried it my self, when i view my site in YSlow my score is 88, but my problem is with the ruleset "Compress Components with gzip"; it says that "There are 2 plain text components that should be sent compressed", specifically that 2 files are my css files.
I have check my site if it is gzipped at http://www.whatsmyip.org/http_compression/. Fortunately it is gzipped.
Anything i miss? Any help sir?
I would say that YSLow and PageSpeed complement each other.
I dont know about the assurance of that tool when it comes to checking if its gzipped or not, but if YSlow says that your CSS files aren't gzipped, I think it's correct. Just double-check to make sure.
I should note that if I go to the web site that your name is linked to, I don't get that message about the CSS files.
ei sir. Thanks for everything. I am able to fix it. it works. 🙂 Thanks for all you advices and your wonderful guide up there.
Now my site score a whooping 92 in YSlow. Only thing the gives me an F score is the CDN thingy. lol. Don't know how to set that up. I think it's expensive. But i have read that you can do it by creating a sub-domain on your site and point it there. Any ideas about it sir?
Just glad it helps. 🙂
CDN is generally something which you will need to buy, and it costs a lot of money. Overall, I wouldn't worry to much about that one. 🙂
ei sir, okay. i think a score of 92 isn't bad after all. Thank you so much for this great help. For added info. You can check this cool site too http://www.askapache.com/
God speed and more power
Nice! Good luck!
[…] As you might be aware of, I believe web site performance is truly a critical success factor, and I have written about it before in How to improve your web site performance – tips & tricks to get a good YSlow rating […]
[…] follow up on the topic of cutting down the number of HTTP requests that I mentioned in my posts How to improve your web site performance – tips & tricks to get a good YSlow rating and How to reduce the number of HTTP requests, I wanted to put together a good list of tools and […]
[…] How to reduce the number of HTTP requests […]
[…] How to reduce the number of HTTP requests […]
One thing to note, is that it’s usually better to use httpd.conf, or another .conf file on your apache server to set directives.
Absolutely, good point. However, depending on your host and other factors, people don't always have that as an option.
Read similar thoughts here
thx for the arcticle, but still confusing with CDN.
Don't worry too much about CDNs, as long as you see to the other things. 🙂
Here is the same post: 8 ways to speed up your website http://programmingdiscussions.blogspot.com/2010/0….
[…] Robert Nyman Remplis sous: Web Laisser un commentaire Commentaires (0) Trackbacks (0) (Souscrire aux commentaires de cet article) […]
very nice article robert .since this article is based on compression on the server side , i think it would have been good to mention compression method with php as well .here’s an example :
//your code here
here’s a more detailed article on website compression :
thank you for the great post. though it is all latin and greek to me, i would get my webmaster to follow the tips that you had provided.
Very helpful, these tips will really help me speed up my site and make it much more search engine and user friendly.