Lazy load images in Drupal with BLazy

Recently, we involved in a local project with Ecoparker.com. It is a directory of restaurants, cafes, entertainments, services, real properties ... in Ecopark Hanoi, Vietnam. This site is based on our best selling directory theme BizReview.

On this site, there is a page which lists all kindergartens around the area. It has 20 listings and will continue to grow. It is a very typical page built with Drupal views.

Kindergartens at Ecopark

By curious, we ran a PageSpeed Insight test, a Goolge provided test for accessing how fast your page is loading, to see how it performs.

The score on Desktop was 75, which is quite good. But let's see how we can improve it.

Page speed test - before

Scroll down to the Opportunities section which suggests how to help your page load faster, we see an interesting point "Defer offscreen images" with the suggestion:

"Consider lazy-loading offscreen and hidden images after critical resources have finished loading to lower time to interative

Page speed test - suggestions

Lazy loading is a technique that only serve content when it becomes visible to users, ie, when users scroll to it. If it is off screen, we don't load it to save bandwidth. It will be much useful when your sites contain a lot of images, so we don't have to load them all everytime an user browse the page. Only when the user scroll, images load and become visible.

It brought me to a question that how to lazy load on Drupal.

We had a look a the Blazy module, because it was a prerequisite of another module on our site. Previously we haven't been curious to know what it does. It turns out to be a very popular module with 30K+ sites reporting using this module.

Looking in more details, this module is very promising:

On private benchmarks, Blazy saves a page with lots of images from 14MB to 3MB, 200 http requests to 20, loading time 30s to 3s. Elevating performance grade from F/E to A/B via gtmetrix. Overall ~5-10x better.

On the description page, Blazy offers:

  1. Blazy as field formatter
  2. Blazy filter as HTML filter (on your CKEditor)
  3. Blazy Grid as Views style

That's all we need, so we started to get our hands dirty.

1. Install module:

Install and enable the module as usual, via the admin interface or composer: https://www.drupal.org/docs/8/extending-drupal-8/installing-drupal-8-mod...

Note: if you use Slick module for slideshows, it requires Blazy 1.0. But to get Blazy as a HTML filter, you need the 2.0 version.

2. Blazy configuration:

Blazy configuration is available at /admin/config/media/blazy. There are a bunch of options, like custom placeholder image, offscreen view port etc ... You are good to go with default settings.

Drupal Blazy UI configuration

3. HTML filter

Just go to /admin/config/content/formats, edit the Full HTML format, and enable the Blazy filter.

Drupal Blazy filter as HTML filter

Your HTML content will be automatically applied Blazy filter, ie, images and iframes will be lazy loaded. On our project, we found that images lazy loading works properly, but iframes do not. Not sure why, but we will come back for it at a later time.

4. Views

We editted the view page, on the Image field, there is a new Image format. Choose Blazy and set the image style, Save it.

Drupal Blazy on Views

All images on this view based page are now lazy loaded. If you scroll fast enough, you will see the placeholder are blinking first, then your images will show. Awesome!

After that, we ran the PageSpeed Insight test again.

Page Speed test - after

As you can see, the issue with "Defer offscreen images" is gone. The point have raised to 81, which is slightly better. That's what we need.

In conclusion, please consider to apply the lazy load technique to all of your Drupal sites, as it is highly recommended for a high performance site.

 

Subscribe to our mailing list

* indicates required