If you’re running a heavy-app, you most likely will end up looking for ways to optimize its load time. Sometimes the issues are in your JS code, but many times it comes down to how many resources the browser has to load. Loading many JS files and images is generally not good because of the number of HTTP requests that your browser will have to make. And sometimes doing JS processing on your images can cause slow downs as well. Here are some ways that you can speed up the images on your app:
1) Limit transparent PNGs. Unless you are a Facebook or Apple, you probably don’t have the clout to ask users to upgrade from IE6. And in any real-world website, you’ll want to support both IE6 and do transparent PNGs. The way to do this is adding ActiveX filters to your images. But this is an expensive operation, so instead of having many transparent PNG icons you may want to consider serving up GIFs where possible for IE6 users. It may require having extra images around, but you’ll see an improvement on the page load.
2) Consider using CSS background images. If you have a large image to load or many small images that are not essential for the app, consider moving them from img tags to background images in a CSS selector. The document will start loading and rendering instead of waiting for all the images to load. Some browsers won’t even display the page until all the images are downloaded and this should solve that.
3) Use image concatenation. If you have a few images that are all the same size (e.g. toolbar icons), make them all one image side-by-side. Then you can use background-position in your CSS to display different parts of the image. The trick here is that you’ll be saving many of those expensive HTTP requests to the server.
4) Correct response headers. This one is probably a no brainer. But you’ll want to be sure that your web server is sending the correct headers in the HTTP response so that the browser knows how to cache the images.
5) Load images in Javascript. If you have a few large images (say for a front page news bulletin), it maybe best to preload them using new Image() while displaying a loading indicator. This will at least get the rest of the site loaded and processed.
A really good tool to use for inspecting the resources of your app is the Net section of Firebug. Here you’ll see the files have been fetched via HTTP, whether or not a subsequent HTTP request returned a not modified response, the file sizes, the load time, and also just as important, the order that the resources were fetched.
by