YSlow Shootout: Social News Sites

YSlow ShootOut will be a new feature, each Wednesday, where I will look at a few competing sites and how they stand up to YSlow’s scrutiny. While I am not sure it necessarily translates to any real value in terms of SEO rank or customer retention or conversion, it is always a good idea to try to speed up your site if you can.

This week’s contestants are Social News Sites! Digg, Reddit, Propeller, Fark, Hugg, and YCombinator, come on down!

Here are the simple scores as given by YSlow. As you can see, YCombinator wins handily with Reddit being the only other site even getting a passing grade. Below we’ll take a closer look at each category and see how things really break down.

1. Make fewer HTTP requests

This category is a no brainer. Fewer requests equals faster load. YSlow scores Reddit and YCombinator with an A each, although YCombinator has the edge with just 5 requests versus 21 for Reddit. Hugg is a little more bloated, Digg is chubby, and Propeller and Fark are downright obese with 100 requests and up just to show their homepages.

2. Use A CDN

As has been noted elsewhere, this category is pretty much a guaranteed F for any small sites, but that doesn’t really apply here. All of these are in the Alex top 100,000, most in the top 10,000. And yet almost all of these sites score an F, even after I added some of the CDNs they are using. The only exception was YCombinator which managed to get a D because it had so few other components on the page. Me, I ignore this field.

3. Add An Expires Header

Do not ignore this one. It can save you a bunch of requests for images and such for repeat visitors. Unfortunately, YSlow scores based on how many page components don’t have an expires header with a long lead time. This again gives the edge to pages with fewer components, although even that didn’t help YCombinator here. All of our contestants this week get an F. And really, why not expire your page images and styles sheets a month from load? It is not like Digg and company get regular makeovers. (Yes, I know Reddit just got a makeover, but the components that are shared with the old interface didn’t change so it still would have benefited.)

4. Gzip Components

A decade ago, this might have been questionable, although probably not an issue with the browser then. Now computers are easily fast enough to unzip things on the fly and browsers support the on-the-fly compression. There is really no reason not to gzip your HTML, CSS, and JS.

That said, let’s be a little more fair that YSlow. Reddit deserves its A. If it can be compressed, Reddit does it. Digg, Fark, and Propeller all have things that could be compressed, but most of them are ads served by someone else and thus beyond their control. Beyond those, I have to disagree with YSlow. Both YCombinator and Hugg deserve Ds in this category. Neither one compresses anything that they serve themselves, which is just wasteful. Reddit is the winner here.

5. Put CSS at the top

Another obvious optimization and As across the board. Next!

6. Put JS at the bottom

This is another point where YSlow’s optimization flies in the face of conventional wisdom. My understanding of good style is that you put all of your scripts in the header rather than scattering them here and there. Yes, it is best to run your scripts after the page has loaded, but that is what the onLoad event is for. The ones that get poor marks are the ones including stuff in the head where (I think) it belongs. Skip this one.

7. Avoid CSS expressions

CSS Expressions are a Microsoft invention that nobody else supports, so, basically, nobody uses it. This category is a no-op. Hence the string of As.

8. Make JS and CSS external

This is another BS category (hmmm, maybe I need to write an article about how to interpret YSlow results (oh wait, I did!)), since it just gives n/a for every page. Maybe there is a setting to turn this on, but I haven’t snooped around inside YSlow source since the latest upgrade.

9. Reduce DNS lookups

A ha! Back to the meat at last. This is one that matters, since the more servers you need to talk to, the more likely you are to encounter a slowpoke. Let’s see how many servers each page needed:

Reddit and YCombinator are the winners here. Digg, Propeller, and Hugg are worse, largely due to advertising being served elsewhere. And then there is Fark. Four different image servers in fark.net, Google analytics, and a number of different external ad servers give Fark a bloat that is 60% higher than its nearest competitor. The one possible redeeming factor here is that a number of those hosts may already have been looked up due to the prevalence of Google analytics and Doubleclick usage. But 21 lookups for one page view is a little extreme in any case.

10. Minify JS

This one surprised me when I first saw it in YSlow. Surely if you gzip your Javascript you don’t need to minify it too, right? Wrong. It turns out that even with the nice general purpose compressors we use nowadays, minified scripts still compress better than regular ones. Good to know. So, how much unminified Javascript are we talking about?

You’ve got to hand it to the YCombinator guys on this one, although Reddit is pretty close on their heels. Fark and Propeller’s problems again arise from externally delivered advertising, but Hugg and Digg have no such excuse. The bulk of their transgression comes from their own code.

11. Avoid Redirects

Everyone does pretty well on this one except for Propeller, who once again suffers at the hands of their advertising partners.

12. Remove duplicate scripts

If some of the others seem like obvious steps to take, this one should almost inspire a WTF moment. Who would include the same script twice? How about anyone using external advertising? Heck, if you have more than one AdSense block on your page, you’re guilty of this one. Again, our leaders are YCombinator and Reddit.

13. Configure ETags

ETag headers serve almost the same purpose as Expires headers. Instead of telling your browser when something needs to be rechecked, the ETag header gives it a way to tell if the thing needs to be reloaded. Personally, I think Expires headers are a better solution, since they actually reduce the number of requests made, rather than just reducing the volume of data being returned. In any case, using ETag headers is good policy and not particularly hard to do, but how well do these sites do?

Reddit wins here, although YCombinator, Propeller, and Fark do okay as well. Hugg and Digg, on the other hand, do pretty miserably. I should note that YSlow behaves very oddly with respect to ETags. It seems to only treat some of the Etags as valid when computing the score, but then on the Components page, it lists them all. As I would like to believe a browser is less judgmental than that, I go by the components page.

Conclusion

Clearly, YCombinator wins both in total score and by counting categories. To be fair, however, they do not (yet) have advertising on the site, which was the downfall of some of the others are places. Reddit, on the other hand, has done very well with their recent redesign, giving them a good YSlow score even with advertising. Digg, Fark, and Propeller could all take a page from Reddit’s book and streamline their sites a bit, although clearly their failings here are not hurting their popularity.

I must admit to being a bit disappointed with Hugg’s performance. While YSlow’s suggestions are intended to improve load time, many of them will also reduce Internet load in general. Since less load equals less average electrical usage per page view, an environmental web site should try to minimize the load they create. At the very least, compressing pages and adding expires headers is easy and helps a ton. Come on, guys.

Related Posts

• Understanding YSlow: What Matters; What Doesn’t
  YSlow by Yahoo! is a great little plugin for Firefox and Firebug. It looks at a page and uses Yahoo!'s Best Practices for Speeding Up Your Web Site to tell you how to make the page load faster. At l...