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?
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
What is meant by DOM blocking?
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.
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.
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.
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
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
- Place the files with the <script> tag before </body>.
- Use asynchronous or delay to remove render blocking.
Render continues when the script is executed.
<script async src = “foobar.js”> </script>
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.
- Grunt: grunt-contrib-uglify
- Gulp: gulp-uglify
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.
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.