As part of my planning for 2010, I decided to write new vision statements for some of my web sites and put myself back on a content creation schedule.
This site (ardentdev.com) will now be updated every Wednesday, so stay tuned via the RSS feed or subscribe by email.
I decided to simplify the design, opting for a clean white background, more whitespace, and less colour. Hope you find it easier to read.
Page Size Optimization
One of my goals in redesigning the site was to reduce the page size a bit. I like to include images in my posts so going overboard on optimization wasn’t going to make total load time much better, but small improvements are always welcome.
To measure my optimization progress, I used YSlow. YSlow is a Firefox add-on that integrates with Firebug. Firebug is a web development add-on for Firefox. I highly recommend you hook yourself up with the Firefox + Firebug + YSlow triad of awesome if you do any web development.
My quest for page size reduction began with cleaning out the old WordPress theme. For example, by removing Recent Posts and Recent Comments from the footer, I reduced the amount of HTML and gained the happy side effect of reducing the number of database hits required to build a page.
ArdentDev.com serves its HTML content compressed. At the time of the design switch, the old theme was sending down 13.7K of compressed HTML for the home page. The theme changes reduced that to 12.4K. Dropping the number of posts shown on the home page from 10 to 5 brought things down to 7.7K. That’s 6K less than the original (not including images from posts no longer visible on the home page).
I did a clean up of the CSS files for the site as well. The site has a CSS file for web browsers and a CSS file for printing. With some editing and some whitespace removal, the CSS files went from 4.6K down to 3.2K. It was not a super thorough scrub of the CSS, but I trimmed another 1.4K.
The previous theme referenced nine images via the CSS file. I dumped all those extraneous little images, which knocked 29.8K off the page size. I then introduced a new logo that added back 2K. That left a 27.8K reduction, not to mention 8 fewer HTTP requests.
Net Gain (Well, Net Loss Really…)
The total reduction in page size came out to 35.6K as well as 9 fewer HTTP requests (not counting the request for the banner ad). For a broadband Internet user, the optimizations should make the home page load 1/10 to 1/4 of a second faster than before. Not a massive savings but a rewarding exercise as I searched for ways to reduce the bulk of the home page.
Everyone’s mileage will vary but please leave a comment about your own page optimization experiences.