2

I am using a sidebar script to create a burger menu that pops a navigation bar with multiple links, once user clicks the burger.

I have many categories and subcategories that I link within that menu, so in my HTML, I have about 200 lines in the following pattern:

<li><span>A</span>
<ul><li><a href="/a/">Show A</a></li>
<li><a href="/a/1/">1</a></li>
<li><a href="/a/2/">2</a></li>
...
...
<li><a href="/a/20/">20</a></li>
....
....
<li><span>Z</span>
<ul><li><a href="/Z/">Show Z</a></li>
<li><a href="/z/1/">1</a></li>
<li><a href="/z/2/">2</a></li>
...
...
<li><a href="/z/20/">20</a></li>

Google Page Speed penalize my score for this for having a Big DOM size:

Avoid an excessive DOM size: 1,215 elements

Browser engineers recommend pages contain fewer than ~1,500 DOM elements. The sweet spot is a tree depth < 32 elements and fewer than 60 children/parent element. A large DOM can increase memory usage, cause longer style calculations, and produce costly layout reflows.

However, only a small percentage of my visitors bother to browse other page and actually click the burger menu to see all those links.

Therefore, the only solution I can think of, is perhaps to somehow lazy load all this HTML block, so it will not be considered as a big DOM size.

One option is to load it only when page loads, and another is to load it only when a user clicks the burger button. (the menu is hidden and being "pulled" once user clicks the burger.

  • Will this be a good practice?
  • What option should I choose?
  • How do I actually do it?

Another consideration is SEO - how will Google Crawler will see my pages if I do that:

Currently, Google can see that from any page, users can reach to all those other pages. This menu serves as the main Navigation method. But if I hide this menu from the initial HTML ouptut, I guess Google Bot might not consider those links any more, and might penalize the page for not having enough links in-site (burdens ease of navigation for visitors). though I'm not really sure about it.

Community
  • 1
  • 1
user8411456
  • 347
  • 1
  • 5
  • 18

1 Answers1

1

Short answer to this one is not to worry (in fact lazy loading the content might be a bad idea in case your JavaScript fails)

1215 DOM nodes is high, but not a metric to worry about too much.

I have a page with 2080 DOM nodes (As I use inline SVGs) and it still scores 99 / 100 on page speed insights and works on a 5 year old smart phone just fine. Link to my page speed results for reassurance

You aren't getting penalised for it, it is just an advisory item as long as your HTML is semantically correct. (as lots of DOM nodes is often a sign that your HTML needs refactoring, that's why they mention it).

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64