Mads Kristensen, after reading my report about the score given by YSlow to his and other blogs, improved his score and challenged me to do the same.

After 20 days, recovering from the time zone shift, and after a few days of holidays, yesterday evening I finally managed to try and improve my score: with some manual tuning to the CSS, the JavaScript files and Subtext masterpage I improved my score by 77% (28 points, from 36 to 64). I didn't beat Mads's score which is 67 (was 71 at the time of the challenge), but his improvement was 15 points, which is almost half of my score improvement. Furthermore the skin of his blog is not as graphic as mine and he never uses images in the content of the posts: YSlow gives the score based also on how many files don't comply to a certain rule, so having 10 content images without expires header and with ETag produce a score that is lower than having no image.


So, even if I didn't beat his score (only for 3 points), I'm pretty happy with the results, since it's the most I can get without touching the server settings (which I can't since I'm on a shared hosting plan) or reducing the graphic richness of my blog (both skin and contents).

Plan to a better YSlow score

Even if YSlow's most important rules are Gzip the content, remove Etag and add an Expires Header, I noticed that reducing the number of components also improves a bit the score related to that rules since it reduces the number of files that are not compliant.

Here is the list of the changes I made to my blog:

  1. I minified all the JavaScript files using the YUI JavaScript compressor tool that is now part of Subtext build process
  2. I merged all the minified files into one file
  3. I also merged all the CSS into just one file (leaving outside only the styles for printing)
  4. Then I changed the skin definition to use the Gzip handler developed by Rodiniz to serve the two merged files
  5. Last I changed a bit the masterpage to include the JavaScripts at the bottom of the page and exclude the default style

I wanted to use CSS Sprites to merge the CSS background images, but that would have exceeded the 4 hour limit of the challenge, so I left it out.

Unfortunately the WebResource.axd file cannot be compressed, and this is where the B comes from for rule number 4.

This is a manual tuning, but I'm planning to automate the merging process so that all the blogs powered by Subtext can benefit from this performance improvement.

PS: Someone might say that Mads's score is not not 67 but somewhat higher: this is because if you "AutoRun" YSlow the DOM tree is parsed sometime before the onload is complete, while if you run the tool manually, it will include also everything that an onload handler might have added to the DOM. So I always tested, today and in my previous list, running YSlow manually after the page has completely loaded.

Technorati tags: ,