Sites with a lot of DOM output increase the size of the HTML, which can hurt the performance of the site. However, there are techniques to reduce the DOM size of a website. This post will look at how you can enhance your Elementor website by using various strategies to minimize the HTML size.
Understanding the "DOM Size Overload" Problem
The DOM (Document Object Model) represents the structure of a web page, and a large DOM size is usually an indication of a complex DOM structure, often caused by the use of too many HTML elements, nested nodes, or dynamic content injection. Pages with a large number of HTML elements tend to load slowly and can interfere with animations and other user interactions.
Impact of DOM size on page performance
Larger DOM sizes increase rendering time, resulting in page rendering delays and slower loading times. This is because the browser must parse and render each node. In addition, each DOM node requires browser memory, which can lead to system resource exhaustion and increased memory consumption. This can lead to performance degradation, especially on low-end devices.
In addition, a large DOM can lead to sluggish user interactions and reduced responsiveness during site usage. A large number of DOM elements often contain many event listeners, which adds overhead and slows down user interaction. We won't mention all the reasons, but the rule of thumb is that the larger the HTML, the slower the page.
How to measure DOM size using external tools?
To measure the impact of DOM size on site performance, you can use the following tools:
Google Chrome DevTools: Go to the Elements panel to examine the DOM elements and their nesting depth. Use the Performance tab to evaluate rendering performance and discover potential bottlenecks caused by DOM manipulation.
Lighthouse: The Lighthouse audit provided insights into DOM size metrics such as "DOM Size", "DOM Depth" and "Maximum DOM Depth", pointing out areas for improvement. areas for improvement.
WebPageTest : Evaluate DOM size metrics in waterfall diagrams and performance results to understand the relationship between DOM complexity and page load times.
What is considered a larger DOM size?
LighthouseUse the DOM tree to mark up the page, as shown below:
<body>Warns when an element exceeds 818 nodes.- (coll.) fail (a student)
<body>An error occurs when the element has more than 1,400 nodes.
However, these metrics may change in the future. In addition, different tools may set different thresholds to warn of excessive DOM size.
Reduce Elementor DOM size
Elementor is a visual drag-and-drop website builder that simplifies the process of adding elements to a page. Using Elementor does not usually have a negative impact on the performance of your website. However, there are a number of steps that can be taken to further optimize the built pages. This includes reducing the number of HTML elements that minimize the DOM without affecting the design.
In order to optimize effectively, it is useful to understand the structure of Elementor layout elements. We'll focus on layout elements because a typical page contains dozens of these elements, so optimizing them will have a greater impact.
There are three recommended techniques to optimize your layout elements:
- Migration from sections/columns to containers.
- Use a single nested container to flatten the container.
- Whenever possible, implement full-width rather than box-width nested containers.
Let's learn more about reducing the Elementor DOM size.
Elementor Element type
Elementor has two types of elements:
- widgets: All the regular elements used to build a website, such as headers, images, icons, buttons, dividers, etc.
- Layout elements: Structural elements such as sections/columns and containers. These elements wrap widgets and group them together.
Focus on layout elements to see how to reduce DOM size.
HTML structure of layout elements
In Elementor, each structure element consists of two<div>Tag composition: an outer<div>and an inner <div>This is important because we will learn how to reduce the number of HTML elements in the structural layout element. This is important because we will learn how to reduce the number of HTML elements in a structural layout element.
The HTML structure of the section/column:
When using sections and columns, the final HTML consists of two layout levels, each with two<div>elements, two for parts and two for columns. In total, we use four<div>Element Packaging Widget:
<div class="elementor-section">
<div class="elementor-container" >
<div class="elementor-column">
<div class="elementor-widget-wrap">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>
</div>
</div>The HTML structure of the container:
Elementor introduces containers as a way to build pages with a leaner structure and DOM.
When switching to the container, the resulting HTML contains only two<div>elements instead of four, which means that the same design can be obtained using half of the elements<div>The
<div class="e-con">
<div class="e-con-inner">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>Flattening HTML structure with containers
In the past, websites were often structured using sections or columns. Today, modern websites use CSS flex and CSS grid to achieve the same visual structure while reducing the amount of code. For this reason, Elementor has introducedcontainers. By converting structural elements into containers, you can simplify the HTML structure and eliminate unnecessary redundancy.
While parts are stacked together, columns are placed side by side. On the other hand, containers can have internal elements stacked in a row or column. These differences can be used to optimize some structures.
If a section has multiple columns, the converted structure will have a single column direction container and multiple row direction containers. However, if a section contains only one column, this structure can be optimized when converted to containers. A container level can be eliminated without affecting the design. the DOM size is reduced by 50% from four<div>elements down to just two. Now multiply this by the number of layout elements per page to calculate the impact on your site.
It is worth noting that it is possible to actually reduce the DOM size of section/column elements in nested inner sections. In these cases, the element<div>Eight-level elements are used before widgets are displayed. Converting to a container reduces it from an eight-level element<div>to four levels, which can be reduced to only two elements in some cases<div>The
If a section/column layout structure is still being used, it's time to migrate to containers. The benefits of doing so outweigh the work involved in the migration process. To simplify the migration, Elementor even provides a handy "Convert" button for this purpose.
Boxed & Full Width
Another way to optimize DOM size is to distinguish between boxed and full-width containers.
Boxed containers have a maximum width and therefore require internal elements in the Elementor<div>. On the other hand, full-width containers stretched to the sides thus require only a<div>Elements.
Boxed construction:
<div class="e-con">
<div class="e-con-inner">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>Full-width construction:
<div class="e-con">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>Optimize nested container structure
Now that we understand the different HTML structures of boxed and full-width containers, we can begin to optimize the DOM output of our site, especially containers that nest other containers.
The next optimization trick is as follows: if you have a parent container that uses boxed width, you can make all nested containers have full width. This way, you get the same design, but with less HTML.
<div class="e-con e-con-parent">
<div class="e-con-inner">
<div class="e-con e-con-child">
...
</div>
<div class="e-con e-con-child">
...
</div>
</div>
</div>The HTML structure above has a parent container with a box. If the two child containers are also framed, then each container will consist of two layers of<div>elements are composed. However, if they are full-width, only the<div>Use one.
Again, this optimization only works if the parent container is boxed.
reach a verdict
As you can see, there are three simple strategies to optimize the DOM size of layout elements: replace partial/column layout elements with containers; containers with a single nested container can be spread; and if nested containers are used and the parent container is boxed, set all inner containers to full width. These strategies can help<div>Eliminate a large number of unnecessary elements from your website's HTML and improve the overall performance of your web pages.
