Avoid an Excessive DOM Size in case of forms where country dropdown having 220 country list

Question

"I am trying to improve my pagespeed score. Currently getting "Maximum Child Elements" error in google lighthouse for country down in forms, whats the best approach to fix this. How to fix error "Maximum Child Elements""

Answer 1

According to the Lighthouse docs for this audit:

Lighthouse flags pages with DOM trees that:

• Warns when the body element has more than ~800 nodes.
• Errors when the body element has more than ~1,400 nodes.

When the audit fails, Lighthouse will show you:

• the total number of DOM elements on the page
• the element with the longest DOM depth
• the element with the largest number of child elements

The country selector is being flagged as the element with the largest number of child elements (220). This might make it seem like the country selector is creating the issue, but it just happens to stand out as one of the largest single contributors.

The solution IS NOT to compromise the UI by reducing the number of items (countries) in the select list, or to overcomplicate the app with a virtualized list. Instead, look at the hundreds of other DOM elements for opportunities to deduplicate or flatten unnecessary nodes.

Here are a couple of docs that provide guidance on minimizing DOM size:

• https://web.dev/articles/dom-size-and-interactivity#how_can_i_reduce_dom_size
• https://developer.chrome.com/docs/lighthouse/performance/dom-size/#how_to_optimize_the_dom_size