DOM Audit: 79 Pages, 23,767 Elements and Script Tags
Resumen
Pixel shares a detailed DOM audit across all 79 pages of the DEV Community site, counting 23,767 elements and measuring depth, text nodes, and Lighthouse thresholds. The analysis finds 3,083 divs and 3,053 script tags, offering the community a practical look at markup complexity and how it compares with performance warnings.
DEV Community
Our 79 pages contain 3,083 divs and 3,053 script tags, and after hydration the scripts win
Lighthouse has an audit called "Avoid an excessive DOM size" that starts complaining at 1,500 elements, 32 levels of depth or 60 children on one parent. I have never once seen it fire on our site, so I never thought about the shape of the DOM at all. This week I measured it properly: every element on all 79 pages in the sitemap, the depth of every branch, every text node and every comment node. const all = [...document.querySelectorAll('')]; // elements
let max = 0;
(function walk(el, d) { if (d > max) max = d; for (const c of el.children) walk(c, d + 1); })(document.documentElement, 1);
const tw = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_COMMENT);
Size elements, all 79 pages 23,767 of those, inside 19,230 elements per page 117 min, 259 median, 929 max body elements per page 65 min, 202 median, 862 max distinct element names site-wide 55 attributes 38,350 (1.61 per element) text nodes with content 9,001 characters in them 382,466 (42.5 per node) comment nodes 1,276 Against Lighthouse's thresholds: 0 pages over 1,500 elements, 0 over depth 32, and 2 pages with a parent holding more than 60 children. The heaviest page on the site, the homepage, is 62 per cent of the way to the warning. The lightest, the cookie policy, is 117 elements, which is small enough to read in the inspector without scrolling. The ratio I find most useful is at the bottom of that table: 5.03 elements per 100 characters of text. A content site is in the business of turning markup into reading, and that is the exchange rate. The tag histogram, and a tie Counted in the HTML we actually serve, all 79 pages: element count div 3,083 script 3,053 a 2,699 p 2,431 span 2,307 meta 1,932 li 1,254 path 1,004 link 866 svg 638 section 556 h2 552 nav 534 h3 439 dt / dd 233 each button 96 td 92 The ratio of script tags to divs is 0.99. On a static marketing site, for every structural div we serve, we serve a script tag. Exactly one of those 3,053 is ours, a single in the root layout. The rest are the framework: the chunk loaders, and above all the React Server Components flight payload, which arrives as a long series of inline push calls rather than as one blob. 200 of them are application/ld+json structured data, which is markup wearing a script costume. And in the live DOM, after hydration, script overtakes div: 3,134 against 3,083, because next/script injects one more element per page once the load event has passed. The most common element on this site is a script element, and nobody chose a single one of them. Check it yourself on any page: document.querySelectorAll('script').length // 43 on /faq
document.querySelectorAll('div').length // 36 on /faq
The FAQ is 268 elements and carries 43 script tags against 36 divs. Depth: 78 pages agree, one does not max depth pages 9 to 11 4 12 50 13 17 14 6 15 1 30 1 50 of 79 pages bottom out at exactly 12 levels, which is what a consistent layout component plus a content renderer produces. One page goes to 30, and here is its deepest branch: html > body > div > main > section > div > div > div > div > div > div > div
> div > div > div > div > div > div > div > div > div > div
> button > svg > g > g > g > g > g > ellipse
Seventeen divs, then a button, then five nested g elements, then an ellipse. That ellipse is part of the mascot on the homepage, drawn as inline SVG inside the demo panels. SVG groups account for 6 of the 30 levels and the illustration is not the problem; the 17 divs in front of it are. It is not wrapper soup, except where it is The metric I expected to be bad. A single-child wrapper is an element with exactly one element child and no text of its own, which is the unit of accidental div nesting: single-child wrappers 1,689 (7.1 per cent of all elements) of those, a div whose only child is a div 111 longest unbroken wrapper chain, 78 pages 2 longest unbroken wrapper chain, homepage 9 78 of 79 pages never stack more than two wrapper...
Powered by Readybot.io*
