How to improve pages with a lot of pictures

A feedback on a particular time consuming issue : when you have a page with a lot of images, small or larges, it can take some time to load the whole page.

For one of our customers, we deal with an optimization issue directly linked to the number of content set in eZPublish.

The feature was to show a category with thumbnails of products just beside.

In content meaning, we have the following :

• Summary [Folder]
  • Category 1 [Folder]
    • Product 1 [Article]
    • Product 2 [Article]
    • Product 3 [Article]
    • ...
  • ...

At the beginning it was fine, we just have some product and 3 three categories but now, we are dealing with ten categories and almost 40 products. So, for the summary folder, we have large amount of content data fetched and shown.

Using classic cache mecanism as SmartCache did the trick for the compilation but we still had a problem : two many small images were loaded on the same page and it increased the number of HTTP calls. So for one basically called page, it generates around 200 HTTP calls !

This could be detected using Firebug (Network tab) or Pagespeed (Pagespeed Activity tab).

The analysis was quite simple : we have to avoid to load every images at the page load.

So we follow differents tracks :

• Put all the pictures on the same image and use the Sprite trick : can be done but needs a specific mecanism (how to regenerate the image if one of the product picture is updated ?). The cleaner but needs some deep development.

• Ajax : slice the HTML by categories and load the HTML / JSON data categories by categories. We had to develop the eZPublish module in order to do that. So we did not choose it.

• Jquery addon to lazily load pictures : avoid loading the pictures until the page HTML is totaly loaded and triger the HTTP calls on user event, like scrolling. Sounds simple and more efficient.

We finally chose to implement solution number 2, based on the lazy load plugin for jquery.

Some numbers :

• Initially :
  • Without cache : 40s to fully load the page
  • With cache : 30s to fully load the page
• With the jquery solution :
  • Without cache : 10s to fully load the page
  • With cache : 2s to fully load the page

Gain : 20x on this optimization. Thank's to Jonas Levaillant for his help on this issue.

More on my blog : http://www.wascou.org/eng/Company/Blog