Skip to main content

Pages with Excessive Dom Size

Priority: Critical

Impact: Neutral

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 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
          }
        }
     }
   }

Try in explorer