Been referring to this site for ages, and thought I should probably make an account and join in the fun!
Test result: http://www.webpagetest.org/result/100828_3R2D/
I have used some CSS sprites, particularly one called backgrounds.png. I have used the two images in that sprite once each, using the following CSS.
#mainheader, #background {
background:#000 url(‘/media/img/sprites/backgrounds.png’) no-repeat top left;
}
#mainheader {
background-position: 0 -643px;
}
#background {
background-position: 0 0;
}
Why does IE download backgrounds.png twice? I also have the file PIE.htc being downloaded twice…
(Any other optimisations are welcome!)
[hr]
Ah, seems that CSS3 PIE causes this problem on elements that it’s applied to. Useful to know. Still, any other optimisations are welcome!
Cool, glad you figured it out - I should probably start keeping track of a knowledge base for things like that because it’s a head-scratcher and usually hard to figure out.
Looking at the waterfall as well as the page itself I’d say step number 1 is to take a look at all of those 24-bit png’s which are freakishly huge and see if you can get by with 8-bit versions. I looked at the iPads one for example and I couldn’t visually tell the difference in photoshop between 24 bit and 8 bit (and it dropped from 230KB to 55KB). It looks like you’re using simple transparency which will work fine with png-8 as well. The 1.3MB for your page is pretty huge - on the order of CNN which is not one of the faster sites out there.
It does look like you’ve done a good job optimizing the number of requests themselves though. You’d get some pretty good bang on IE7 by merging your javascript files together (IE8 hides it because it loads them in parallel).
Thanks,
-Pat
I’ll try 8 bits again, I was concerned about the page size - my internet is fast so it’s not an issue, but I wouldn’t want a dial up user visiting it in it’s current state! When I made them 8 bit before they had very jagged edges around the transparent parts, as if they were a gif. I’ll try again!
Edit: Yeah, it seems that if I make them 8 bit, the edges are super jagged and looks rubbish. I don’t have Photoshop - if anyone feels like being lovely, could they convert an image such as http://focalstrategy.com/media/img/ipads.png to 8 bit and email it to my gmail account (rich.bradshaw)?
