High Performing HTML for Marketers

Understanding the Page Speed Insights 'Avoid an Excessive DOM size' error message. 3 of 10 things marketers should know about website performance.

Welcome to the third of this series about website performance. I'm an ex-marketer turned web developer. And I'm giving you the info I wish I had had when I was a marketing manager.

Remember, we're discussing how fast web pages load / display... as it is critical to prevent users bouncing off your site. Plus fast loading pages give your search rankings a boost in Google.

We've already looked at measuring page speed - see article 1. And article 2 gave an intro to what web pages are composed of (HTML, CSS and Javascript) and how this affects page load speed.

We're now going to zoom into HTML and how it can affect web page speed. We concluded in the last article that too much (than is necessary) of any of the HTML, CSS and Javascript code is going to cause page speed issues**.**

I often see the 'Avoid an Excessive DOM size error' on websites when I'm running a Page Insights test. Particularly, sites that have been built with no-coding page builder software.

So what's this all about? Are we using too much HTML (yes!)? Is my landing page too tall? Why is this happening? How much is too much? Should I be worried?

Let's see...

1. Quick recap on HTML

Remember HTML is the coding language that creates what you see on a web page. It can be used on its own (i.e. without CSS and Javascript). When a web browser loads your HTML, it reads it, then converts it into what you see on the screen. See article 2 for more on this.

2. What is the DOM?

Before we get stuck into the error message... we need to understand what the DOM is. DOM stands for Document Object Model.

The DOM represents the structure of a document (i.e. a web page). If you examine an HTML page it looks like a tree. See image below... admittedly, you might need to rotate the HTML code before seeing the tree! ** ** "Each branch of the tree ends in a node, and each node contains objects" (source mdn web docs) * * - which are our HTML tags (e.g. div, H3, p etc.).

You can see these in this image.

Branches leading off other branches are their children. You could also say that the branches leading off are 'nested' branches.

3. What triggers the 'Avoid an Excessive DOM size'?

That alert gets triggered in PageSpeed Insights when any of the following two things happen:

• There are too many nodes on a web page, i.e. too many HTML tags. According to Google the threshold for alerting is having more than 1,400 nodes.
• The nodes are nested too deeply, i.e. HTML tags nested in other HTML tags. I couldn't find a reference to 'how much nesting' in Google's documentation. But another site has reported more than 32 levels of nesting trigger this error.

4. Why is it important?

Too many nodes (i.e. too many HTML tags) and too many deeply nested nodes (nested HTML tags) are making your web browser work harder . Processing the nodes (before presenting them - this is called 'rendering') will take longer for the web browser.

"A large DOM tree in combination with complicated style rules can severely slow down rendering [your web page appearing on screen]."
Google

So it needs to be avoided.

5. My web page is displaying fine, how come I have the 'Avoid an Excessive DOM size' error?

When viewing a web page in the browser, it will usually look fine! Especially, if you have a modern device loading the page on a fast internet connection.

The 'Avoid an Excessive DOM size' is largely seen on tall landing pages built with a no-coding page builder. But sometimes on shorter pages - pending on how well the page builder constructs the code.

It's worth noting that a well-coded page (unless it was extremely, very, very, very enormous) is not going to trigger this message.

Many WordPress page builders have sorted this issue. But some of them are still triggering this alert. I did a Page Insights on Elementor's home page yesterday (22 February 2024) and it was still showing... so not resolved there. So was Divi's and BeaverBuilders homepages. All these page builders are extremely popular so it's a shame that this isn't sorted for their customers.

It isn't just the above WordPress page builders generating this error. But also the homepages of: Wix, SquareSpace, ReadyMag and Shopify. I didn't check them all.

6. How to avoid the 'Excessive DOM size' error message

So it seems that [some] page builders are the main culprit here... their software generates too many html tags. And some builders can generate deep nesting of tags.

This largely goes unnoticed until you have a tall landing page. But bear in mind, just because the DOM size error message isn't triggering doesn't mean it's not affecting your page speed... it just means you're not hitting the thresholds set by Page Speed Insights for alerting. It's for sure, contributing to a slower website.

Your options:

6.1 Get a web developer who doesn't use a page builder...

I would say that of course, since that's what we do here at Pendigital.

6.2 Choose your page builder wisely...

If you prefer a page builder, then do your research (using Page Speed Insights), before selecting one. Test their own web pages. Be aware that some tools still generate too much HTML even on smaller pages, so be sure to test a range of pages - tall and short.

If you don't want to change your page builder that creates too much HTML then keep an eye on landing page height. Don't overdo it if you want to avoid this message.

See you in the next article...

BTW, the image is of a sail fish... it's the fastest fish in the ocean. We're talking about speed hence the fast fish!

Follow us on LinkedIn, Twitter and Facebook to get the next articles.

Read more about the author.