What is the DOM or Document Object Model?

If you’re getting into everything that is optimizing site load times, you probably heard about the Document Object Model or DOM. The DOM is an API of the HTML and XML model (how many acronyms!). We go for a part. API stands for Application Programming Interface and serves to do what its name explains: interact with an application through code. Through the DOM, programmers can create documents, navigate and add, edit or remove elements, modify their attributes and alter their values. Speaking badly and soon, the DOM is the structure or skeleton of your website.

Surely you are wondering what is the relationship between the DOM and the loading times of a site. When loading a page, there are many items that are downloaded: HTML code, images, JavaScripts, CSS style sheets, etc. All these elements can be factors that make your page load slower. And, because for Google a low load time influences the positioning of a site, it is important to make sure that nothing stops the DOM.

While there is a round trip with respect to  Google and JavaScript , it is still very important and many times we are forced to use it on our sites. It is important to emphasize that JavaScript is not bad for SEO as long as the content is not shown through it. For example, if we want a series of dropdowns to be updated according to the option selected in the previous dropdown, we will have to resort to JavaScript. That said, there are ways and ways to display the JavaScript code on a page.

When a page is loaded, a <script> tag can stop the download of the Document Object Model until it is finished processing and then continues. This can be problematic if you have a heavy script in the <head> of the code or in the upper part of the <body> above the main content of the page. If so, the content would not be visible until the code finishes processing. We all happened to be browsing on a page that loads and loads and after a few seconds all the content, images, etc. appear. suddenly. Most likely, in such cases, there is a script that is slowing the DOM to load and display quickly.

It is also advisable to reference those extensive JavaScript files so as not to have a large amount of code loading on the same page (and even more so if that script appears on all the pages). For certain cases, it will be necessary to use the asyncattribute inside the <script> tag to tell the browser not to stop loading the Document Object Model because of that script. The async attribute can only be used in referenced scripts and not in those listed on the same page. Below we show how to synchronize a script correctly.

<script src = "miscript.js" async> </ script>

If you decide to use the async attribute, do not forget that it should only be applied to the JavaScript code that has no impact on the content that is displayed. For example, if you have at the top of your code a script whose function is to change the style sheet according to a value previously selected by the user and load it asynchronously, you will see a design and then it will change automatically ( because the script ran when the DOM has finished loading).

In short, if you want to have a fast page load time, the first step is not to slow down the DOM . In following posts we will explain more about how to optimize a web page so that it loads faster.

We hope that this brief explanation about what is the DOM or Document Object Model has served to understand a little more the importance of it when it comes time to reduce the loading of a site.

amardeep kaushal

Blogger, Marketer & Data Analyst.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.