I've got a page on a webapp that has about 13 images that are generated by my application, which is written in the Kohana PHP framework. The images are actually graphs. They are cached so they are only generated once, but the first time the user visits the page, and the images all have to be generated, about half of the images don't load in the browser. Once the page has been requested once and images are cached, they all load successfully.
Doing some ad-hoc testing, if I load an individual image in the browser, it takes from 450-700 ms to load with an empty cache (I checked this using Google Chrome's resource tracking feature). For reference, it takes around 90-150 ms to load a cached image.
Even if the image cache is empty, I have the data and some of the application's startup tasks cached, so that after the first request, none of that data needs to be fetched.
My questions are:
- Why are the images failing to load? It seems like the browser just decides not to download the image after a certain point, rather than waiting for them all to finish loading.
- What can I do to get them to load the first time, with an empty cache?
Obviously one option is to decrease the load times, and I could figure out how to do that by profiling the app, but are there other options?
As I mentioned, the app is in the Kohana PHP framework, and it's running on Apache. As an aside, I've solved this problem for now by fetching the page as soon as the data is available (it comes from a batch process), so that the images are always cached by the time the user sees them. That feels like a kludgey solution to me, though, and I'm curious about what's actually going on.
Edit: A commenter asked to see the headers for the request:
Request
Request URL: http://domain.com/charts/chart_name/1234/
Request Method: GET
Status Code: 200 OK
Request Headers
Cache-Control: max-age=0
Referer: http://domain.com/home/chart_page
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.55 Safari/533.4
Response Headers
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection: Keep-Alive
Content-Length: 6354
Content-Type: image/png
Date: Wed, 26 May 2010 21:10:45 GMT
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive: timeout=15, max=94
Pragma: no-cache
Server: Apache
X-Powered-By: PHP/5.3.1
With the image cached, the only difference in the response headers is:
Content-Length: 1129
Keep-Alive:timeout=15, max=96
I am looking into the strange difference for the content length, as it should be the exact same content. I realize that this is likely not optimized in terms of getting the browser to cache the image, but once the image is generated once, the entire page load (including downloading images, scripts, etc.) takes about 1-2 seconds. Without the images cached on the server, the page load is taking 20-30s and several of the images fail to load at all.