Avoid an Excessive DOM size

According to Google developers, a large Document Object Model (DOM) tree can harm page performance in a multitude of ways -- network efficiency, load performance, runtime performance and memory performance.

  • Shipping a large DOM tree can often result in sending high levels of unnecessary bytes to a browser. If the browser is parsing too many nodes, it will result in slow page loads.
  • A large tree coupled with numerous intricate style rules can slow rendering as users interact with your page.
  • Using general query selectors such as document.querySelectorAll('li') can be unknowingly storing references that are unneeded.

How to avoid or fix this?

Some tips to improving performance through less DOM size:

  • Avoid using DOM nodes or DOM elements unless they are necessary
  • Find nodes that are not being displayed and eliminate them.
  • Make sure parent nodes have less than 60 or less child nodes
  • Minify CSS selectors for larger DOM trees