How to Fix Avoid an excessive DOM size

What to expect in this weeks Edition of the newsletter Saturday with Codes.

A good rule of thumb from?Google ?is:

“In general, look for ways to create DOM nodes only when needed, and destroy nodes when they're no longer needed.”

Of course, that’s easier said than done, and there will be times when you need to go down to the nitty-gritty of optimizing your website.?

Then, we’d suggest applying some of the following fixes:

1. Avoid poorly coded plugins and themes

They will basically bloat your site’s code, increase your DOM size, and hurt your site’s speed and overall performance.?

How can you tell if a theme/plugin was poorly coded?

Great question. And the answer is:

• Read the reviews. If there are issues, someone is likely to have encountered them already and commented.
• Don’t be shy to spend some money. Just like anything else, you get what you pay for. Saving money by getting a free theme/plugin might sound great, but the long-term effects will cost you much more.
• Check when it was last updated. You most definitely want to avoid out-of-date themes and plugins.

2. Minimize JavaScript-based DOM nodes

Adding dynamic elements on your website comes with a price, as they might bloat it with extra JavaScript nodes.

For starters, you can fix it by allocating the JS files that cause problems and removing them. In case it’s a third-party widget (e.g., a chat widget), you should look for an optimized alternative.

3. Page builders that generate bloated HTML

Page builders’ ease of use has made them an integral part of the website creation process for a lot of users.?

Unfortunately, page builders can sometimes produce bloated code with an excessive number of DOM nodes. They’re doing it by injecting too many div tags.

To deal with it, you can access your HTML and?fix it manually .?

4. Don’t copy/paste text into the WYSIWYG editor

Most WYSIWYG (What You See Is What You Get) editors fail at cleaning up pasted code. Especially when pasted from another rich text source like Microsoft Word. The issue is that it will not only copy the text but its styles as well. And they are the main culprit as they might embed a lot of DOM nodes.?

You have a couple of options to deal with it:

• Avoid pasting text in your editor
• Use the Paste as Plain Text option
• (If your editor allows) Use the advanced features to clean up the code after pasting it

And last but not least - return to your old pages and clean them up.?

5. Break down your one-page website into multiple pages

A single-page website is a great idea when its only purpose is to present your business.?

Contrary, if you decide to add business info, blog articles, products, contact forms, etc., divide them into separate pages and link them through the navigation menu.?

Splitting large pages into multiple pages might reduce the number of DOM nodes.

6. Don’t hide unwanted elements using display:none

display: none ?is commonly used with JavaScript to hide and show elements without deleting and recreating them. However, that doesn’t mean that they disappear from your HTML markup, leaving visitors loading unwanted elements.

7. Avoid using complicated CSS declarations and JavaScript

Complicated CSS declarations and JavaScript might additionally increase memory usage and slow down your site. It’s best to skip them if you deal with an excessive number of DOM nodes.

In Conclusion

It’s true that fixing your DOM issues won't lead to an improvement in your PageSpeed Insights scores.?

However, the hidden benefits of putting effort into dealing with the “avoid an excessive DOM size” warning are much greater:

• Increase your site’s load time
• Improve your page’s perceived performance
• Provide visitors with a better user experience

Share with friends and also subscribe to Saturdays with Codes.