Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Automatically add lazyload attributes to img and iframe elements below the fold or outside of the initial viewport

Avatar

Level 4

1/11/23

Request for Feature Enhancement (RFE) Summary: AEM can determine (either exactly or by degree of likelihood) which HTML elements are above the fold and which elements are below or outside of the initial viewport. And AEM allows to automatically put a loading="eager" or loading="lazy" attribute, respectively, on those elements.
Use-case: The performance of web page and the user's experience can improve (sometimes drastically) if img and iframe elements are lazyloaded. To do this correctly, elements below the fold or out of the viewport (such as inside a carousel) should get a loading="lazy" attribute. Others should get a loading="eager" attribute (the default).This is a process that should take place after when a page is composed and sent to the dispatcher. AEM would also be the first CMS (as far as I know) to have such a built-in feature.
Current/Experienced Behavior: No such feature exists.
Improved/Expected Behavior: Adding of such a feature.
Environment Details (AEM version/service pack, any other specifics if applicable): 6.5
Customer-name/Organization name: Loterie Nationale Loterij
Screenshot (if applicable):  
Code package (if applicable):  
3 Comments

Avatar

Level 3

1/11/23

@jeremylanssiers Using AEM to apply dynamic behaviour for lazy loading simply isn't achievable as it would require content to always be served by the publish environment. The reason for this is for AEM to have any possibility of attempting to understand the client's browser, it would need that information to bypass the dispatcher cache and be handled directly by the publisher.

In these types of cases, the recommended approach is constructing templates in such a way that you can control lazy loading in a more predictable way but even then it can be tricky to get into a sweet spot due to the ever-growing variance in screen resolutions. Ultimately this falls back onto personal preference as to the approach taken but it is my firm belief that AEM should only be responsible for rendering content; not handling client-side logic.

Disclaimer: This is simply my personal take on such an idea.

Avatar

Administrator

1/25/23

@jeremylanssiers 

Thanks for proposing this idea

This has been reported to the engineering under the internal reference CQ-4351630. The product team will triage this request to verify feasibility based on the prioritization model. This post will be updated according to the Jira request status.

Status changed to: Investigating