views:

425

answers:

3

I am currently developing a web site with PHP + MySQL and jQuery. So far I have been doing it in my local machine. I notice that when I see the page the images on it take some time to load (few time but its visible). All images are small (PNG's with less than 3 KB). Now, when I load the page, there are some database connections happening in order to get some data that I will display.

I am not sure if this loading time issue has something to do with the amount of images, or with the time that the PHP script + the DB connections take to execute. (I have very little data in my database so I wouldn't assume this case.)

My question is: Is it a good approach to preload all the images in the beginning of each page? I tried it with jQuery and it works fine. I'm just not sure which disadvantages I can get with it. For example, to do so, I need to include the jQuery library in the beginning of the page? I thought it was a bad practice.

+1  A: 

You should use page speed plugin from google to check what data takes most of the time to load. It will show separate load times for images as well.

If you're using lots of small pngs I suggest you combining them into one image and manipulating the display via css background property since they are part of styling and not information. In that case - instead of few images only one will be loaded and reused through all elements. In this case even preloading of one image is really easy.

Eimantas
Thanks, I will try that approach!
Miguel
+1  A: 

Have you considered using CSS Sprites to combine all of your images into a single download? There are a number of tools online to help you do this, and it will significantly reduce the number of HTTP requests required by your page.

Make sure you have set the correct Expires header on your images to allow them to be cached.

Finally, take a look at YSlow which can provide you with futher optimisation tips.

Ian Gregory
A: 

If these PNGs are in the database -- not clear from your question -- don't do that. Serving images from a DB through PHP is not as efficient as letting the web server serve them straight from the filesystem. If the images are tied to particular records, just name the PNG after the row ID, so you can find it in a directory dedicated to storing those images.

I don't think preloading the images within the same page is going to buy you anything. If anything, it might slow the apparent overall page load time because the browser can only retrieve a fixed number of resources concurrently, typically 2-4. Loading images at the top of the <body> means there are other things at the top of the page "above the fold" that have to wait for some HTTP connection slots to free up. Better to let the images load in their natural order.

Preloading makes sense in two situations:

  • The image isn't shown by default, but is expected to be needed as the user interacts with the page. Good examples of this are the hover and click state images for rollovers.

  • The image isn't used on this page, but will be needed on the next. Good examples of this are any site where there is a clear progression from one page to the next, like in a shopping cart.

Either way, do the preload at the very bottom of the <body>, so everything else loads first.

Having addressed those two issues, run YSlow on your site. (YSlow is a Firebug plugin, so it only works in Firefox.) The beauty of YSlow is that it detects common slowdowns automatically, just by loading the page while the extension is active. It then gives you a clear grade for the page, so you can judge when you're "done" optimizing. If you're below an A, you're not done. :) It's not uncommon to see sites rating a D or worse, because the default configuration for web servers is conservative to avoid causing problems. Fixing YSlow warnings is generally pretty easy, but you have to be careful to avoid creating caching and other problems, which is why the default server config doesn't do these things.

If all else fails, fall back to Firebug's Net tab. I imagine it's like the Google plugin someone else here mentioned, in that it gives a waterfall graph showing how long each page element takes to load. If it's true that they're basically the same, the best reason to use one over the other is that you need Firebug anyway, to run YSlow and as a debugger for Firefox.

Warren Young