What is DOM blocking and how does it affect site speed?

When it comes to site optimization and understanding web performance, it is important to know the relationship between HTML and how the page is generated in the browser to realize that most of your website load time is due to a factor called Render Blocking.

In this article, we will delve deeper into DOM blocking and suggest ways to prevent this from happening.

 

What is the meaning of DOM?

DOM stands for Document Object Model, which translates to Document Object Model in Persian. The DOM is a programming interface for HTML and XML that provides a structured index (tree diagram) for a document, and scripts such as JavaScript are used to define how to access and manipulate them.

Our DOM tree diagram is exactly like any other family tree diagram and contains variable information. For example, we have designed a very simple example of a DOM for you:

 

Laymen terms in DOM

To make things easier, use the Devtools Chrome tool. (We talked more about the powerful Devtools Chrome tool in the Chrome Web Speed Analysis article.) This tool has a dedicated DML HTML section that you can easily access. Note that the HTML file of your site is not made up of DOM by default, but it is the user’s browser that creates the DOM after merging the HTML file and Javascript and CSS sources. So you can consider the content you see in the Devtools Chrome tool as a parsed version of HTML.

 

What is meant by DOM blocking?

If you want to optimize the speed of your website by website speed analysis websites, you should pay attention to the DOM blocking section because it is a very important part in reducing the website load speed. These sections are most often located on websites in the render blocking resources section. Such as HTML Render Blocking – CSS Render Blocking – JavaScript Render Blocking are related to this section.

One of the best ways to find a DOM blocker is to use the Devtools Chrome section, which we will teach you how to use:

1. Launch the developer tool in Google Chrome

  • Windows: F12 – or use Ctrl + Shift + I
  • Mac: Cmd + Opt + I

2 – Go to the Network panel and refresh the page with Ctrl + R.

3 – Now you see a cascading chart of your website load. Now we want to do two things, one of which is the speed of loading the DOM content, which is based on milliseconds and is blue in the pre-chart.

Because CSS and JavaScript files are resource-blocking resources that are loaded between or before the DOM blue, we can assume that they also block DOM.

Note that images are not known as Render Blocking, so if they are displayed in the DOM you can ignore them, although we still recommend that you optimize your images.

In the example below, the two sources Style.css and Jquery.min.js both block the DOM.

Another example you can use for this is Google’s PageSpeed Insights tool. As you can see below, the same two files mentioned above also have a render blocking problem here.

Follow our tips to solve the problem of your website DOM being blocked by CSS and JavaScript files and increase your speed. You can do this by gradually creating a DOM for your website.

Keep in mind that you do not need to score 100 out of 100 in Google PageSpeed Insights, for example, for Google fonts you have no way to solve the Render Blocking problem. So make sure that the resources that are rendered blocked on your website are not more than 10 and are always less than 10. This will greatly increase the loading speed of your website.

CSS

non-render blocking CSS

If you want to completely non-render blocking your website CSS files, there is only one good way. It is also inline CSS files. To do this, you need to put your website’s CSS code in the <style> tags before the </body> tag. This will no longer display your CSS as Render Blocking.

Automatic inline CSS plugins

  • Grunt: grunt-critical-css
  • critical

You can also upload your CSS files via JavaScript files, but keep in mind that this is done after all the files have been loaded, which is not ideal for visitors at all.

Also on Google PageSpeed Insights, you can see that the website got 95 points out of 100 and increased by 2 points.

While this may seem overwhelming, it also depends on your website. For most websites that have multiple CSS files, it is not possible to load their styles in the original HTML file, and even if it is possible and does not increase the loading speed, it does not slow down due to the volume it adds to the HTML page. Gives. This is a very practical and good way to suggest landing pages (what is a landing page) and small websites, but for large websites you have to think of another way. Read comprehensive and useful descriptions about inline css.

Our suggestion for CSS

For example, a landing page tries to have at most one Render Blocking resource. However, below are some tips that can increase the loading speed of your pages.

  • Introduce your CSS files correctly. For example, the article Put CSS in the document head and Optimize the order of styles and scripts can help you with this.
  • Use some Media Queries to load CSS files. This Media means that the site is responsive.
  • Reduce the number of your CSS resources, move all CSS resources to one CSS file We have explained this comprehensively in the GTmetrix tutorial posts.
  • Compress your CSS files. (Clear spaces, extra characters, and comments to make the article a Minify CSS article) Use
  • less CSS.

Automatic CSS compression plugins

  • Grunt: grunt-contrib-cssmin
  • Gulp: gulp-minify-css

Java Script

non-render blocking JavaScript files
There are generally several ways to completely eliminate the Render Blocking problem in JavaScript files:

  1. Place the files with the <script> tag before </body>.
  2. Use asynchronous or delay to remove render blocking.
  3. Reduce the number of JavaScript files by unifying the Java code in one file.
  4. Compress JavaScript files
  5. Inline JavaScript code if it is short

Asynchronous execution of JavaScript files (async JS)

Synchronization allows JavaScript files to be fully loaded in the background of the website. Then, after it is fully downloaded, it will be Render Blocked and the script will be executed.

Render continues when the script is executed.

<script async src = “foobar.js”> </script>

Delay the loading of JavaScript (Defer JS) files

Delaying loading is just like synchronizing, except that it ensures that the scripts are loaded in sequence.

So some scripts may be downloaded sooner but wait for their higher priority to be downloaded first and then loaded after the script is executed.

We have fully explained this in the article Defer parsing of JavaScript.

Automatic JavaScript file compression plugins

  • Grunt: grunt-contrib-uglify
  • Gulp: gulp-uglify

As you can see, by inserting the JavaScript files into the HTML file, the only rendered Blocked file is jquery.min.js, and the DOMContentLoaded speed is reduced to 144 milliseconds.

Due to the inline of the JavaScript code, you will see that we received a score of 100 out of 100 points on Google PageSpeed insights. You can also increase your score by doing this.

Web fonts

Web fonts are also a source with Render Block capability because they are loaded by CSS, you have two options to solve this problem, either leave it and leave it as Render Block or rebuild it from scratch later. (You must use FOUT in the future)

For example, in Chrome (+36), Opera (+23) and Firefox, we need 3 seconds to load the fonts.

Here are some suggestions on how to look or get an appointment for fonts.

  • Use a web font loader. (Font Loading API)
  • Optimize fonts by inline.
  • Use storage methods such as localStorage.

You can also find out more about font load optimization on web pages with a simple search.

Summary

We hope you enjoy this SEO tutorial, which was aimed at improving the speed of your site, and that it was useful for you. In this article, you will learn that blocking DOMs may be due to Render Blocking of CSS, JavaScript, or Web font resources, and we have taught you how to troubleshoot these resources.

Remember that getting a 100 out of 100 score is not always necessary for websites, and it only matters that you have the minimum DOM blocking as well as the maximum speed on your website, so instead of spending time on scores, think about website speed. Be yourself.

Posted on SEO teaching, some photos are taken from keycdn.

Leave a Comment