The Unavoidables: Don’t Make Me Download a Lot of Crap; or, Sometimes You Just Deserve an F From YSlow, You Shameless Self-Promoter
Thursday, April 23rd 2009Rule #1: Minimize HTTP Requests (Don't make me download a lot of crap.)
I'm guilty of this one, I admit: I get a nasty F from YSlow for this trespass. On my front page (we shall not speak of the horror that goes on behind the scenes, once you leave my front page), I make you download 32 CSS background images in order to see all the graphics on my website. Is there a better way to go about doing this? Absolutely! Am I too damned lazy to redesign my graphics to appease Rule #1? You bet!
In all seriousness, however, Yahoo! recommends some (semi-doable) solutions. One idea is to combine all your CSS background images into one enormously fat image, and then use background-position to display portions of that image in different visual areas of the page.
Quite frankly, this is an insane suggestion for a site with any degree of design complexity, but it can be done. You just have to be crazy enough.
Another way is to merge your stylesheets into a single .css file. Same for your scripts (you can use a server-side language to combine them on the fly, for example). Really, you shouldn't need to apply multiple stylesheets to a small-scale blog (or even a medium-sized website). The argument is that, if you can get your reader to download and cache all your styles up front (minified and compressed), her browsing experience across your entire site will be breezier, since that single CSS file encompasses all your selectors. If she's a good girl she doesn't empty her cache often, and we tell her browser to do so on a weekly or monthly basis.
Closing recommendations:
- Use 1 stylesheet for the whole site. Minify and compress it.
- Merge as many of your javascripts into one file as you can, then minify and compress that file. Some of them can be tricky to merge, due to the way they need to load on a page (such as Shadowbox or prototype setups), but if you can turn 5 scripts calls into 2, it's better than doing nothing at all.
Rule #2: I am my own CDN, goddamn it!
Well, the truth is simply that if we weren't all talentless self-promoting hacks, we'd have the cash to shell out for our very own CDN (Content Delivery Network) and ace YSlow's number two performance rule: Use a Content Delivery Network. Too bad we subsist on Frosted Flakes and other people's half-baked marketing schemes. Rule #2 is an "unavoidable," yet another grim reminder that YSlow is just better than us, and there's nothing we can do about it.
Except cheat, of course. To "ace" rule #2, simply tell Firefox that your server is in fact a CDN, and YSlow will be none the wiser.
- Type about:config into Firefox.
- Type "cdn" into the Filter search field.
- You'll see extensions.firebug.yslow.cdnHostnames pop up; double-click on the Value field and then add your domain "mydomain.com" to the list. If there's domains in the list, separate them with commas and put a space before each domain: dquinn.net, mydomain.com, lame.com; etc.
Refresh a lot, close Firefox, reboot your computer, take a shower, mow the lawn. Eventually YSlow will begrudgingly concede that your server counts as a CDN and give you much-deserved praise.
Rule #9: Don't be a social media slut: Reduce DNS Lookups
This one classifies among the unavoidables because, well, if you really want to integrate social media with your site, you're going to increase DNS lookups. Every lookup for a resource on a server that's not where your website is causes parallel downloading, which in turn slows everything down. On some pages, for example, I hook up with Google's Picasa, various investors' Netflix, and Viacom's Lastfm simultaneously to insert feed data into my pages (scandalous!).
My benefit is that these services help manage my activity so that I don't have to (yes, I realize that sounds very Orwellian), but the problem is that I'm passing my laziness off on your browser.
Conclusion: Some sacrifices must be made. Try to connect to social media on inner pages, rather than landing pages, so as to speed up load times and reduce your bounce rate.
