JOB

Web Performance — 2 | PHP | JavaScript | CSS | Software Architecture | HTML


Latest Performance Report for website

How to Reduce DOM Size in WordPress’

hen analyzing your site through Google PageSpeed Insights you might have seen an error like “Avoid an excessive DOM size”:

excessive dom size google pagespeed

Or in GTmetrix “Reduce the number of DOM elements”:

dom size

What is DOM?

When your browser receives an HTML document, it has to be converted to a tree-like structure which is used for rendering and painting with the help of CSS and JavaScript.

This ‘tree’ like structure is called DOM or Document Object Model.

render tree construction

Image credits: Google Developers

Nodes – All HTML elements in the DOM are called Nodes. (aka “leaves” in the tree).

Depth – How long does the “branch” goes in a tree is called the depth. For example, in the above diagram, “img” tag has a depth of 3. (HTML -> body -> div -> img).

Child Elements – All the child nodes of a node (without any further branching) are child elements.

Lighthouse and Google PageSpeed Insights starts to flag pages if any of the following conditions are met:

Have more than 1,500 nodes in total.

Have a depth greater than 32 nodes.

Have a parent node with more than 60 child nodes.

How DOM Size Impact Performance?

Excessive DOM size can impact performance in different ways.

Higher parse and render time (FCP) – A large DOM tree and complicated styles rules make a huge work for the browser. The browser has to parse the HTML, construct render tree etc. Every time user interacts or something in HTML changes, the browser has to compute this again.

Increases memory usage – Your JavaScript code might have functions to access DOM elements. A larger DOM tree causes JavaScript to use higher memory to process these. An example would be a query selector like [login to view URL](‘img’) which lists all images, commonly used by lazy loading libraries.

Increases TTFB – As your DOM size increases, the size of the HTML document increases (in KBs). Since more data has to be transferred over the network, this increases TTFB.

How to Reduce DOM Size Technically?

For example, technically reducing DOM size is simple as:

use:

<ul id=”navigation-main”>

etc..

</ul>

instead of:

<div id=”navigation-main”>

<ul>

etc..

</ul>

</div>

Basically, get rid of every possible HTML element. You can also use Flexbox or Grid to further reduce DOM size.

But since you’re using WordPress, this isn’t gonna help you much!

How to Reduce DOM Size in WordPress?

Lazy Render below-fold contents

You can tell the browser to lazy render the contents (or elements) if it’s not required for the above fold. It’s just like lazy loading images, but for HTML elements.

Here is how to lazy render contents using FlyingPress:

Skills: PHP, JavaScript, CSS, Software Architecture, HTML






(

1 review
)




Bangkok, Thailand


Project ID: #34302958





Source link

Leave a Reply

Your email address will not be published.