Feature Proposal: LazyLoad Images across all PageBuilder Content Types

[gil--]

trafficstars

I'd like to propose adding lazyloading to images in Page builder. This is a feature I would be willing to add and make a PR for but I'd like to confirm if it would be acceptable to the Page Builder core team.

Proposal Draft

Background

Several of our clients whom are currently using BlueFoot have pages with many images that could cause the page size to be >5mb in size. As a result we implemented lazyloading of images with progressive enhancement (intrinsic sizing + blur-up) to speed up initial page load speed and avoid shifting of content (images loads then page content shift down, etc.).

Feature Proposal

I'd like to propose adding lazyloading to all block images so that they only load when the user has the image in view. We use lazysizes. You set the image to data-src="" and with JS it then sets the image to src="" when it scrolls into view (or will scroll into view in X).

Intrinsic Sizing

Intrinsic is used so that the image still takes up the same space in the DOM until it loads. You can then set an inline transparent gif as the src to create intrinsic loading. Magento2 currently does something similar for the catalog page where the image is absolute positioned

Blur-Up

Blur-up is another technique we've used where we dynamically create a new image crop of ~40px in width and set it to 100% of the image container width. You can blur it into the full-size image. See example:

Implementation Details

This would require:

• adding lazysizes to page-builder as a JS vendor file
• adding the Less for hiding the image display: none until lazyload has loaded the image
• adding intrinsic and blur-up Less styling
• adding intrinsic and blur-up as optional selections (checkbox/dropdown) in the admin. there are use-cases where you do not want intrinsic sizing.

Example

You can see a live example on RileyHome which uses BlueFoot with LazySizes and images only load when they come into view. There's a background-color used as a placeholder until the image fully loads.

This is a rough draft of the proposal and I can flesh it out with more actual examples of code and implementation if you think it's something that would be accepted.