After my team launched a new site design and blog system for the Yahoo! Developer Network, I decided to review the performance of this site to see where it could be improved. In summary, after removing one performance-hogging widget and following recommendations from YSlow and Page Speed, the site should be running much faster now.
This site is running on a shared web host from Pair Networks and is powered by Movable Type. It’s not a very complicated site, but is a good illustration of the improvements possible by following web performance best practices.
My first step was to run the home page through WebPageTest to get a good overview of the problem spots. I was surprised to see about 60 JavaScript and image requests just for the Lijit search widget! On the plus side, they do have expires times set for the images, and no cookies are going back to the lijit.com domain, but this is still a ton of content to be loaded for the first-time viewer. Based on these numbers, and the fact that I was just experimenting with it, my first step was to remove the Lijit widget.
After removing the Lijit widget, the numbers improved dramatically:
| Measure | Original | After Remove Lijit | Improvement |
|---|---|---|---|
| YSlow | 78 | 83 | 6% |
| Page Speed | 74 | 83 | 12% |
| Requests | 59 | 17 | 71% |
| Size (KB) | 257 | 173 | 33% |
| Doc Complete (sec) | 4.0 | 1.88 | 53% |
With the big piece out of the way, now I could focus on the remaining issues, uses YSlow, Page Speed, and WebPageTest.org as my guides. I implemented a series of improvements:
- Removed Mint tracking; the Mint UI looks cool, but this is redundant with Google Analytics which I’m already using
- Removed Yahoo! Buzz badge; I don’t think anyone ever “buzzed” one of my stories so this isn’t needed
- Added gzip compression for text files (HTML, CSS, JavaScript) served off my domain; I didn’t realize that my host provider had mod_deflate installed, so I was able to configure it via .htaccess files
- Reduced image size by converting PNG files to 8-bit, and then running everything through SmushIt
- Changed Google Analytics to use the asynchronous version
- Merged separate print CSS into the main stylesheet, using “@media print” designators
- Modified my CSS/JavaScript combo handler to include Last-Modifed and Vary headers in the response, for improved cacheability
- Minified JavaScript using YUI Compressor
- Minified CSS using cssmin.js
- Moved images from cantoni.org to Amazon S3 hosting
After all of the above, the results compared to the original were pretty good:
| Measure | Original | Perf Changes & Remove Lijit |
Improvement |
|---|---|---|---|
| YSlow | 78 | 96 | 23% |
| Page Speed | 74 | 97 | 31% |
| Requests | 59 | 14 | 70% |
| Size (KB) | 257 | 77 | 70% |
| Doc Complete (s) | 4.0 | 1.28 | 68% |
Observations and further things to investigate:
- Google Ads still drag down the page grades a bit, but don’t have a huge impact on page load time so I’m leaving them in for now; I’m only running ads on individual entries now, not on the home page
- WebPageTest helped me understand lossy optimizations beyond SmushIt; for example converting 24-bit PNG to 8-bit, and saving JPEG with lower quality level
- I tried using YUI Compressor to minimize my CSS, but it broke the site layout slightly, so need to investigate this further
- One of the Page Speed recommendations is to minify the HTML; I tried that manually and found about 5% further reduction in delivered file size, but it’s not easy to implement on the dynamically-built Movable Type pages so will ignore that rule for now
- The images are on Amazon S3, but not yet hosted via Cloud Front which is a true CDN; I plan to do some testing with this both ways to see how much it helps
- I’d like to work S3 and SmushIt into Movable Type workflow, hopefully in a plugin
Overall this quick makeover was a good illustration of the available performance tools. Like any optimization, you need to make sure to measure first to identify the slow spots. I would also suggest not blindly following every recommendation, but aim to solve things in the proper way for your own environment.