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
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.
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”!
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.
- 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.