December 05, 2011, 09:10:48 PM
After pulling a big image and a bunch of JavaScript from one of my sites - the Sexy Bookmarks thread - I wanted to see what else I could do.
Originally the
Web Page Analyzer was estimating about 6.5 seconds for the page to load. Way too slow. But taking out a giant CSS image along with the JavaScript that was required for the social bookmarking plugin that used the image got that down to 2.35 seconds.
Now it was time to play with
CSS sprites.
Basically, the more requests your page has to make, the slower it goes. For each file requested - image, CSS, JavaScript, whatever - there is a bit of latency in addition to the time actually required to download the file. And for small files the latency is longer than the download time.
Originally my site was downloading a total of 11 objects, which really isn't bad. Of those 11, 8 were images.
I took those images and combined them into a single PNG sprite, messed with the CSS a bit, and was able to get it down to a request time of 1.37 seconds with only 6 objects. Two of the images weren't able to go in the sprite because of the way they're used or it would have been 4 requests.
And now I'm a bit obsessed and am off to see what minifying the CSS will do.
Logged
It's telling me around 6.5 seconds for the first page load here. Around a quarter meg and 26 objects. 
