How do I optimize this CSS3/many images for performance?

Question

Here is the link to site

There's a few things going on here I'd love to tweak, I'm not quite sure what else I can do though.

Thumbnails and favicons are pulled via external services, and I'd rather not setup reverse proxy to cache them. Normally, the images are supposed to fade in smoothly when they load (in a sort of 'random' order, it gives it a nice effect).

Youll notice when the page loads, it seems to be a bit choppy though, I think because the twitter script loading at the same time as all the thumbnails fadein.

I have tried looking at several performance tools but I'm at a bit of a loss as to how I can improve this.

The only thing I can think of would be to maybe have twitter offset by a second or two.

Answer 1

You should look into image sprites and the HTML defer attribute. You should also consider packing scripts, moving them to the footer and merging them. The same goes for CSS, and, you should put them in two separate groups, this will cause them to be loaded in two "batches".

Answer 2

Download and install mod_pagespeed for the apache server

Or try google's page speed up service

Details on the image optimization component

Answer 3

You could always preemptively delay the display of images:

JQuery:

$(document).ready(function(){

  setTimeout(function(){
    $('img').css('opacity':'1');
  }, 2000);

});

CSS:

img{
  opacity:0;
  transition:opacity .5s;
}