PageSpeed: Optimize DOM Size

Pages with a large DOM size with a large layout or style recalculation exceeding a duration of 40ms.

A large DOM can increase the duration of style calculations and layouts, impacting page responsiveness. A large DOM also increases memory usage.

How to Analyse in the SEO Spider

To populate this filter the PageSpeed Insights API must be connected via ‘Config > API Access > PSI’.

View URLs with this issue in the ‘PageSpeed’ tab and filter and use the lower ‘Lighthouse Details’ tab to click on the issue on the left-hand side, and see details of the DOM size on the right-hand side.

Bulk export the pages and DOM size details such as Total DOM elements, DOM depth and child elements via ‘Reports > PageSpeed > Optimize DOM Size’.

What Triggers This Issue

This issue is triggered when pages have a large layout or style recalculation exceeding a duration of 40ms.

• A large layout update involves over 100 layout objects (which are roughly elements).
• A large style recalculation affects more than 300 elements.

How To Fix

Optimise the DOM size by looking for ways to create DOM nodes only when needed, and destroy nodes when they’re no longer needed.

Learn how to measure the cost of CSS selectors and reduce style complexity.

Minimize the depth of the DOM by reducing unnecessary nesting and consider adopting Web Components to use the Shadow DOM. While this won’t reduce the DOM size, it does reduce the cost of style recalcs.