Browser-level lazy-loading from Silverstripe CMS

<%- if @topic_view.topic.tags.present? %>
<%= t 'js.tagging.tags' %>: <%- @topic_view.topic.tags.each do |t| %> <%= t %> <%- end %>
<% end %>

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, something that we are lucky to have support through Google’s Open Source CMS Fund.

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:

For readers here, please share your feedback or feel free to follow along on GitHub as links are shared.

First round of GitHub issues:

The team have created some design concepts for managing this setting on a per-image basis in the CMS user interface. Feedback welcome!

See: CMS field for managing image `loading` state · Issue #1214 · silverstripe/silverstripe-asset-admin · GitHub

As part of the Silverstripe CMS version 4.9 released in October, this work is now available for Silverstripe CMS projects to adopt. Some documentation that supports this work is as follows: