Clicky

DOMContentLoaded Vs. Load Events – Differences & Optimization Tips

So your boss calls you into his room for an urgent meeting. He has just discovered the Lighthouse report and is startled to see your webpage performing really poorly on the speed metrics. 

Screenshot from Lighthouse report showing very high time to interactive, speed index, and overall poor page loading performance

He asks you why Time to Interactive is high. Why is the Speed Index close to 10 seconds? What do these numbers even mean?

You start fumbling. You load up the ‘Inspect’ window on Google Chrome and run the page again. The page starts loading, and the Inspect window starts getting populated with different numbers. 

Chrome Inspect window screenshot showing DOMContentLoaded and Load time

Now, there are more questions – what is the Finish time? What is Load speed and why is it higher than DOMContentLoaded? What do these terms mean? 

Do you have the answers with you? Luckily for you, I am going to explain what these different terms mean, and how you can use this information to identify ways to make your web page load faster.

What is DOM

DOM stands for Document Object Model and is a way to represent the various elements of an HTML page in a tree structure. 

DOM tree structure of an example HTML page

Here is an image I swished off Wikipedia for an example of a DOM tree. This pictorially shows how the <head> section loads first, followed by the <body> tag.

In essence, the DOM represents everything that is at the core of a webpage. This primarily includes the HTML code itself.

Understanding DOMContentLoaded And Load Time 

What is DOM content loaded time?

DOMContentLoaded represents the time it takes to load the HTML structure of the document. This is different from the Load Time which represents the total time it takes to download everything else necessary to display the HTML page in its final form.

The DOMContentLoaded time does not include the time it takes to download the images, CSS files, JS files, iFrames, and other third-party scripts like Adsense, Analytics, etc. The total time it takes to load the HTML document, as well as all these other scripts and files is represented by the Load time.

Reducing DOM content loaded time

Now, let’s go back to the meeting with your boss. You see that the DOMContentLoaded time is 3.36 seconds while the overall Load Time is 11.11 seconds. What do you make of this?

For starters, this tells you that it takes a whopping 3.36 seconds to just load the primary DOM structure of the webpage.

You can sometimes see an error titled “Avoid an Excessive DOM size” on the Lighthouse report with high DOMContentLoaded speeds like this. 

Avoid An Excessive DOM Size

The fundamental way to bring this ‘Excessive DOM size’ down is by optimizing your webpage and reducing all the unnecessary nodes in your HTML code. An Excessive DOM Size error is often displayed when you have more than 1500 nodes on an HTML page, or when the node depth (in the case of nested nodes) is more than 32.

An ‘Excessive DOM Size’ error may seem surprising when you have a pretty minimal front-end page. Many times, however, you see this error because you are using a poorly coded Website Builder or Plugin to power your landing page.

Wherever possible, try to custom code your page so that you can rid your page of all the unnecessary code, and only have what is necessary to run your page.

Low DOMContentLoaded Speed, But High Load Time

What does it mean when you have a very good DOMContentLoaded speed, but the overall load time is high?

This means that while your HTML document itself is very nicely structured to render in a quick time, there are other files and scripts that are taking too much time to load.

DOMContentLoaded does not depend on the size of the images or other scripts. That is demonstrated by the overall load time. 

Here are a few things you should look at when your Load time is high:

  • Does your page use too many images?
  • Are the image sizes too large? Ideally, your images should be lesser than 50 kB in order to load quickly
  • Are you using recommended file formats like WebP and AVIF for images? Avoid JPEG and PNG
  • Are you loading too many CSS and JS files? Deploy code-splitting and also trim down these files so that unused scripts are removed.
  • Are you loading files and iFrames from external servers? These typically take longer to load than loading from inside your own server
  • Monitor your server to make sure the ping time is not too high. A ping time of under 30 ms is ideal

In conclusion, your website needs to have an optimized code with few nodes to hit low DOMContentLoaded time while using optimized images, scripts and a high-speed server will help you hit a neat score with your load time. Using passive listeners, and preload scanners all go a long way in optimizing your page for low page load time.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top