Size of the HTML

What we check

We count all HTML elements of the home page, from <html> to the last <span>.

• More than 1500 elements: note.
• More than 3000 elements: warning.

If we recognise a page builder, we name it in the report as the probable cause.

Why it matters

From the HTML the browser builds a tree of all elements, the so-called DOM. The bigger this tree, the more work:

• On loading the browser has to process every element, calculate styles and determine the position.
• On every change, for example when opening a menu, scrolling with animations or loading content later, it has to recalculate parts of it.
• On a smartphone the computing power of a computer is missing. Older or cheaper devices then react sluggishly, clicks arrive with a delay.

This has a direct effect on the metrics that Google measures, above all the response time (INP).

Common causes:

• Page builders nest every element in several containers: section › column › widget wrapper › content wrapper › element.
• Mega menus with hundreds of links that are fully in the HTML on every page.
• Duplicate content for desktop and smartphone, one version of which is hidden in each case.
• Long lists such as all products, all references or all reviews on the home page.
• Icons as individual SVG elements with many paths.

How to fix it

Set up the page builder leaner

• Elementor: under "Settings › Features" activate the "Optimized DOM" or the "Flexbox Containers". The new containers produce considerably less nesting than the old sections and columns.
• Divi and others: current versions usually produce leaner code. Keep the builder up to date.

Reduce content

• Show a selection on the home page, for example three references and three reviews, and link to a page with all of them.
• Avoid elements that appear only on desktop or only on smartphone. A responsive element that adapts is leaner than two separate ones.
• Have mega menus checked by the agency that maintains the website: do visitors really need every link on every page?

Check the nesting

A section with a heading and a paragraph does not need six levels of containers. When rebuilding individual sections it is worth paying attention to lean structures.

How to check it yourself

Open the developer tools (F12), "Console" tab, and enter document.querySelectorAll('*').length. The number is the number of elements. PageSpeed Insights also reports DOMs that are too large in its diagnostics.

Frequently asked questions

How many elements are normal?

A lean home page gets by with 500 to 1000 elements. From about 1500 it becomes noticeable, especially on older smartphones. Above 3000 the cause is almost always a page builder or an overloaded menu.

Can you see the elements on the page?

Only partly. Many are invisible containers that a page builder nests for the layout, or hidden content such as smartphone menus, pop-ups and slider slides.