Question

I have been tasked with optimizing a marketing landing page for speed. It already does really well, but the problem is its very graphic heavy.

The entire thing I would guestimate is 30+ pages long all on one page (It must be like this, and everything must be images due to conversion reasons).

Here’s what I’ve done so far but I’m not sure if there’s something else I’m missing

1. I re-compressed over a 140 jpg’s on the page to slightly smaller sizes
2. I played around with sprites but most of the images are all large (like entire testimonial boxes that are 600px wide). The sprite images ended up being like 2mb. That page actually took longer to load for some reason (by almost 2s) so I took them off
3. The MOST important thing is that everything immediately at the top loads as fast as humanly possible and before anything else so that the sale isn’t lost by someone starting at a bunch of images loading out of order. I used some preaching images with this method: http://perishablepress.com/press/2009/01/18/css-image-caching/ – It did seem to work quite well on the smaller images, but when I add the background (which is very graphic intensive) everything seems to slow down at once, like its trying to do a certain number (5?) of images at a time. Ideally I’d love to group the first 4 smaller images being pre-cached, and then follow it up with focusing all bandwidth on the background, then the rest of the entire page in standard order..
4. Google Page Speed score is 90/100. the only thing its concerned about is unused styles but that I’m not really concerned about because its about 2kb total… the overhead from the 7mb of images is way more important.
5. I have the option to use a CDN for the images but I’m not sure how I’d go about doing this or if it would actually help?

I feel I’ve done all I can but then again I could totally be missing something…

Answer 1

• A CDN would definitely help. And with 140 pictures, I hope it
  contains more than just server. Just link directly to the IP of
  the servers, to avoid unnecessary DNS lookup.

• Minimize HTTP requests. You mention that you’ve been experimenting
  with sprites. I still believe sprites to be the way to go, but you
  might not want to create just one, huge image. If you have 140
  images, you should probably have about 10 sprites.

• Make sure that you have set headers to make the client cache all
  content. Remember ETags.

• Gzip/compress content for browsers that allow it.

• If the source code is lengthy, make sure to flush the buffer early.