View Single Post
  #7 (permalink)  
Old 18-03-2008, 05:04 PM
PaulClark PaulClark is offline
Junior Member
 
Join Date: Mar 2008
Location: Kent, UK
Posts: 24
Default

Firstly, nice site!

On first access, the site did feel pretty slow to load. I think this may be more perception than reality, because nothing at all seemed to load for a few seconds, then the whole site came up more or less at once. If the page had 'built' in the browser over the same period, it might have felt quicker.

Looking at the network timings in Firebug, I see a total of 130 requests in 10.71 seconds - which actually isn't bad; back to the perception thing.

Going more into the detail, there is a whole chunk of time in the middle of the load downloading all your animated gif images for the rollover states on your Social Bookmarking links. This seems to be occupying almost 8 seconds. I think this may be where your problem is, as there are lots of these images, and they are about 1 - 2 K each.

I would suggest you first try removing the whole social bookmarks section from your page and re-test. If this is confirmed as the problem area, I suggest redoing all your social bookmarks as just 3 images.

Here's how:
  • Firstly, notice that your social bookmarks are all exactly 20px square, and in every case the mouseover image is the same as the 'normal' image but with the addition of a 'pulsing' border. This means your animated images are downloading lots of bytes to do the same things over and over again.
    .
  • Make a 20px square transparent gif, with nothing in it. ('bookmark.gif') Use this GIF for EVERY one of your social bookmarks.
    .
  • Make a 20px square transparent animated gif ('bookmark_over.gif) with a pulsing border but otherwise nothing in it. This will be your mouseover image for EVERY one of your social bookmarks.
    .
  • Arrange all your social bookmarks into one big image (bookmark_sprite.gif). This might as well by 4 rows by 9 columns of icons, just as you have now. Ensure that each icon is centred in a 20px square grid space.
    .
  • Now use CSS to use the bookmark_sprite.gif image as background on EVERY one of your social bookmarks, using the background-position directive to control which icon shows through the transparent bookmark.gif / bookmark_over.gif image.
This is all a fair chunk of work, but right now you have 35 social bookmark icons and 35 mouseover icons, making 70 individual requests to your server out of a total of 130. Getting these down to just 3 requests will make a big difference to your loadtimes.

Have fun!
Reply With Quote