Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

How to reduce an excessive DOM size

Avatar

Level 4

Hello All,

 

In Lighthouse report for our website it provides recommendation: Avoid an excessive DOM size
When we create AEM components it adds some extra wrapper class thats why DOM is getting increased if there is page having more components.

Is there any way we can reduce DOM size? Like any setting in AEM to remove wrapper classes or datalayer classes.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi Supriya,

 

To remove OOTB Generated divs you can add cq:noDecoration tag[1]

[1https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/decoration-tag.h...

 

In case if Lighthouse will still revert with issues, you would need to further look into your application.

 

Please note, that blank page with normal content should pass test, but page with heavy content on it may always trigger error just due to sheet size of the page on node elements.

 

Regards,

Peter

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi Supriya,

 

To remove OOTB Generated divs you can add cq:noDecoration tag[1]

[1https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/decoration-tag.h...

 

In case if Lighthouse will still revert with issues, you would need to further look into your application.

 

Please note, that blank page with normal content should pass test, but page with heavy content on it may always trigger error just due to sheet size of the page on node elements.

 

Regards,

Peter

Avatar

Community Advisor

@supriya-hande 

 

 

When a component is getting rendered on a page, an HTML element can be wrapped that component.

The reasons can be:

 

  • The component can only be edited if it is wrapped with an HTML element.
  • The wrapping element is used to apply HTML classes that provides Layout and Styling Information.

 

If you are trying to get rid of these, please be cautious and validate your components.

 

Are you observing this for OOTB WCM core components or custom components?


Aanchal Sikka