Lazy loading

Lazy loading

Martin Joergensen

When you do various performance analysis on your site – as you should do now and then – one or more of them are bound to recommend you to look into lazy loading.
Lazy loading should rightfully be called late loading, because that’s essentially what it is.

Let me illustrate with images, which are the most common candidates for late loading.
Normally, when a web page is requested by a browser, the server sends the full HTML as the first bit. This HTML is interpreted by the browser, and most likely contains requirements for all kinds of other things, often referred to as assets: it could be JavaScript files used for certain functions, sound or video files, but the absolutely most common and frequently used asset is images. Logos, icons, illustrations, photos and such, all contained in graphics files on the server, and all fetched by the browser and placed in the proper place so that you see them when you look at the page.

Modern browsers can start building the page already as the first HTML arrives, and if the code is properly made, it can make “holes” for the images and fill these holes when each image is transferred from the server to the browser.
Not all code is perfect, and if information is missing – like the pixel size of an image – the browser can’t make a proper representation of the page, but has to adjust it once the file arrives and the proper dimensions are known.
The page isn’t finished before all the assets are loaded, and if there’s a lot of images, page load times can be long.
So, the logic behind lazy loading is simple: don’t load the assets before they are needed. In the case of images, the rule is: don’t load an image unless it’s visible on the user’s screen.

That’s a pretty simple rule, and I actually don’t know why the browsers themselves don’t implement lazy loading of images. They could easily asses what’s visible and what’s not, and simply leave out the “invisible” images until the user scrolled them onto the screen.

Well, browsers don’t and therefore developers have to implement lazy loading themselves.
There are several lazy loading modules for Drupal, but I have chosen to use Image Lazyloader, which seemed to be the most updated and simplest of the modules available.

If things are working, this image shouldn't load before it's visible on the page

Martin Joergensen

Image Lazyloader is really easy to use: install and activate the module, go to its configuration and enable it, et violá! Your Drupal-rendered images are now first loaded when needed.
You can set different options for the loader, like when to load, whether to use a placeholder image and a throbber and whether to exclude certain pages from the function. But apart from that it runs right out of the box.
When a page is requested by the browser the usual

<img src=”image.jpg” />

is replaced with something like

<img data-src=”image.jpg” />

Once the image in this code comes into view (or is close to coming into view if you set that up), a small JavaScript will place the path to the image file in a proper src-tag and the browser will load the image.
The result is that a page with many images is finished loading much faster and once you start moving down that page, each image is loaded as it’s needed. If you never get to the end of the page, the last images are never loaded, and your user has saved some bandwidth and your server has too, as well as some server load and quite a bit of network communication.

If you – like me – have places where images are served by other modules than Drupal’s image module, you will have to modify your code to adhere to the data-src model. This is pretty easy in most cases, and actually all it takes to make the lazy loading work. Make sure your image code also contains width and height, which it always should anyway. That will enable Image Lazyloader to make placeholders the proper size before the images are loaded, making the unfinished page look like the finished one, just without images.