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.
After removing the Lijit widget, the numbers improved dramatically:
|Measure||Original||After Remove Lijit||Improvement|
|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
- 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
- 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:
& Remove Lijit
|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.