A Chrome extension to help reduce your DOM size
At Studocu, we recently worked on the core web vitals of our website. Developers of all teams joined forces to improve our metrics, which are partly influenced by the DOM size of our pages.
To help tackle this issue, we created a Chrome extension to detect where the biggest improvements can be made.
Core web vitals and the DOM size
The Core Web Vitals can be considered part of the maintenance phase in the software development life cycle (SDLC).
The Core Web Vitals are a set of metrics defined by Google to measure the user experience quality on websites. These metrics are focused on the loading speed, interactivity, and visual stability of a webpage. The Core Web Vitals include LCP (Largest Contentful Paint), FID (First Input Delay), and CLS (Cumulative Layout Shift).
One of the metrics that need to be improved is DOM size. It is important to keep the DOM size as small as possible to improve the performance and user experience of a web page.
The DOM size is not directly related to any specific Core Web Vital, but it can impact the performance of multiple Core Web Vitals.
A larger DOM size can lead to longer loading times, which can impact the Largest Contentful Paint (LCP) score. It can also increase the time it takes for a page to become interactive, which can impact the First Input Delay (FID) score. Additionally, a larger DOM size can increase the amount of memory used by a web page, which can impact the Cumulative Layout Shift (CLS) score by causing layout shifts. And you can find it as part of TBT (Total Blocking Time).
How to fix “Avoid an excessive DOM size”
“Avoid an excessive DOM size” is one of the warnings you can face. To fix it, you need to:
- Minimize the number of elements: Reduce the number of elements on a page by using semantic HTML and avoiding unnecessary elements, such as nested containers or excessive use of divs.
- Remove unused elements: Remove elements that are not being used, such as scripts or styles that are no longer needed.
- Minimize the size of elements: Minimize the size of elements, such as images, by compressing or resizing them.
- Use lazy loading: Lazy load images and other elements that are not immediately visible, so that they only load when needed.
- Use CSS instead of JavaScript: Where possible, use CSS to achieve the same effects as JavaScript, as CSS is lighter and faster.
- Optimize the DOM structure: Optimize the structure of the DOM to minimize the number of nodes and increase its efficiency.
How to detect what parts of the DOM can be improved
If you want to know where to start, Lighthouse gives you some data that are a good starting point. But the problem is when we need more details about it. Which part of the page has too many DOM elements?
In order to solve this problem, we created a very simple Chrome extension that shows two important numbers when hovering over elements: the number of elements, and the maximum nesting depth inside the element. With this information, we then can decide if it’s worth checking the codebase for the parts with outstanding numbers.
Here is a sample to see how this extension works:
As you can see in the above sample, when the mouse hovers over the image, we have 9 elements. Or, for any table row, we have 62 elements. We therefore understood that we needed some improvements here: one of the SVGs had too many elements, and we also had some other duplicated elements with different styles for different screen sizes. With this approach, we found which parts could potentially be improved, and then started to look into the code to see whether the DOM size could indeed be optimized.
Following the two improvements mentioned in the previous paragraph, we managed to reduce the DOM size of one of our pages by 8%:
You can try this extension in this GitHub repository.
