In keeping up with modern and supported web browser technology, we want to implement support for the browser-level lazy loading feature for images managed from the Silverstripe CMS.
This feature will make it possible to set images added to the front-end of a project, through the CMS, to have the HTML loading attribute set to “lazy”.
The high-level aim here is to work towards improving site performance of projects built with Silverstripe CMS and contribute to success factors such as:
- Reduce the initial load time of the web page.
- Increased conservation with system resources - conserving both server and client resources because only some assets need to be rendered.
- Bandwidth conservation - delivering content to users only if it’s requested.
With a few popular open-source CMSs such as WordPress, Joomla, and TYPO3 having already implemented support for the loading attribute on images, we’re taking reference from these implementations and following the recommendations outlined by Google, including:
- Enable lazy-loading by default for (which have dimensions set)
- Allow per-file modifications - both by a CMS user on a per image basis, and as a developer at a SS template level
- Provide options for global changes, like opt-out of applying the loading attribute completely
Some points noted as out of scope of this initial implementation:
- Built-in handling for images that are expected to be ‘above the fold’ and immediately in view. For this, developers can handle this within the templates they create.
- Lazy loading of iframes. This could be covered in a future phase if interest is strong.
This post acts as a high-level summary of the feature with issues captured in GitHub to track the individual development stories and pull requests. The aim is to have this feature as part of the next CMS release, version 4.9.
An early proof-of-concept and discussion was also had here: WIP: NEW Add loading attribute to images and iframes by emteknetnz · Pull Request #9864 · silverstripe/silverstripe-framework · GitHub
For readers here, please share your feedback or feel free to follow along on GitHub as links are shared.