Skip to main content

Excessive Dom Size Elements

Priority: Critical

Impact: Negative

What issues it may cause​

  • Performance Degradation: A large DOM can slow down the browser's ability to render and interact with the page, leading to poor performance.

  • Increased Memory Usage: More elements require more memory, which can be particularly problematic on devices with limited resources.

  • Longer Recalculation Times: Browser recalculates styles and layouts more frequently and slowly with larger DOM sizes, impacting the overall user experience.

  • Slower JavaScript Execution: JavaScript operations that involve traversing or manipulating the DOM become slower with a larger DOM.

How do you fix it​

  • Simplify the DOM Structure: Reduce the number of elements by streamlining the HTML and avoiding deep nesting.

  • Lazy Load Content: Load only necessary content initially and defer loading of additional content until it is needed.

  • Optimize JavaScript: Ensure JavaScript code does not generate excessive DOM elements unnecessarily.

  • Audit and Cleanup: Regularly review and clean up the HTML to remove unnecessary or redundant elements. Learn how to avoid excessive DOM size.

What is the positive impact​

  • Improved Page Load Times: A smaller DOM leads to faster rendering, which improves the initial load time of the page.

  • Enhanced Performance: Reducing the DOM size decreases the workload on the browser, enhancing overall performance and responsiveness.

  • Lower Memory Consumption: Fewer elements mean less memory usage, which is crucial for maintaining performance on devices with limited resources.

  • Better User Experience: A streamlined DOM leads to smoother interactions and quicker responses to user inputs, providing a better user experience.

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:

query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) {
  getCrawl(id: $crawlId) {
    reportsByCode(
      input: {
        reportTypeCodes: Basic
        reportTemplateCodes: [$reportTemplateCode]
      }
    ) {
      rows {
        nodes {
          ... on CrawlSiteSpeedAuditOpportunities {
            opportunityDigest
            element
            title
            auditId
            exampleUrl
            blockingTimeSecsSum
            blockingTimeSecsAvg
            subItems
            failedAuditsCount
            warningAuditsCount
            infoAuditsCount
          }
        }
      }
    }
  }
}

Try in explorer