Image Loading in Today's Browsers

7th of September, 2011 03:11 PM

Update 2012-06-19: Unfortunately. some links from this older post is broken. I have decided to still keep the post though for any one interested.

I have recently gotten hired to develop a mobile version of the e-commerce site tingstad.se. I have chosen to use jQuery Mobile as my framework to ensure cross-browser compatibility and to be able to use PhoneGap to later convert the site into apps. As my first mobile (and jQuery Mobile) project I have been very excited to get it all done but I have also encountered some problems along the way. As loading time is critical in a mobile environment, I discovered a dilemma with how browsers work today.

What's the problem?

On any e-commerce site, images are always an important aspect, even on a strict B2B site. I believe however that loading time is more critical and a site definitely needs to be optimized for both. On tingstad.se, there are pages with more than 500 products, and hence images, which makes this tricky. A common way of presenting a lot of products on the same page is through hiding elements, i.e. you have 500 div-elements, but 480 has display: none as their style and then you apply JavaScript to provide pagination and filters (example).

Here comes the tricky part. Browsers today fetch the html, looks up all links (please correct me if I'm wrong) and then queues them based on in which order they occur in the html-document. Usually, 1-8 items (including CSS, JavaScript and other external files) are fetched simultaneously. A problem that occur when you combine this browser behavior with the above technique is that when the 20 products that doesn't have display: none; set (the 20 visible ones) aren't the 20 top div-elements in your page the browser will load all the other images first, which will cause significant time in between the user gets to see the 20 images s/he wants to see.

A test

In order to be sure about this I wanted verify this and test whether it was a mobile browser problem or a general problem. I came up the following script that should be pretty self-explaining: http://test.kaffesump.kodingen.com/image-test.php. Basically, it shows browser name/version/platform and the order in which the images were loaded. An optimal order would be 1-8. Please visit, it automatically saves your test and add it to the database.

Conclusion

No browsers today, neither desktop nor mobile, loads images in an optimal way based on CSS. I do understand that this might be largely due to the added time it would take to compute whether an image is shown or not, but I believe this could be a great feature if implemented properly in browsers. Another hot related topic is lazy loading (I did some quick googling on this issue when I tested it) but it's a completely different thing which will make the user wait for loading of images multiple times (whenever scrolling). A smart order of image loading could definitely help this problem, but pure lazy-loading, in my opinion, would not be a good thing to implement by default.

Workarounds

A workaround would be to not include the 480 products that are not displayed and add them later as needed, for example using jQuery Tmpl. A problem that occur is however that this will not be very SEO-friendly, as only the first 20 products will be visible to search engines. I can image a workaround around that would be to show all products and then remove the 480 that are not supposed to be visible through JavaScript. I'm a little bit uncertain though if that would help since the browser might have already gotten all the links/images before running any JavaScript. Something to investigate for another day. I can also imagine that this would hit the rendering performance of the browsers, especially mobile browsers that are known to have a very limited amount of memory available to them.

You can find the full code (except the DB structure) at: https://github.com/cjblomqvist/image-test

The Weblog

Carl-Johan Blomqvist