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
widthANDheightspecified - Have no
loadingattribute already specified - Have a
srcorsrcsetspecified
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.
-
This plugin has not been reviewed yet.
-
| 1.0.0 |
Initial version of Lazy Load plugin. Nov 23, 2020 |
|---|