Samiksha Hiwase | 5 Min Read | July 16, 2020

How to Reduce the Number of DOM Elements

1. Quick read

When it comes to your website performance and speed there are many different scoring tools and tests available to check your site. If you test your site on any tool, you will observe the YSlow score where you see the Reduce the number of DOM elements warning.
However, analyzing your site through Google PageSpeed Insights you might have seen an error like “Avoid an excessive DOM size”.Or if you analyze your site on GTmetrix, “Reduce the number of DOM elements” warning gets display.
In this blog, you will learn about what is DOM and technically, how to avoid DOM elements to make your site faster to how DOM size makes a huge impact on your site performance and observing how various tools display the warning of DOM elements.

2. What is DOM?

DOM stands for Document Object Model.
DOM is an interface that provides the browser to allow scripts on a webpage for dynamically accessing and updating the content, structure, and style of the documents.
When the browser prepares a webpage to show to users, it constructs a Tree of objects. This tree is made from all the elements of a page according to its HTML structure.
When your browser receives an HTML document, it has to be converted to a tree-like structure that is used for rendering and painting with the help of CSS and JavaScript. This ‘Tree’ like structure is called DOM or Document Object Model as shown in the image below:-
Javascript code can access the tree and modify it. The browser reacts to changes and updates of the HTML pages which are shown to the users. Changing the HTML and Javascript using the DOM interface is known as Dynamic HTML.

Nodes

All HTML elements present in the DOM are called Nodes. (simply means the “Leaves” in the Tree).

Depth

How long does the “Branch” go in a tree is called the Depth. For example, in the above diagram, “img” tag has a depth of 3. (HTML -> body -> div -> img).

Child Elements

All the child nodes of a node (without any further branching) are called as child elements.

3. How to reduce DOM size, Technically?

A)The Simple Example

The best example of technically reducing the DOM size is as simple as:
Use the following code:-

<ul id=”navigation-main”>

etc..

</ul>

Instead of:-

<div id=”navigation-main”>

<ul>

etc..

</ul>

</div>

Basically get rid of every possible HTML elements.
While elements take a bit of time themselves to display on the screen. The main reason you need to avoid overusing HTML elements is JavaScript.
When returning a list of elements then JavaScript must search the entire DOM. The more elements there are, the longer JavaScript takes to generate and return the list. For this reason, you required to decrease your DOM. This is most applicable to pages that use markup for styling, as opposed to CSS.

B) The Before and After Example

Here is another before-and-after example of using CSS to decrease your DOM:
  1. <!– Before (3 elements) →
  2.     <font color=”FF0000″><b><i>This text is important.</i></b></font>
  3.     <!– After (1 element) →
  4.     <strong style=”color: #ff0000; font-style: italic; font-weight: bold;”>This text is important.</strong>
Pages often contain empty elements. This is most commonly seen when content is automatically generated. If a container has no content to display, it will still display the container elements, but just leave them empty.

  1.  <?php
  2.   echo ‘<div id=”advertisement”>’;
  3.   // Ads only for free users.
  4.   if ($user[‘account_type’] == ‘free’)
  5.   echo ‘<a href=”/premium” title=”Purchase Premium”>Upgrade</a>’;
  6.   echo ‘</div>’;
  7.    ?>
The above code will still display the #advertisement element even if the user is not under a free account. JavaScript must still acknowledge this element in the DOM, thus this will increasing its scanning time.
You can remove elements that do not need to exist so this will save some bandwidth and save some parse time.

4. How does DOM size impact on your site performance

Excessive DOM size can impact on your performance in different ways.

Higher parse and render time:-

A large DOM tree and complicated styles rules make a huge work for the browser. The browser has to parse the HTML, construct render tree, etc. Every time user interacts or makes something changes in HTML then the browser has to compute this again.

Increases memory usage:-

Your JavaScript code might have functions to access the DOM elements. A larger DOM tree causes JavaScript to use higher memory to process these.
An example, a query selector like the document is .query Selector All(‘img’) which lists all images. So, lazy loading libraries utilize these images.

Increases TTFB (Time to First Byte):-

As your DOM size increases, the size of the HTML document increases (in KBs). Since more data has to be transferred over the network, this will increases the TTFB.

What is TTFB?

TTFB stands for Time to the first byte. It is a measurement used as an indication of the responsiveness of a web server or other network resource.
TTFB measures the duration from the user making an HTTP request to the first byte of the page that the users’s browser gets received.

5. Know about warning of Reduce the number of DOM elements

Tools such as WebPageTest, Pingdom, and GTmetrix all provide valuable insights on how fast your site loads and what you can do to make your site better.
The Google PageSpeed Insights will display the error like “Avoid an excessive DOM size” when you analyze your site as shown in the image below:-
If you check your site in GTmetrix then “Reduce the number of DOM elements” warning gets display as shown in the image:-
If you avoid the numbers of DOM elements and reduce the size of DOM then GTmetrix does not display this warning and the performance of your site becomes faster.

For Further Details or Additional Information

OR

If you want to know more about our Services