In the digital sphere, every fraction of a second matters. Therefore, the performance of a website is crucial for user satisfaction and engagement. Enhancing performance can increase the likelihood of achieving your website goals.
A website with a large DOM output increases the size of the HTML, which can harm the site’s performance. However, there are techniques to diminish your site’s DOM size. This post will delve into how to enhance Elementor websites by employing various strategies to minimize HTML size.
Understanding the “Extensive DOM Size” Problem
The DOM (Document Object Model) represents a webpage’s structure. An extensive DOM size usually indicates a complex DOM structure, often caused by the use of excessive HTML elements, nested nodes, or dynamic content injections. Pages with a large number of HTML elements tend to load slowly and can impact animations and other user interactions.
DOM Size Impact on Page Performance
A large DOM size can increase rendering time, causing delayed page rendering and slower load times. This is because browsers have to parse and render each node. Furthermore, each DOM node requires browser memory, potentially leading to system resource exhaustion and increased memory consumption. This can result in performance degradation, especially on low-end devices.
Moreover, excessive DOM size can cause sluggish user interactions and decreased responsiveness during website use. A high number of DOM elements often includes many event listeners, adding overhead and slowing user interactions. We won’t mention all the reasons, but the rule of thumb is that the larger the HTML size, the slower the page.
How to Measure DOM Size With External Tools?
To measure the impact of DOM size on website performance, you can use the following tools:
Google Chrome DevTools – Go to the “Elements” panel to check DOM elements and their nesting depth. Use the “Performance” tab to assess rendering performance and spot potential bottlenecks caused by DOM manipulation.
Lighthouse – Lighthouse audits offer insights into DOM size metrics such as “DOM Size,” “DOM Depth,” and “Maximum DOM Depth,” pointing out areas for improvement.
WebPageTest – Assess DOM size metrics in Waterfall charts and Performance results to understand the relationship between DOM complexity and page load times.
What is Considered a Large DOM Size?
Lighthouse flags pages with DOM trees as follows:
- Warns when the
<body>element has more than 818 nodes. - Errors when the
<body>element has more than 1,400 nodes.
However, these metrics may change in the future. Furthermore, different tools may set different thresholds to warn of extensive DOM size.
Reducing Elementor DOM Size
Elementor is a visual drag-and-drop website builder that simplifies the process of adding elements onto the page. Using Elementor typically doesn’t negatively impact your site’s performance. However, there are steps you can take to further optimize the pages you build. This includes reducing the number of HTML elements that can minimize the DOM, without affecting the design.
To optimize effectively, it’s useful to understand the structure of Elementor’s layout elements. We’ll focus on layout elements because a typical page contains dozens of such elements, so optimizing them yields a higher impact.
There are three recommended techniques to optimize your layout elements:
- Migrate from section/columns to containers.
- Flatten containers with single nested containers.
- Implement full-width rather than boxed-width nested containers where possible.
Let’s learn more about reducing Elementor DOM size.
Elementor Element Types
Elementor has two types of Elements:
- Widgets – all the regular elements you use to build your website like heading, image, icon, button, divider, etc.
- Layout Elements – structural elements like Section/Columns and Containers. These elements wrap the widgets and group them together.
We’re going to focus on layout elements in terms of how to reduce the DOM size.
HTML Structure of Layout Elements
In Elementor, each structural element consists of two <div> tags: an outer <div> and an inner <div>. This is important to note since we are going to see how we can reduce the amount of HTML elements in your structural layout elements.
HTML Structure of Section/Column:
When using sections and columns, the final HTML consists of two layout levels, each of which has two <div> elements, two for sections and two for columns. In total, we wrap widgets with four <div> elements:
<div class="elementor-section">
<div class="elementor-container" >
<div class="elementor-column">
<div class="elementor-widget-wrap">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>
</div>
</div>HTML Structure of Container:
Elementor introduced Containers as a way of building pages with a leaner structure and DOM.
When switching to containers, the resulting HTML consists of only two <div> elements, not four, which means you get the same design with half of the <div> elements.
<div class="e-con">
<div class="e-con-inner">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>Flatten HTML Structure Using Containers
In the past, sections or columns were used to structure websites. Nowadays, modern websites use CSS flex and CSS grid to achieve the same visual structure with less code. For this reason, Elementor introduced Containers. By converting your structural elements to containers, you can streamline the HTML structure and eliminate unnecessary bulk.
While sections are stacked on top of each other, columns are positioned side by side. On the other hand, containers can stack inner elements in a row or in a column. We can use these differences to optimize some structures.
If a section has multiple columns, the converted structures will have a single column-direction container with multiple row-direction containers. However, if a section contains a single column, you can optimize this structure when converting to containers. You can eliminate one container level without affecting the design. Gaining 50% reduction of DOM size, from four <div> elements to only two. Now multiply this by the number layout elements each page has, to calculate the impact on your website.
It’s worth noting that you can really decrease the DOM size on section/column elements that nest inner sections. In these cases, the element employs eight levels of <div> elements before displaying the widget. Converting to containers can reduce this from eight levels of <div> elements to four levels, and in some cases to only two levels of <div> elements.
If you are still using a section/column layout structure, it’s time to migrate to containers. The benefits outweigh the work you’ll invest in the migration process. To simplify the migration, Elementor even provides a convenient “Convert” button for this purpose.
Boxed vs. Full Width
An additional method of optimizing the DOM size is by distinguishing between boxed containers and full-width containers.
A boxed container has a maximum width, necessitating the use of an inner <div> in Elementor. On the other hand, a full-width container stretched to both sides therefore requires only one <div> element.
Boxed Structure:
<div class="e-con">
<div class="e-con-inner">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>Full Width Structure:
<div class="e-con">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>Optimize Nested Containers Structure
Now that we understand the different HTML structures of boxed and full width containers, we can start optimizing our website’s DOM output, especially containers that nest other containers inside.
The next optimization tip is as follows: If you have a parent container that uses boxed width, you can make all of the nested containers 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 boxed parent container. If the two child containers will be boxed too, each will consist of two levels of <div> elements. But if they are full-width, only one <div> will be used.
One again, this optimization is valid only if the parent container is boxed.
Conclusions
As you have seen, there are three easy strategies to optimize your layout elements DOM size: replace section/column layout elements with containers; containers with a single nested container can be flattened; and if you’re using nested containers and the parent container is boxed, set all inner containers to full width. These strategies can help eliminate numerous unnecessary <div> elements from your website’s HTML and improve the overall performance of your web page.
Looking for fresh content?
By entering your email, you agree to receive Elementor emails, including marketing emails,
and agree to our Terms & Conditions and Privacy Policy.
