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.
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.
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
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:
- Blazy as field formatter
- Blazy filter as HTML filter (on your CKEditor)
- 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.
3. HTML filter
Just go to /admin/config/content/formats, edit the Full HTML format, and enable the Blazy filter.
Your HTML content will be automatically applied Blazy filter, ie, images and iframes will be lazy loaded.
4. Lazyload iframe
On our project, we found that images lazy loading works properly, but iframes do not work by default.
After some investigation, we found a workaroud, by manually forcing iframes to lazyload.
First you need to turn off Video lazyload option on the Blazy settings tab of Full HTML filter.
After that, when you paste an iframe to CKEditor, for example, a Youtube video iframe:
<iframe width="560" height="315" src="https://www.youtube.com/embed/uLcS7uIlqPo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
You need to edit the HTML to add class and data-src, like this:
<iframe class="b-lazy" width="560" height="315" data-src="https://www.youtube.com/embed/uLcS7uIlqPo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Then iframes will be lazy loaded properly.
5. 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.
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.
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.