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.

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.

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.

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

 

This is an html document  

 

In this article we will learn how to reduce excessive dom size in wordpress Happy learning !

 

 

DOM tree  For the above code: 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.

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.

Knowing the consequences of an excessive dom size now let us understand how can we mitigate this problem.

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.

Split Large pages into multiple pages :

The browser takes more time to parse a large page, many times a complex dom structure with many functionalities various javascript also has the risk of breaching the limit of 32 nodes, to avoid breaching these limit of 32 nodes and also provide all the required functionalities required by our user on the website we can split large pages into multiple pages by differentiating based on core functionalities, relevance, etc. This splitting helps in reducing the number of nodes on a single page, it helps to reduce the number of child elements on a web page, and eventually segregating large posts into multiple pages helps to reduce all CSS styling tags applied for a single page.

Providing separate page for comments or additional images:

If your posts have a large number of images or comments that are likely to go beyond 50 then it increases the dom size hence site loads slowly. To avoid this we can prioritize images we need to display on a single web-page and other images could be giving reference to another web-page on the same site similarly if the user wishes to view all comments then we can load comments on a new page.

Precise use of query selector :

Consider for example a javascript: document.queryselectorAll(‘img’) using such query will increase the parsing and will severely slow down the memory performance of the page because javascript needs to access every dom elements, and iterate through every node in the dom tree structure, therefore, such practice must be avoided. To conclude, the idea is very simple: keep your website as simple as you can by not compromising user experience with proper practices, using well-coded plugins, avoiding unnecessary javascript, excessive dom size can be avoided and your page speed ratings can be improved.