149

Product support

Visit this product's website for support.

Categories

Makes October CMS pages lazy-load images by default. This inserts into all images in the page content, the loading="lazy" attribute that is available as part of the HTML Living Standard and is available in all modern browsers, except Safari, since early 2020.

To prevent layout shifting, this attribute is only added automatically to images that have a defined width and height attribute. It will also ignore any images that have specified their own loading attribute as well, allowing developers to control the loading attribute as necessary.

A new setting is made available to the CMS Pages form, Lazy load images, which allows developers to disable lazy loading on a per-page basis.

Usage

Once installed, this plugin works automatically by listening into the cms.page.postprocess event. It will search for all img tags found in the page content and layout, and will automatically add a loading attribute with lazy as the value to all image tags that match the following rules:

  • Have a width AND height specified
  • Have no loading attribute already specified
  • Have a src or srcset specified

This instructs browsers to defer loading the image until it is almost in the viewport of the browser, thereby saving bandwidth for people who may or may not reach the image in its position in the content.

Lazy loading in this fashion is backwards-compatible - older browsers will ignore this attribute and will continue to eager-load the image as per the original behaviour of images.

Performance implications

This plugin has a negligible effect on performance, however, larger HTML pages or pages with hundreds of images may be affected, as this plugin uses a DOM parser to find and adjust all image tags in the DOM. It is recommended to use caching in these scenarios.

1.0.0

Initial version of Lazy Load plugin.

Nov 23, 2020