YSlow Experiment
Yesterday I was watching this video from Google I/O and one of the first things that mentioned is that the presenter is Steve Souders, former Chief Performance Yahoo! (joining a long list of former yahoo execs(Techcrunch)). The talk is interesting, but while Steve as at Yahoo he developed something called YSlow. I had heard of it before and I vaguely knew what it does. But I had never tried it.
So I downloaded the firefox extension and gave it a try. I tried using it here on this site to see how it would go. First run, I get a D. Which isn’t suprising since I am basically using the web-brains theme from byteflow with some tweaking. If you notice, the web-brains site also gets a “D”.
After trying to fix the various things that it recommends, I got my rating up to a “C”. C minus really since I’m sitting at 71 74. But that’s almost a 10 point improvement. Unfortunately, at the same time I created two javascript errors from two scripts in jquery. To be honest, they may have been there before, but I didn’t notice them until after I made the changes so I’m assuming that I did something wrong. But I was too tired last night to try and figure out what went wrong so I went to bed.
Another thing you may be interested in is that it was easier for me to get a higher score using nginx as the webserver rather than lighttpd. By a point or two better rating. I think it’s because it was easier to configure some of the web options for nginx than it was for lighttpd, though I don’t think I have either of them really properly configured. Actually, I generally have more problems with nginx than I do with lighttpd normally — largely because I really haven’t used it much so my knowledge of the configuration for ngnix is very superficial. But in this particular case, getting etags, gzipping, and expire working seemed like it “just worked”. There are a couple of directories on the server that for some reason I can’t get gzipped or set with expire. I’ll get there, but last night I gave up, largely because the configuration file was awfully blurry. ^_^;
One of the things that I noticed, though is that on a couple of the “rankings” it’s really hard to do anything about. For example, I use picasa for my images and embed them in a post. This has a couple of effects;
- I can’t control expire dates or whether they are gzipped and get down graded.
- secondly since it’s “off site” it causes a host lookup, getting me another bad grade. Now think about the way django works with a “media” web server, and you’re pretty much guaranteed a bad grade on this one. In the case of picasa, each picture is from a “different host”, making that much worse
- Until configured properly, you get downgraded for not using a “cdn”. By default, Yslow only uses yahoo I think, so any other location you server content from (your own media server, amazon, whatever) needs to get added to the profile or you get a bad grade.
So pretty much if you are embedding something from another site, like google analytics, pictures, or the Magnolialinks box I have on my sidebar, you are most likely going to get “downgraded”. But more importantly, it’s just something you can’t control unless you remove it.
After making the changes, I think there is a “slight” improvement. The real fundamental problem in this particular site’s case is more “backend” I think. I’ve got too many things running on a low-end box.
Video Take Aways
While I’m at it, let be give a brief overview of the take aways from Steve’s presentation.
- Generally Javascript before CSS
- Browsers block other “gets” until javascript is downloaded and executed
- However, only that javascript that is required for rendering the page
- Javascript should be lower in the page, i.e, right before body
- This refers to javascript not required for rendering, a la google analytics
- Use “Link” not @import for stylesheets
- Avoid inline scripts if possible
- put inline scripts before stylesheets
- avoid long executing inline scripts
