[{"data":1,"prerenderedAt":1065},["ShallowReactive",2],{"content:\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization\u002Ffixing-the-excessive-dom-size-warning":3,"surroundings:\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization\u002Ffixing-the-excessive-dom-size-warning":1057},{"id":4,"title":5,"body":6,"description":1036,"extension":1037,"meta":1038,"navigation":1050,"path":1051,"seo":1052,"stem":1055,"__hash__":1056},"content\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization\u002Ffixing-the-excessive-dom-size-warning\u002Findex.md","Fixing the Excessive DOM Size Warning",{"type":7,"value":8,"toc":1018},"minimark",[9,14,29,32,183,188,226,230,236,242,248,254,258,263,546,550,553,557,568,572,575,649,653,656,660,663,795,799,810,814,831,835,861,865,871,877,883,889,893,905,914,923,932,941,950,959,968,977,981,1003,1008,1011,1014],[10,11,13],"h1",{"id":12},"how-to-fix-the-excessive-dom-size-warning","How to Fix the Excessive DOM Size Warning",[15,16,17,18,23,24,28],"p",{},"This guide is part of ",[19,20,22],"a",{"href":21},"\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization\u002F","DOM Size & List Virtualization",", within ",[19,25,27],{"href":26},"\u002Frendering-css-performance\u002F","Rendering & CSS Performance",". Lighthouse's \"Avoid an excessive DOM size\" audit reports the total number of elements in the body, the maximum depth, and the element with the most children. It warns from about 800 elements and fails above roughly 1,400. The audit itself is a diagnostic, not a Core Web Vital, but it correlates strongly with slow style and layout, slow interactions, and high memory use — the real problems behind it.",[15,30,31],{},"Fixing it is mostly detective work: finding which regions of the page contribute most of the elements, then choosing the right technique for each. Usually a few regions — a mega menu, a product grid, a filter sidebar, a footer, a cluster of inline SVG icons — account for the majority.",[15,33,34],{},[35,36,42,43,42,50,42,54,42,57,42,75,42,83,42,89,42,97,42,104,42,109,42,112,42,116,42,119,42,123,42,129,42,133,42,136,42,139,42,142,42,146,42,149,42,152,42,155,42,159,42,162,42,171,42,175,42,179,42],"svg",{"viewBox":37,"width":38,"role":39,"ariaLabel":40,"style":41},"0 0 760 149","100%","img","Steps from measuring element counts per region to applying the right reduction technique and adding budgets.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[44,45],"rect",{"className":46,"x":48,"y":48,"width":38,"height":38,"fill":49},[47],"svg-canvas","0","#ffffff",[51,52,53],"title",{},"DOM size reduction workflow",[55,56,40],"desc",{},[58,59,60],"defs",{},[61,62,69],"marker",{"id":63,"viewBox":64,"refX":65,"refY":66,"markerWidth":67,"markerHeight":67,"orient":68},"fa2bd014fd","0 0 10 10","9","5","7","auto-start-reverse",[70,71],"path",{"d":72,"fill":73,"style":74},"M0 0 L10 5 L0 10 z","currentColor","fill-opacity:0.7",[44,76],{"x":77,"y":77,"width":78,"height":79,"rx":80,"fill":81,"stroke":73,"style":82},"1","758","147","10","none","stroke-opacity:0.18",[84,85,53],"text",{"x":86,"y":87,"fill":73,"style":88},"28.0","34.0","font-size:16px;font-weight:700",[44,90],{"x":86,"y":91,"width":92,"height":93,"rx":94,"fill":95,"stroke":95,"style":96},"56.0","108.8","71.0","6","#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[84,98,103],{"x":99,"y":100,"fill":73,"style":101,"textAnchor":102},"82.4","78.0","font-size:13px;font-weight:700","middle","Measure",[84,105,108],{"x":99,"y":106,"fill":73,"style":107,"textAnchor":102},"96.0","font-size:12px","count per region",[44,110],{"x":111,"y":91,"width":92,"height":93,"rx":94,"fill":95,"stroke":95,"style":96},"176.8",[84,113,115],{"x":114,"y":100,"fill":73,"style":101,"textAnchor":102},"231.2","Rank",[84,117,118],{"x":114,"y":106,"fill":73,"style":107,"textAnchor":102},"biggest",[84,120,122],{"x":114,"y":121,"fill":73,"style":107,"textAnchor":102},"112.0","contributors",[44,124],{"x":125,"y":91,"width":92,"height":93,"rx":94,"fill":126,"stroke":127,"style":128},"325.6","#ffc300","#b8860b","fill-opacity:0.24;stroke-opacity:0.9",[84,130,132],{"x":131,"y":100,"fill":73,"style":101,"textAnchor":102},"380.0","Choose fix",[84,134,135],{"x":131,"y":106,"fill":73,"style":107,"textAnchor":102},"defer, trim,",[84,137,138],{"x":131,"y":121,"fill":73,"style":107,"textAnchor":102},"paginate",[44,140],{"x":141,"y":91,"width":92,"height":93,"rx":94,"fill":95,"stroke":95,"style":96},"474.4",[84,143,145],{"x":144,"y":100,"fill":73,"style":101,"textAnchor":102},"528.8","Apply",[84,147,148],{"x":144,"y":106,"fill":73,"style":107,"textAnchor":102},"one region at a",[84,150,151],{"x":144,"y":121,"fill":73,"style":107,"textAnchor":102},"time",[44,153],{"x":154,"y":91,"width":92,"height":93,"rx":94,"fill":95,"stroke":95,"style":96},"623.2",[84,156,158],{"x":157,"y":100,"fill":73,"style":101,"textAnchor":102},"677.6","Budget",[84,160,161],{"x":157,"y":106,"fill":73,"style":107,"textAnchor":102},"CI element limits",[163,164],"line",{"x1":165,"y1":166,"x2":167,"y2":166,"stroke":73,"strokeWidth":168,"style":169,"markerEnd":170},"136.8","91.5","174.8","1.5","stroke-opacity:0.6","url(#fa2bd014fd)",[163,172],{"x1":173,"y1":166,"x2":174,"y2":166,"stroke":73,"strokeWidth":168,"style":169,"markerEnd":170},"285.6","323.6",[163,176],{"x1":177,"y1":166,"x2":178,"y2":166,"stroke":73,"strokeWidth":168,"style":169,"markerEnd":170},"434.4","472.4",[163,180],{"x1":181,"y1":166,"x2":182,"y2":166,"stroke":73,"strokeWidth":168,"style":169,"markerEnd":170},"583.2","621.2",[184,185,187],"h2",{"id":186},"rapid-diagnosis","Rapid Diagnosis",[189,190,191,199,210,220],"ul",{},[192,193,194,198],"li",{},[195,196,197],"strong",{},"Run Lighthouse"," and read the DOM size details: total, depth, max children and the elements reported.",[192,200,201,204,205,209],{},[195,202,203],{},"Count elements per region"," with ",[206,207,208],"code",{},"document.querySelector(sel).querySelectorAll('*').length"," for header, menu, main, sidebar and footer.",[192,211,212,215,216,219],{},[195,213,214],{},"Search for inline SVGs",": ",[206,217,218],{},"document.querySelectorAll('svg *').length"," shows how many elements icons contribute.",[192,221,222,225],{},[195,223,224],{},"Check hidden UI",": menus, modals, drawers and tabs rendered but not visible.",[184,227,229],{"id":228},"root-cause-analysis","Root Cause Analysis",[15,231,232,235],{},[195,233,234],{},"1. Hidden UI rendered up front."," Mega menus and modals on every page.",[15,237,238,241],{},[195,239,240],{},"2. Verbose components."," Cards and rows with many wrapper elements, repeated dozens of times.",[15,243,244,247],{},[195,245,246],{},"3. Long lists."," All products, comments or facet values rendered at once.",[15,249,250,253],{},[195,251,252],{},"4. Inline icons."," Each inline SVG icon adds several elements; repeated icons add up quickly.",[184,255,257],{"id":256},"step-by-step-resolution","Step-by-Step Resolution",[259,260,262],"h3",{"id":261},"_1-measure-by-region","1. Measure by region",[264,265,270],"pre",{"className":266,"code":267,"language":268,"meta":269,"style":269},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","const regions = { header: 'header', nav: 'nav', main: 'main', aside: 'aside', footer: 'footer' };\nconst out = {};\nfor (const [k, sel] of Object.entries(regions)) {\n  const el = document.querySelector(sel);\n  out[k] = el ? el.querySelectorAll('*').length : 0;\n}\nout.inlineIconElements = [...document.querySelectorAll('svg')].reduce((n, s) => n + s.querySelectorAll('*').length + 1, 0);\nconsole.table(out);\n\u002F\u002F trade-off: semantic landmarks are a rough partition; drill into the largest\n\u002F\u002F region with the same counting on its child containers.\n","javascript","",[206,271,272,322,335,374,394,436,442,521,533,540],{"__ignoreMap":269},[273,274,276,280,284,287,291,295,298,301,304,307,310,313,316,319],"span",{"class":163,"line":275},1,[273,277,279],{"class":278},"sPARh","const",[273,281,283],{"class":282},"sPXB4"," regions",[273,285,286],{"class":278}," =",[273,288,290],{"class":289},"saISM"," { header: ",[273,292,294],{"class":293},"sZ8jY","'header'",[273,296,297],{"class":289},", nav: ",[273,299,300],{"class":293},"'nav'",[273,302,303],{"class":289},", main: ",[273,305,306],{"class":293},"'main'",[273,308,309],{"class":289},", aside: ",[273,311,312],{"class":293},"'aside'",[273,314,315],{"class":289},", footer: ",[273,317,318],{"class":293},"'footer'",[273,320,321],{"class":289}," };\n",[273,323,325,327,330,332],{"class":163,"line":324},2,[273,326,279],{"class":278},[273,328,329],{"class":282}," out",[273,331,286],{"class":278},[273,333,334],{"class":289}," {};\n",[273,336,338,341,344,346,349,352,355,358,361,364,367,371],{"class":163,"line":337},3,[273,339,340],{"class":278},"for",[273,342,343],{"class":289}," (",[273,345,279],{"class":278},[273,347,348],{"class":289}," [",[273,350,351],{"class":282},"k",[273,353,354],{"class":289},", ",[273,356,357],{"class":282},"sel",[273,359,360],{"class":289},"] ",[273,362,363],{"class":278},"of",[273,365,366],{"class":289}," Object.",[273,368,370],{"class":369},"smZ65","entries",[273,372,373],{"class":289},"(regions)) {\n",[273,375,377,380,383,385,388,391],{"class":163,"line":376},4,[273,378,379],{"class":278},"  const",[273,381,382],{"class":282}," el",[273,384,286],{"class":278},[273,386,387],{"class":289}," document.",[273,389,390],{"class":369},"querySelector",[273,392,393],{"class":289},"(sel);\n",[273,395,397,400,403,406,409,412,415,418,421,424,427,430,433],{"class":163,"line":396},5,[273,398,399],{"class":289},"  out[k] ",[273,401,402],{"class":278},"=",[273,404,405],{"class":289}," el ",[273,407,408],{"class":278},"?",[273,410,411],{"class":289}," el.",[273,413,414],{"class":369},"querySelectorAll",[273,416,417],{"class":289},"(",[273,419,420],{"class":293},"'*'",[273,422,423],{"class":289},").",[273,425,426],{"class":282},"length",[273,428,429],{"class":278}," :",[273,431,432],{"class":282}," 0",[273,434,435],{"class":289},";\n",[273,437,439],{"class":163,"line":438},6,[273,440,441],{"class":289},"}\n",[273,443,445,448,450,452,455,458,460,462,465,468,471,474,478,480,483,486,489,492,495,498,500,502,504,506,508,511,514,516,518],{"class":163,"line":444},7,[273,446,447],{"class":289},"out.inlineIconElements ",[273,449,402],{"class":278},[273,451,348],{"class":289},[273,453,454],{"class":278},"...",[273,456,457],{"class":289},"document.",[273,459,414],{"class":369},[273,461,417],{"class":289},[273,463,464],{"class":293},"'svg'",[273,466,467],{"class":289},")].",[273,469,470],{"class":369},"reduce",[273,472,473],{"class":289},"((",[273,475,477],{"class":476},"sQw3B","n",[273,479,354],{"class":289},[273,481,482],{"class":476},"s",[273,484,485],{"class":289},") ",[273,487,488],{"class":278},"=>",[273,490,491],{"class":289}," n ",[273,493,494],{"class":278},"+",[273,496,497],{"class":289}," s.",[273,499,414],{"class":369},[273,501,417],{"class":289},[273,503,420],{"class":293},[273,505,423],{"class":289},[273,507,426],{"class":282},[273,509,510],{"class":278}," +",[273,512,513],{"class":282}," 1",[273,515,354],{"class":289},[273,517,48],{"class":282},[273,519,520],{"class":289},");\n",[273,522,524,527,530],{"class":163,"line":523},8,[273,525,526],{"class":289},"console.",[273,528,529],{"class":369},"table",[273,531,532],{"class":289},"(out);\n",[273,534,536],{"class":163,"line":535},9,[273,537,539],{"class":538},"sjfSM","\u002F\u002F trade-off: semantic landmarks are a rough partition; drill into the largest\n",[273,541,543],{"class":163,"line":542},10,[273,544,545],{"class":538},"\u002F\u002F region with the same counting on its child containers.\n",[259,547,549],{"id":548},"_2-defer-hidden-ui","2. Defer hidden UI",[15,551,552],{},"Render mega menu panels, modals and drawers on first open (with intent-based pre-rendering on hover or focus). For server-rendered menus needed for SEO, keep top-level links in HTML and render deeper panels on demand.",[259,554,556],{"id":555},"_3-trim-repeated-components","3. Trim repeated components",[15,558,559,560,563,564,567],{},"Audit the most repeated component (often a product card). Remove wrappers used only for spacing (use ",[206,561,562],{},"gap","), merge badge containers, and replace icon wrappers with CSS pseudo-elements or a sprite ",[206,565,566],{},"\u003Cuse>",".",[259,569,571],{"id":570},"_4-paginate-long-lists-and-facets","4. Paginate long lists and facets",[15,573,574],{},"Show 24–48 products with \"load more\" or pagination; show the top facet values with \"show more\". This often reduces elements by thousands on category pages.",[15,576,577],{},[35,578,42,581,42,584,42,587,42,589,42,592,42,594,42,601,42,608,42,613,42,617,42,621,42,625,42,629,42,633,42,637,42,641,42,645,42],{"viewBox":579,"width":38,"role":39,"ariaLabel":580,"style":41},"0 0 760 194","Bar chart showing how many elements each fix removed from an e-commerce category page.",[44,582],{"className":583,"x":48,"y":48,"width":38,"height":38,"fill":49},[47],[51,585,586],{},"Elements before and after, by fix (category page)",[55,588,580],{},[44,590],{"x":77,"y":77,"width":78,"height":591,"rx":80,"fill":81,"stroke":73,"style":82},"192",[84,593,586],{"x":86,"y":87,"fill":73,"style":88},[84,595,600],{"x":596,"y":597,"fill":73,"style":598,"textAnchor":599},"260.4","70.0","font-size:13px","end","Mega menu rendered on demand",[44,602],{"x":603,"y":91,"width":604,"height":605,"rx":606,"fill":126,"stroke":127,"style":607},"272.4","203.1","19","3","fill-opacity:0.7;stroke-opacity:0.9",[84,609,612],{"x":610,"y":597,"fill":73,"style":611},"481.6","font-size:12px;font-weight:600","1900elements",[84,614,616],{"x":596,"y":615,"fill":73,"style":598,"textAnchor":599},"101.0","Product card markup trimmed (72 cards)",[44,618],{"x":603,"y":619,"width":620,"height":605,"rx":606,"fill":126,"stroke":127,"style":607},"87.0","395.6",[84,622,624],{"x":623,"y":615,"fill":73,"style":611},"674.0","3700elements",[84,626,628],{"x":596,"y":627,"fill":73,"style":598,"textAnchor":599},"132.0","Facet values limited",[44,630],{"x":603,"y":631,"width":632,"height":605,"rx":606,"fill":126,"stroke":127,"style":607},"118.0","160.4",[84,634,636],{"x":635,"y":627,"fill":73,"style":611},"438.8","1500elements",[84,638,640],{"x":596,"y":639,"fill":73,"style":598,"textAnchor":599},"163.0","Icons moved to sprite",[44,642],{"x":603,"y":643,"width":644,"height":605,"rx":606,"fill":126,"stroke":127,"style":607},"149.0","96.2",[84,646,648],{"x":647,"y":639,"fill":73,"style":611},"374.6","900elements",[184,650,652],{"id":651},"verification","Verification",[15,654,655],{},"Re-run Lighthouse: the element count should fall below the warning threshold, or at least substantially. Record traces of key interactions to confirm style and layout times dropped. Check that SEO-relevant links and content are still in the HTML where needed, and that menus open quickly on first use.",[184,657,659],{"id":658},"worked-example-a-travel-comparison-site","Worked Example: A Travel Comparison Site",[15,661,662],{},"A travel comparison site's search results page had 11,800 elements: 50 results with 140 elements each (many nested wrappers from a component library), a filter sidebar with every airline and airport listed (1,600 elements), and a hidden \"compare\" drawer with full markup for every result (2,100 elements). INP for filter changes was 450ms on mobile. The team rewrote the result card (140 to 55 elements), limited filter lists to the top eight values with search for the rest, and rendered the compare drawer on open. Elements fell to 4,200, and INP for filter changes to 170ms. Moving result cards to a lighter structure also reduced the HTML by 35%, improving LCP.",[15,664,665],{},[35,666,42,669,42,672,42,675,42,677,42,680,42,682,42,687,42,694,42,698,42,702,42,705,42,709,42,713,42,717,42,719,42,722,42,724,42,727,42,730,42,734,42,736,42,739,42,741,42,744,42,747,42,751,42,753,42,756,42,758,42,761,42,764,42,768,42,770,42,773,42,775,42,778,42,781,42,785,42,787,42,790,42,792,42],{"viewBox":667,"width":38,"role":39,"ariaLabel":668,"style":41},"0 0 760 258","Common page regions that inflate DOM size and the usual fix for each.",[44,670],{"className":671,"x":48,"y":48,"width":38,"height":38,"fill":49},[47],[51,673,674],{},"Region-by-region fixes",[55,676,668],{},[44,678],{"x":77,"y":77,"width":78,"height":679,"rx":80,"fill":81,"stroke":73,"style":82},"256",[84,681,674],{"x":86,"y":87,"fill":73,"style":88},[44,683],{"x":86,"y":91,"width":684,"height":685,"rx":48,"fill":73,"stroke":73,"style":686},"91.8","30.0","fill-opacity:0.06;stroke-opacity:0.4",[84,688,693],{"x":689,"y":690,"fill":73,"style":691,"textAnchor":692},"38.0","75.5","font-size:12.5px;font-weight:700","start","Region",[44,695],{"x":696,"y":91,"width":697,"height":685,"rx":48,"fill":73,"stroke":73,"style":686},"119.8","306.1",[84,699,701],{"x":700,"y":690,"fill":73,"style":691,"textAnchor":102},"272.9","Typical elements",[44,703],{"x":704,"y":91,"width":697,"height":685,"rx":48,"fill":73,"stroke":73,"style":686},"425.9",[84,706,708],{"x":707,"y":690,"fill":73,"style":691,"textAnchor":102},"579.0","Fix",[44,710],{"x":86,"y":711,"width":684,"height":685,"rx":48,"fill":81,"stroke":73,"style":712},"86.0","stroke-opacity:0.35",[84,714,716],{"x":689,"y":715,"fill":73,"style":691,"textAnchor":692},"105.5","Mega menu",[44,718],{"x":696,"y":711,"width":697,"height":685,"rx":48,"fill":126,"stroke":127,"style":128},[84,720,721],{"x":700,"y":715,"fill":73,"style":107,"textAnchor":102},"1,000-3,000",[44,723],{"x":704,"y":711,"width":697,"height":685,"rx":48,"fill":81,"stroke":73,"style":712},[84,725,726],{"x":707,"y":715,"fill":73,"style":107,"textAnchor":102},"render panels on demand",[44,728],{"x":86,"y":729,"width":684,"height":685,"rx":48,"fill":81,"stroke":73,"style":712},"116.0",[84,731,733],{"x":689,"y":732,"fill":73,"style":691,"textAnchor":692},"135.5","Product grid",[44,735],{"x":696,"y":729,"width":697,"height":685,"rx":48,"fill":126,"stroke":127,"style":128},[84,737,738],{"x":700,"y":732,"fill":73,"style":107,"textAnchor":102},"2,000-6,000",[44,740],{"x":704,"y":729,"width":697,"height":685,"rx":48,"fill":81,"stroke":73,"style":712},[84,742,743],{"x":707,"y":732,"fill":73,"style":107,"textAnchor":102},"lighter cards + load more",[44,745],{"x":86,"y":746,"width":684,"height":685,"rx":48,"fill":81,"stroke":73,"style":712},"146.0",[84,748,750],{"x":689,"y":749,"fill":73,"style":691,"textAnchor":692},"165.5","Filter facets",[44,752],{"x":696,"y":746,"width":697,"height":685,"rx":48,"fill":73,"stroke":73,"style":686},[84,754,755],{"x":700,"y":749,"fill":73,"style":107,"textAnchor":102},"500-2,000",[44,757],{"x":704,"y":746,"width":697,"height":685,"rx":48,"fill":81,"stroke":73,"style":712},[84,759,760],{"x":707,"y":749,"fill":73,"style":107,"textAnchor":102},"top values + show more",[44,762],{"x":86,"y":763,"width":684,"height":685,"rx":48,"fill":81,"stroke":73,"style":712},"176.0",[84,765,767],{"x":689,"y":766,"fill":73,"style":691,"textAnchor":692},"195.5","Inline icons",[44,769],{"x":696,"y":763,"width":697,"height":685,"rx":48,"fill":73,"stroke":73,"style":686},[84,771,772],{"x":700,"y":766,"fill":73,"style":107,"textAnchor":102},"300-1,000",[44,774],{"x":704,"y":763,"width":697,"height":685,"rx":48,"fill":81,"stroke":73,"style":712},[84,776,777],{"x":707,"y":766,"fill":73,"style":107,"textAnchor":102},"sprite with use",[44,779],{"x":86,"y":780,"width":684,"height":685,"rx":48,"fill":81,"stroke":73,"style":712},"206.0",[84,782,784],{"x":689,"y":783,"fill":73,"style":691,"textAnchor":692},"225.5","Footer",[44,786],{"x":696,"y":780,"width":697,"height":685,"rx":48,"fill":95,"stroke":95,"style":96},[84,788,789],{"x":700,"y":783,"fill":73,"style":107,"textAnchor":102},"200-500",[44,791],{"x":704,"y":780,"width":697,"height":685,"rx":48,"fill":81,"stroke":73,"style":712},[84,793,794],{"x":707,"y":783,"fill":73,"style":107,"textAnchor":102},"usually fine",[184,796,798],{"id":797},"inline-svg-icons-and-sprites","Inline SVG Icons and Sprites",[15,800,801,802,805,806,809],{},"Icon systems that inline full SVG markup for every icon instance are a surprisingly large source of elements. A page with 150 icons, each with four or five child elements, adds 700+ elements. Switch to a sprite: define each icon once in a hidden ",[206,803,804],{},"symbol"," block and reference it with a short ",[206,807,808],{},"use"," element per instance, which adds two elements per icon instead of five or more. Alternatively, render decorative icons with CSS masks on pseudo-elements, which add no elements at all. Both approaches also reduce HTML size.",[184,811,813],{"id":812},"reducing-depth-as-well-as-count","Reducing Depth as Well as Count",[15,815,816,817,820,821,823,824,827,828,830],{},"Lighthouse also reports maximum depth. Deep trees usually come from wrapper chains — layout components nested inside each other, each adding a ",[206,818,819],{},"div",". Depth itself matters less than count, but it is a good indicator of wrapper overuse, and flattening it usually reduces count too. Modern CSS rarely needs extra elements for layout: ",[206,822,562],{}," replaces spacer wrappers, grid areas replace nested rows and columns, and ",[206,825,826],{},"display: contents"," can remove a wrapper's box when a component needs a DOM node for logic but not for layout (check accessibility, since ",[206,829,826],{}," has had issues with the semantics of some elements in older browsers).",[184,832,834],{"id":833},"common-mistakes","Common Mistakes",[189,836,837,843,849,855],{},[192,838,839,842],{},[195,840,841],{},"Optimising the wrong region."," Measure first; the biggest contributor is often not the obvious one.",[192,844,845,848],{},[195,846,847],{},"Removing content needed for SEO."," Defer interactive UI, not indexable content.",[192,850,851,854],{},[195,852,853],{},"Chasing the threshold only."," The goal is faster interactions; validate with INP, not just the audit.",[192,856,857,860],{},[195,858,859],{},"Slower first open of deferred menus."," Use intent-based pre-rendering.",[184,862,864],{"id":863},"edge-cases","Edge Cases",[15,866,867,870],{},[195,868,869],{},"Single-page applications."," DOM size accumulates across route changes if old views are not unmounted; check after several navigations.",[15,872,873,876],{},[195,874,875],{},"Shadow DOM."," Lighthouse counts elements in shadow roots too; web components can hide large subtrees.",[15,878,879,882],{},[195,880,881],{},"Third-party widgets."," Review and chat widgets often add hundreds of elements; load them on interaction.",[15,884,885,888],{},[195,886,887],{},"Iframes."," Elements inside iframes are not counted for the parent page, but still cost memory and rendering.",[184,890,892],{"id":891},"faq","FAQ",[894,895,898,902],"details",{"className":896},[897],"faq-item",[899,900,901],"summary",{},"What thresholds does Lighthouse use for DOM size?",[15,903,904],{},"It warns above roughly 800 body elements and flags pages above about 1,400. It also reports depth over 32 and parents with more than 60 children.",[894,906,908,911],{"className":907},[897],[899,909,910],{},"Does DOM size affect my Core Web Vitals directly?",[15,912,913],{},"Not directly as a metric, but large DOMs make style, layout and framework work slower, which shows up in INP and sometimes LCP.",[894,915,917,920],{"className":916},[897],[899,918,919],{},"Should I remove the footer links?",[15,921,922],{},"Usually not — footers rarely dominate. Measure first; menus, cards and lists are typically larger contributors.",[894,924,926,929],{"className":925},[897],[899,927,928],{},"Is a large DOM acceptable if it is mostly hidden?",[15,930,931],{},"Hidden elements still cost memory and can participate in style work. Rendering them only when needed is cheaper, though hidden content is less costly than visible content.",[894,933,935,938],{"className":934},[897],[899,936,937],{},"How do I keep deferred menus accessible?",[15,939,940],{},"Keep the trigger in the HTML with correct ARIA attributes, render the panel on open, and move focus into it when opened via keyboard.",[894,942,944,947],{"className":943},[897],[899,945,946],{},"Does pagination hurt conversion compared with infinite scroll?",[15,948,949],{},"It depends on the site; many retailers use \"load more\" as a middle ground. Whatever the pattern, cap the DOM by limiting items per load and recycling older ones if lists grow very long.",[894,951,953,956],{"className":952},[897],[899,954,955],{},"How do I prevent DOM size regressions?",[15,957,958],{},"Add element-count budgets per template to CI using Lighthouse CI assertions or a simple Puppeteer script.",[894,960,962,965],{"className":961},[897],[899,963,964],{},"Do comments and whitespace count?",[15,966,967],{},"No. Lighthouse counts elements only. Comments and text nodes add a little to HTML size but not to the element count.",[894,969,971,974],{"className":970},[897],[899,972,973],{},"Will lazy-loading images reduce DOM size?",[15,975,976],{},"No. Lazy-loaded images are still elements in the DOM; only their downloads are deferred. Element count falls only when markup is removed or rendered later.",[184,978,980],{"id":979},"related","Related",[189,982,983,990,997],{},[192,984,985,989],{},[19,986,988],{"href":987},"\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization\u002Fvirtualizing-long-lists-in-react\u002F","Virtualizing long lists in React"," — for lists that must stay long.",[192,991,992,996],{},[19,993,995],{"href":994},"\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization\u002Freducing-style-recalculation-cost\u002F","Reducing style recalculation cost"," — what large DOMs make expensive.",[192,998,999,1002],{},[19,1000,1001],{"href":21},"DOM size & list virtualization"," — the topic overview.",[1004,1005,1007],"script",{"type":1006},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Fix the Excessive DOM Size Warning\",\n  \"description\": \"A practical workflow for diagnosing and fixing Lighthouse's excessive DOM size warning without breaking SEO or usability.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Measure by region\",\n      \"text\": \"Measure by region\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Defer hidden UI\",\n      \"text\": \"Render mega menu panels, modals and drawers on first open (with intent-based pre-rendering on hover or focus).\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Trim repeated components\",\n      \"text\": \"Audit the most repeated component (often a product card).\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Paginate long lists and facets\",\n      \"text\": \"Show 24–48 products with \\\"load more\\\" or pagination; show the top facet values with \\\"show more\\\".\"\n    }\n  ]\n}\n",[1004,1009,1010],{"type":1006},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Fix the Excessive DOM Size Warning\",\n  \"description\": \"A practical workflow for diagnosing and fixing Lighthouse's excessive DOM size warning without breaking SEO or usability.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization\u002Ffixing-the-excessive-dom-size-warning\u002F\"\n  }\n}\n",[1004,1012,1013],{"type":1006},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Rendering & CSS Performance\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Frendering-css-performance\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"DOM Size & List Virtualization\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"Fixing the Excessive DOM Size Warning\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization\u002Ffixing-the-excessive-dom-size-warning\u002F\"\n    }\n  ]\n}\n",[1015,1016,1017],"style",{},"html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .smZ65, html code.shiki .smZ65{--shiki-default:#622CBC;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--shiki-dark:#FFB757;--shiki-light:#702C00}html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}",{"title":269,"searchDepth":324,"depth":324,"links":1019},[1020,1021,1022,1028,1029,1030,1031,1032,1033,1034,1035],{"id":186,"depth":324,"text":187},{"id":228,"depth":324,"text":229},{"id":256,"depth":324,"text":257,"children":1023},[1024,1025,1026,1027],{"id":261,"depth":337,"text":262},{"id":548,"depth":337,"text":549},{"id":555,"depth":337,"text":556},{"id":570,"depth":337,"text":571},{"id":651,"depth":324,"text":652},{"id":658,"depth":324,"text":659},{"id":797,"depth":324,"text":798},{"id":812,"depth":324,"text":813},{"id":833,"depth":324,"text":834},{"id":863,"depth":324,"text":864},{"id":891,"depth":324,"text":892},{"id":979,"depth":324,"text":980},"A practical workflow for diagnosing and fixing Lighthouse's excessive DOM size warning without breaking SEO or usability.","md",{"slug":1039,"type":1040,"breadcrumb":1041,"datePublished":1049,"dateModified":1049},"fixing-the-excessive-dom-size-warning","article",[1042,1045,1046,1047],{"name":1043,"url":1044},"Home","\u002F",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":1048},"\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization\u002Ffixing-the-excessive-dom-size-warning\u002F","2026-10-06",true,"\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization\u002Ffixing-the-excessive-dom-size-warning",{"title":1053,"description":1054},"Fixing Lighthouse’s Avoid an Excessive DOM Size Warning","Find which regions inflate your element count, then defer hidden menus, trim wrapper markup, paginate lists and use SVG sprites to pass the DOM size audit.","rendering-css-performance\u002Fdom-size-and-list-virtualization\u002Ffixing-the-excessive-dom-size-warning\u002Findex","faMdRMuVBUbfA41ihXbicjuUyLnExCMq9k6cLtb9q3Y",[1058,1061],{"title":22,"path":1059,"stem":1060,"children":-1},"\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization","rendering-css-performance\u002Fdom-size-and-list-virtualization\u002Findex",{"title":1062,"path":1063,"stem":1064,"children":-1},"Reducing Style Recalculation Cost","\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization\u002Freducing-style-recalculation-cost","rendering-css-performance\u002Fdom-size-and-list-virtualization\u002Freducing-style-recalculation-cost\u002Findex",1791308077894]