Mirage ensures that pages load as fast as possible by deferring image loads

Jun 14, 2013 11:27 GMT  ·  By

CloudFlare is introducing a new website optimization tool. Mirage 2.0 aims to lower bandwidth consumption and speed up page load, especially on mobile devices. It does this by optimizing when and how images load.

It's based on the current Mirage, but goes much further than the existing tool. For example, rather than storing images in several pre-set sizes, Mirage 2.0 now stores a very low-quality copy which the browser can fetch and then get on with loading and rendering the rest of the page, what is called "lazy loading."

This way, a page loads significantly faster and the good-quality images are loaded when it's feasible. This means that users will notice a poor-quality image at first, but it also means they get a page on their screens significantly faster.

The optimizations go further. With Mirage enabled, websites can ensure that only the images the user actually sees are loaded, and anything below the fold is only loaded when needed.

You can see this in action on Imgur, on album pages. Only one or two images, depending on how many fit on the screen, are loaded first, and the others come in as you scroll down.

Imgur has been using Mirage 2.0 for a while and is quite satisfied with the results. For a site its size, even small optimizations can result in significant savings.

The new tool is available to all CloudFlare users, but is not free. CloudFlare uses quite a bit of resources managing the images, so it has to charge for the service.

Mirage works on all sites, but it was designed for mobile use in particular. For example, it can detect whether a visitor is on a slow 3G connection and serve strictly the images needed. On Wi-Fi though, all the images on the page are eventually loaded, even those not visible at first.