WordPress things made simple! This is the feeling everyone gets while using WordPress for a very simple reason is that we don’t need to be a coding geek, to build websites that work, attractive websites, websites that look professional and attracts the user because WordPress(WP) provides you with different plugins, theme and many other features that make things simple for you.
Every coin has two sides! Things are made simple, it is user friendly but there is also an inherent drawback when working with different themes many times these themes and plugins are not optimized and it deteriorates our website performance in terms of loading speed and eventually no one is going to complain their ISP for poor network efficiency but users will stop visiting your website and you will run out of business.
To solve this problem we need to understand the document object model and how it affects our site loading performance.
This is an html document
Following are some of the terms we need to understand about DOM :
Nodes: All the HTML elements are considered as DOM nodes, and nodes that doesn’t have any further branches is considered as secondary nodes or leaves.
Depth of the tree: The maximum number of branches encountered starting from the root node determines the depth of the tree. For eg: the depth of the “P” tag in the above example is 3.
Fun Fact: How many websites use WordPress? : 455,000,000 are the number of active WP websites out of 1.3 billion currently active websites.

Document Object Model (DOM):
DOM is a tree-like structure that helps the browser paint your webpage as per the code, In other words, Dom is a platform that is language-independent and treats any HTML or XML code as a logical tree, and facilitates parsing of a webpage for browser. DOM methods allow programmers to dynamically access and change, add, delete or modify attributes, styles, colors, or any other HTML tags. Just like a tree, the DOM model has branches, and every branch ends with nodes(leaves). let us understand DOM with help of an example:Avoid an excessive dom size
In this article we will learn how to reduce excessive dom size in wordpress Happy learning !
DOM tree For the above code:

Why do we need to avoid an excessive dom size?
Excessive dom size deteriorates the page performance of the website and eventually reduces Google page speed rating as page load time increases and it build-ups on data costs and due to this web pages that have large DOM size gets flagged due to which these website pages suffer on SERP ( search engine results page) ranking and therefore traffic received by that page reduces.Recommendations from google pagespeed:
- The webpage must not have more than 1500 nodes.
- The number of nested nodes must be less than 32 i.e. depth of the tree must be less than 32.
- Parent node must not have more than 60 child nodes.
How to avoid an excessive Dom size?
Technically large dom tree can be reduced to smaller by removing unnecessary HTML elements from the page that doesn’t affect the user’s experience. For eg: In the above example that we discussed for understanding dom trees, we can just remove the div tags that will just change the HTML structure but it will not affect the user experience. In WordPress, things are not that simple, because while using themes in WP you don’t have access to HTML structure, and in the greed of making websites, blog posts attractive you are eventually increasing dom size. Here are some tips to solve the error ” Google page speed tool test recommends to reduce excessive DOM”!Avoid unnecessary usage of javascript:
Many times we load blog posts, websites with different widgets that use javascript, many times these widgets are not even used by the users, and necessarily this can increase the page loading time.Some times while using themes we need to hide unwanted CSS elements from a theme like a form collecting email address, or a checkout button, etc. to do this we access CSS files and simply use-> element: none, Even by hiding these elements browser needs to parse this CSS object, and in a way increases dom size.
Use well-coded plugin and page builders:
The themes that we use play a very vital role in user experience but also one must not forget how it affects the page runtime performance. Page builders often insert many div tags these tags increase the number of nodes and the result is a large dom tree. Well-coded page builders like Oxygen must be used which doesn’t inject many div tags and also provides proper control over dom elements.Use lazy load plugins:
lazyload is a feature that informs a browser to wait before downloading an image or video and it doesn’t require a javascript to do this.- Lazy load youtube videos: this is very important otherwise we will be adding render-blocking content to our website and blog posts.
- Lazy load images
- Lazy load comments: It is very wise to delay loading comments as a user is never in hurry to read comments.