✳flâneur — a map of the web's best reading

Avoid an excessive DOM size | Lighthouse | Chrome for Developers

developer.chrome.com · 480 words · saved by 1 readers

A large DOM tree often includes many nodes that aren't visible when the user first loads the page, which unnecessarily increases data costs for your users and slows down load time. Runtime performance As users and scripts interact with your page, the browser must constantly recompute the position and styling of nodes. A large DOM tree in combination with complicated style rules can severely slow down rendering and interactivity. Memory performance If your JavaScript uses general query selectors such as document.querySelectorAll('li'), you may be unknowingly storing references to a very large number of nodes, which can overwhelm the memory capabilities of your users' devices. Lighthouse reports the total DOM elements for a page, the page's maximum DOM depth, and its maximum child elements: Lighthouse flags pages with DOM trees that: In general, look for ways to create DOM nodes only when needed, and destroy nodes when they're no longer needed. If you're shipping a large DOM tree, try lo

Home Docs Lighthouse Avoid an excessive DOM size Stay organized with collections Save and categorize content based on your preferences. Warning: This audit has moved into the Optimize DOM size insight as of Lighthouse 13. For more information see What's new in Lighthouse 13 . A large DOM tree can slow down your page performance in multiple ways: Network efficiency and load performance A large DOM tree often includes many nodes that aren't visible when the user first loads the page, which unnecessarily increases data costs for your users and slows down load time. Runtime performance As users an

Explore this link on the map →

related reading