warwickp.com
Warwick Poole interwebs
CSS Sprites, minify, compression and 95 from YSlow.
View Comments
Nov 11 2009 (optimization)
My consulting company does enough WordPress work that I thought I would create a separate brand for our WordPress services. WP Icon was born. Do not laugh at my stock photos! In creating a quick site for this service, I thought I’d have some fun and try to get this new site to be as fast as possible with an hour or so’s work.
YSlow screen capture showing 95% A score for WPIcon.com
Back end performance
Briefly, I am using the Nginx Memcache module to fetch cached page content directly from Memcache without touching WordPress, or even the PHP interpreter. More on this setup in a future post.
Front end performance
I’ll focus on this here. I have met and heard Steve Souders, author of YSlow, give a talk on front end site performance. While some view YSlow as promoting either flawed, or at least premature, optimization techniques, I find the tool useful and thought I’d try to give my new site a 100% score, for fun. I really haven’t done much front end work recently. Here are the optimizations I made, some suggested by YSlow, some not.
CSS Sprites
I had not used the CSS sprite technique so I gave it a try. The basic idea is to put all images into a single image file and use CSS to assign visible portions of this image to various objects on the page. Theoretically you eliminate the file format / meta data overhead of each image, plus the network and protocol overhead of negotiating and loading each image. It’s pretty finicky work, and I’m not sure if I actually achieved optimization here. The numbers:
- Combined size of individual images (24 bit non-interlaced PNG): 295K
- Size of (unoptimized) combined sprite: 405K (+138%)
Additionally if I look at the page load size using FireBug, it tells me that Firefox has loaded multiple copies of the sprite image, bringing the total page size to 2.43MB. Is FireBug mistinterpreting what Firefox is doing?
PNG Optmization
I used Yahoo’s Smush.it tool to reduce the filesize of my sprite PNG.
Content Compression
Technically a backend optimization, but the optimization is delivered on the front end, I am using the Nginx gzip module to compress static content between the server and the client (browser). The numbers:
Minify JavaScript and CSS
The idea of minification is to optimize the delivery of JS and CSS content by combining the files into a single file and then stripping out whitespace and superfluous content (such as comments, etc). Since I am using WordPress, I used the handy WP Minify plugin. The numbers:
Move JavaScript to the bottom and keep CSS at the top
The CSS is minified and delivered in the head of the document by the plugin mentioned above. As for external JavaScripts, I am using the Google Analytics WordPress plugin which puts the GA JavaScript in the WordPress footer call.
HTTP Expires Headers
Because of the way my caching system works on the server, between Nginx and Varnish, all static and cacheable content types are given future Expires headers. This effectively tells the browser not to reload each object on each page load, making the site seem faster to the user.
Problems with YSlow
YSlow makes the suggestion that you use a Content Delivery Network to serve static objects. This is a valid suggestion for a large site, which wpicon.com is not. Regardless, YSlow has a flaw here, in that it does not recognize mapped/CNAME CDN URLs. So sometimes even if you are using a CDN, but on a URL scheme which is a subdomain of your site’s own domain, YSlow does not pick this up.
Conclusion
A quick excuse to play with sprites and YSlow, I got a YSlow score of 95 for WPIcon.com with about 30 minutes work.