# Pages with Excessive Dom Size

**Priority**: Critical

**Impact**: Neutral

## What issues it may cause

<ul>
  <li>
    <strong>Performance Degradation:</strong> A large DOM can slow down the browser's ability to render and interact
    with the page, leading to poor performance.
  </li>
  <li>
    <strong>Increased Memory Usage:</strong> More elements require more memory, which can be particularly problematic on
    devices with limited resources.
  </li>
  <li>
    <strong>Longer Recalculation Times:</strong> Browser [recalculates styles and
    layouts](https://web.dev/articles/reduce-the-scope-and-complexity-of-style-calculations) more frequently and slowly
    with larger DOM sizes, impacting the overall user experience.
  </li>
  <li>
    <strong>Slower JavaScript Execution:</strong> JavaScript operations that involve traversing or manipulating the DOM
    become slower with a larger DOM.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    <strong>Simplify the DOM Structure:</strong> Reduce the number of elements by streamlining the HTML and avoiding
    deep nesting.
  </li>
  <li>
    <strong>Lazy Load Content:</strong> Load only necessary content initially and defer loading of additional content
    until it is needed.
  </li>
  <li>
    <strong>Optimize JavaScript:</strong> Ensure JavaScript code does not generate excessive DOM elements unnecessarily.
  </li>
  <li>
    <strong>Audit and Cleanup:</strong> Regularly review and clean up the HTML to remove unnecessary or redundant
    elements. [Learn how to avoid excessive DOM
    size.](https://developer.chrome.com/docs/lighthouse/performance/dom-size/)
  </li>
</ul>

## What is the positive impact

<ul>
  <li>
    <strong>Improved Page Load Times:</strong> A smaller DOM leads to faster rendering, which improves the initial load
    time of the page.
  </li>
  <li>
    <strong>Enhanced Performance:</strong> Reducing the DOM size decreases the workload on the browser, enhancing
    overall performance and responsiveness.
  </li>
  <li>
    <strong>Lower Memory Consumption:</strong> Fewer elements mean less memory usage, which is crucial for maintaining
    performance on devices with limited resources.
  </li>
  <li>
    <strong>Better User Experience:</strong> A streamlined DOM leads to smoother interactions and quicker responses to
    user inputs, providing a better user experience.
  </li>
</ul>

## How to fetch the data for this report template

You will need to run a crawl for report template to generate report. When report has been generated and you have
crawl id you can fetch data for the report using the following query:


```graphql
query GetReportStatForCrawl(
      $crawlId: ObjectID!
      $reportTemplateCode: String!
      $after: String
     ) {
        getReportStat(
          input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode}
        ) {
          crawlSiteSpeedAudits(after: $after, reportType: Basic) {
            nodes {
              url
              auditId
              title
              displayValue
              score
              itemsCount
              auditResult
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

**Variables:**
```json
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"dom_size_failed_audits"}
```