Today I took the time to streamline the new SureDev site and actually investigated what each aspect of the YSlow Firebug extension was complaining about. Since the solutions to each were relatively easy to implement but a bit scattered to find around the web, here’s a full list of the things I did in my .htaccess to go from a D-grade to an A.
Oh, this post assumes you’re using Apache, which is what I use. If anyone has advice on other webservers, please leave comments about it.
1. Make Fewer HTTP Requests
This one is pretty self-explanatory. If you have a bunch of images all over your site, you’re going to trigger this one. Try using a spriting technique for multiple little icons, or removing images all together.
Remember: people are looking for your content, and generally most of that comes over tied to your base document. Don’t weigh them down with bells and whistles unless it’s enhancing your content or enhancing the site’s brand.
2. Use a CDN
Alright, I cheated a little on this one. My website is small, and I don’t anticipate landing tens of thousands of hits per day. That said, it didn’t make sense for this one to be tearing my score down. My solution: add my own custom CDN host to Firefox’s preferences.
To do this, visit about:config.
Right-click in the window of settings and choose New » String. For the first window, enter extensions.firebug.yslow.cdnHostnames. Second, list the domain names that are serving up your content. No quotes, please, just a comma-separated list. And that’s it. Instant A (as I said, with a bit of cheating).
3. Add an Expires Header
You’ll need Apache to be configured with mod_expires for this one to work. This code can be placed in your site configuration, or — more conveniently — in your site’s .htaccess file. You’ll want to add at least two lines to this file:
ExpiresActive on
ExpiresDefault "access plus 30 days"
The first line turns on expire-headers, the second sets the default expiration for files sent. I went with “access plus 30 days” for now, but there are a bunch of other options.
4. Gzip Components
For this one, you’ll need mod_deflate installed. To enable this, add the following line to your .htaccess file:
AddOutputFilterByType DEFLATE text/html text/javascript
You can add as many MIME types as you wish to the end of this, just separate them by spaces. I actually had to add a few more to get everything nicely zipped, including text/css, text/plain, text/xml and application/x-javascript.
If you have a file or two that seems to not be getting picked up after installing this, you can use the Live HTTP Headers plug-in for Firefox, hit that file directly and see what MIME type the browser is seeing. Simply add this to the end of your line and you should be all set.
5. Put CSS at the Top
You should put all of your calls to CSS files in your page’s <head> tag. ;)
6. Put JS at the Bottom
You should put all of your JavaScript at the bottom of your page, right before the </body>. This is easy if you’re practicing unobtrusive JavaScript.
7. Avoid CSS Expressions
I’ve never used CSS Expressions, so I can’t really speak much for them, but you probably shouldn’t use them. Rather than that, use JavaScript or a server-side language to set classes on items you wish to change.
8. Make JS and CSS External
I got an n/a on this one, but as a general rule virtually all of my multi-page sites have externally included CSS and JavaScript files. Why? Because this way the browser can cache things, meaning less download time for your users.
9. Reduce DNS Lookups
Another one I haven’t really ever had a problem with. Ideally, you should have as few domains as possible serving up your content. This means to cut back on hot-linking. Browsers will cache DNS lookups, but the timing can be oddly short. (According to Yahoo!, Firefox only caches lookups for 1 minute by default.)
10. Minify JS
Your hand-written JavaScript files probably have a lot of comments and new lines in them, and while this is great for readability, these are all wasted bytes your users are downloading. Minifying your JavaScript removes all of these extra characters, but doesn’t obfuscate your code.
There are websites out there that will take an uploaded JavaScript file and return nicely minified versions to you. I’ve been using http://jscompress.com for my files.
11. Avoid Redirects
All of the files that you link to should be the files that you’re loading. Redirecting generally occurs when you link to something that has been moved. For older files, this a reasonable trade-off because who wants to go back and update every single include on sites that no one really looks at anymore?
Something may be said for planning out your file structure ahead of time so that you’re not always moving things around. That’s probably a full blog post of its own.
12. Remove Duplicate Scripts
This is exactly what it sounds like. This problem usually occurs when either teams working on a site start getting really large (the ol’ “too many cooks in the kitchen”), or the number of files that require keeping track of becomes overwhelming. For small- to medium-sized sites, I wouldn’t think this would be a problem.
13. Configure ETags
YSlow has a big explanation about ETags that you can read, but the most important line for me was at the end. If you’re not going to take advantage of ETags, turn them off. This is a simple one-liner in your .htaccess again:
FileETag none
Simple as that. This isn’t to say that ETags aren’t worthwhile, but if you decide that they aren’t something you need at the moment, specifying so in your .htaccess will speed things up and improve your grade.
And YSlow is Stunned
The new SureDev has gone from a D (63) to an A (96) with about fifteen minutes worth of work! And call me crazy, but page loads really do feel faster.
It’s worth noting: I’m still getting a B in Add an Expires Header because of the Google Analytics tracking script, but I can live with that for now.
I’ve tried yslow, but found some of its advice confusing and didn’t make the time to figure out what it was trying to tell me. Going through the advice in this post, my site went from an 81 to an 89.
I didn’t have an expires header, wasn’t gzipping components, and hadn’t configured ETags simple because I hadn’t seen how to do any of those things in a way that made sense for my needs.
This post is a great resource for anyone who wants to understand more about yslow.
Comment by Angelo Simeoni — April 4, 2009 @ 7:55 pm
Awesome, sir. I went through the YSlow results a while back and was a tad confused by some of the scores, and their properties. This provided some clarity, and gave me quick fixes that I didn’t know about before.
Comment by Marc Amos — April 6, 2009 @ 6:56 am