Images should be compressed to save transfer time

[mickdekkers]

May I suggest using CSS Sprites to bundle all the icons per mod?

Because browsers limit the number of concurrent requests a site can make, even on my high speed internet connection http://crafting-guide.com/browse/minecraft/ takes just over 25 seconds to load because of the hundreds of image files:

[andrewminer]

This problem has been on my mind for a while now. I've been thinking of either using CSS Sprites, as you suggest, or using Data URIs to just embed them all into a single file. Since the images are all rather small, that might wind up being easiest. Either way, though, would be a huge improvement. 😄

[andrewminer]

I'm afraid this is a bust. Both techniques create unacceptably large downloads (~7MB for sprites, and ~15MB for Data URIs) which wind up having to be downloaded in their entirety. Most users never actually see even a small fraction of those images, so it's not worth making the initial download really slow in order to do the prefetching.

[andrewminer]

I did, however, incorporate pngcrush to at least make the individual files as small as possible.

[mickdekkers]

Does that ~7MB for sprites include all sprites on crafting-guide.com, or only a subset? If it's all sprites, perhaps you could consider splitting them by mod, i.e. have one sprite file per mod. Also depending on what tool you use to create the sprites, there might be an option to limit the file size of the sprites; automatically splitting them if they get too big.

[andrewminer]

I did have things broken into parts, so the 7MB is the total. However, there's no way to know which ones the user will want to look at ahead of time, so you wind up having to download everything anyway. While the current behavior is less than ideal, it's still better than downloading 7MB of sprites files right off the bat.

[MggMuggins]

Would it be possible to have the server bundle the required images for the page requested into a custom sprite? Or to have each page have it's own individual sprite? Just a novice thought... ~Samwise

[andrewminer]

Possibly, but I don't think it's a priority right now. Since Crafting Guide is hosted on Amazon's S3, I'd need to create some code which would build such sprites for each of the 6000+ pages on the site, upload them to S3, and then write code for each page to be able to pick the right one for downloading. That would enormously increase the hosting cost (since you pay per MB stored with S3) and dramatically diminish the browser's ability to cache the images (since each file would be different, despite sharing a lot of content).

[MggMuggins]

Would it be possible to build the sprite every time the page was sent out, and not store it in the actual files? ~Samwise

[andrewminer]

No. As I mentioned, the site is just a collection of pre-computed files served from S3. There is no server available to perform the kind of computation you're suggesting. Even if there were, my suspicion is that it would still add a lot of latency to the request: more than what it's trying to solve.