Browser-based lazy-loading now available for module image field

AJLaPorte
HubSpot Employee

Most modern web browsers support browser-based lazy loading of images through an HTML attribute. Setting the "loading" attribute to "lazy" defers loading of the asset until just before it's needed. We've updated the image field to allow for controlling that attribute.

 

What’s happening?

To give developers and content creators control of this loading attribute, we've added new properties to the image field.

 

The “loading” field property can now be set on image fields inside of custom modules to allow for the deferring of image loading. Developers are also able to control whether or not content editors are able to set the loading attribute through the in-app editor by showing or hiding controls using the “show_loading” attribute in the fields.json file. This gives developers a way to prevent usage for situations where lazy would not be appropriate for technical reasons.

 

These properties can also be set through the design manager's module editor.

The Lazy-loading properties for the image field are now available. Learn about lazy loading assets for performance on HubSpot.

2 Replies 2
Ntbrown
Contributor

Why would you not set lazy loading as the default...... You only need items above the fold to not be lazy loaded which is typically only one.

 

Sure you'll have a few people not understand and it's a breaking change, that can be mitigated by running current sites through a critical parser and detecting which are above the field and re-injection, but entirely possible and it's 2020.

 

This is literally no better than not having it all. You still have to click on every single image constantly and enable lazy loading. It's still a round about way of doing things and didn't improve anything at all. 

I may as well just still open the source code and edit it. It takes just as long.

0 Upvotes
jmclaren
HubSpot Employee

Hi @Ntbrown as you noted it would be a breaking change to force all images to be lazy loaded by default on all existing websites.
We are aware it can be desirable to have most of the images on a site lazy load. Understand, this is an incremental update to enable you to take action right now in a way that is non-breaking.

 

We're constantly improving performance on the CMS on multiple fronts and will announce further updates when those features are ready.

Jon McLaren

Sr. CMS Developer Advocate

If my reply answered your question, please mark it as a solution, to make it easier for others to find.