CODEWITHSUNDEEP
google-pagespeedlighthouse
Hiran Narayanan
Hiran Narayanan

Reputation: 141

How to resolve Uses An Excessive DOM Size issue in Google pagespeed insights

Avoid an excessive DOM size issue is showing in Google Pagespeed Insights results. How can i resolve this ? Please mention the ways to reduce it. My website is a wordpress website.

Upvotes: 2

Views: 20241

Answers (2)

aliza
aliza

Reputation: 21

Without completely redesigning your web page from scratch as i did here, you cannot resolve this warning. you should not neglect this if this warning is more than one page on your website, you should consider following points.

  1. Reducing the amount of widgets / sections within your web pages or page layouts
  2. Using a simpler web page builder as many page builders add a lot of code bloat
  3. Changing the theme
  4. Use different sliders

Upvotes: 0

James Mascarenhas
James Mascarenhas

Reputation: 605

The non technical answer would be to minimize your WordPress website DOM size is by loading fewer resources to reduce the DOM size and you can do that by many way such as:

  • Reducing unnecessary plugin.
  • Reducing uncessary css/js.
  • Redcuing number of images. Basically If you think something can be removed from the page do it and you will see lesser number of nodes in your DOM.

Technical feedback (adding from Google pagespeed recommendation) :

A large DOM tree can harm your page performance in multiple ways.

Network efficiency and load performance. If you server ships a large DOM tree, you may be shipping lots of unnecessary bytes. This can also slow down page load time, because the browser may be parsing lots of nodes that aren't even displayed above-the-fold. Runtime performance. As users and scripts interact with your page, the browser must constantly re-compute the position and styling of nodes. A large DOM tree in combination with complicated style rules can severely slow down rendering. Memory performance. If you use general query selectors such as document.querySelectorAll('li') you may be unknowingly storing references to a very large number of nodes, which can overwhelm the memory capabilities of your users' devices. Recommendations An optimal DOM tree:

Has less than 1500 nodes total. Has a maximum depth of 32 nodes. Has no parent node with more than 60 child nodes.

Upvotes: 3

Related Questions