The Internet is not fast in all countries. In countries where the internet connection is slow, the size of the page and DOM and HTML can play an important factor when it comes to website speed. Why is this so? An HTML element can be a parent to other elements. For example, a div can house hundreds of paragraphs or many images. The web page size will increase when you add a tag, content, etc to the page. The time taken for a website page to appear in the browser will be more for a large page than for smaller ones.
In WordPress, you can see the DOM structure by clicking the three horizontal bar icon displayed at the top of the Gutenberg editor. You can use the browser developer tools to see the HTML page size.
DOM comprises HTML tags. The more Hypertext Text Markup Language tags a page has, the lengthier the DOM will be. To reduce the DOM size, you can take the following precautions while designing or building a WP page:
Avoid nesting elements that don’t require nesting: Some plugins wrap the ordered or unordered items of a list in a div. Although this is allowed, you can eliminate the parent div tag, as the list would be already nested in the post content body. The post content is always wrapped in a div.
Merge similar elements if possible: Suppose your page has 20 paragraphs. Each paragraph has just two to three sentences. You can merge adjacent paragraphs to create a longer paragraph, thereby reducing the DOM size. Or the page has multiple ordered or unordered lists. You can merge the lists to create a longer list.
Avoid plugins that increase the DOM size: Some WP extensions tend to increase the size of the DOM considerably or marginally. You should find and get rid of such plugins on your website. For example, the related posts extension will enclose the related posts in a DIV even though the posts look great without a div. If you want to make your website beautiful with the help of a page builder, you should rethink your decision. No matter how powerful page builders are, they can increase the DOM size. Instead of a page builder, you should use a theme that will let you customize any part of the page without prompting you to install a page builder.
Split pages: A book has many pages. A website will be easy to navigate if its structure is similar to a book’s structure. A website should have many pages, and each page should be reachable by bots and humans. Thus, instead of putting everything on one page, you can divide content into different parts and create different pages. For example, if you want to publish an in-depth article on iPhone, you can create multiple iPhone-related pages instead of dumping everything on one page.
These are some techniques you can employ to reduce the DOM size. Now, let’s look at some strategies for reducing the HTML size.
Put CSS code in the stylesheet file: Instead of using inline styles, you can put the CSS code in the stylesheet file of your website. If your site doesn’t have a stylesheet file (or any other CSS file) and you create a new one, the number of HTTP requests will increase.
Put JS code in the JavaScript file: JavaScript code can be present on the HTML page or in a JavaScript file. If you put the JS code in the HTML file, the file size will increase by N lines, where N is the number of lines of JS code you add to the page. To reduce the file size, you can move the custom JS code to the JS files of your site.
Minify: When you minify the Hypertext Markup Language code, the minified code will lack unnecessary things on a page that increases its size. Some of the things are whitespaces, comments, etc.
Enable GZip compression: When GZip compression is enabled, the web server will compress the Hypertext Markup Language using GZIP and send the GZ file instead of the full HTML page to the visitor’s PC. The browser will uncompress the file before it opens the page.
The first two steps i.e. copying and pasting CSS/JS code in the stylesheet or JavaScript file, should be done manually. You can use a page caching plugin to minify HTML, CSS, and JS code, and to enable GZip compression, you will have to edit the web server config file. For example, Nginx users can add the rule gzip on; to the Nginx.conf file on their server.
Closing words: These are some of the techniques you can use to reduce the DOM and HTML size in WordPress.
