How to reduce an excessive DOM size

[supriya-hande]

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.

[Peter_Puzanovs · Accepted solution]

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

[aanchal-sikka]

@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?