The Critical Rendering Path is the sequence of phases that the browser goes through to convert HTML, CSS and JavaScript into pixels on the screen:
These steps directly affect the performance of our website, so there will be things that we have to take into account if we want to optimize this process.
The browser receives the HTML through an HTTP call. As soon as it receives it, it starts building the DOM with that data.
This DOM is built based on nodes, each HTML tag would be equivalent to a node, and child elements in the HTML would also be child nodes in the DOM tree.
The greater the number of nodes, the longer the page rendering process will take to complete.
While the DOM contains all the information about the content of the page, the CSSOM contains all the information about how that content is going to be viewed.
CSS processing blocks rendering. That is, until it is completely processed, you cannot continue with future steps to finally display the content on the screen. This is because it may be the case that in a CSS file the styles that have been applied a few lines above are overwritten.
Once we have the DOM and CSSOM ready, these are combined resulting in the "Render tree", which will have all the necessary information about the elements that will appear on the screen. In this tree, elements such as everything that has display: none; and their descendants or everything that is found in the
tag.In the "Layout" phase the size of the render tree elements and their relationship with other elements is defined. This process depends on the screen on which the web page is being visited.
If not specified, elements will default to 100% of the parent's width, which in some browsers is a fixed width. That is why it is necessary to include this element in the
from our document:
<head>
<meta name="viewport" content="width=device-width" />
</head>
Every time a user rotates their mobile device, the Layout process is run again, as the elements and their arrangement on the screen can potentially change.
The Layout can affect the performance of a website, since the greater the number of nodes, the longer this process will take to finish. A slow Layout process can cause some animations to not look good, in addition to causing the first page load to be slower.
Painting the pixels on the screen is the last step of the rendering process. It is a quick step, since after the first load (onload) only those areas of the page that have undergone changes will be repainted; browsers are already optimized to avoid carrying out this process unnecessarily.
This process can be optimized in different ways, but each case is unique and in the end the important thing is that you apply to your project those measures that best suit it.
The idea is that the browser downloads resources such as images, styles, scripts, etc. that are crucial for the page as quickly as possible, so it would be advisable to put those elements as high as possible in the
.Even if they are scripts or smaller styles they can go in inline tags.
<head>
<meta name="viewport" content="width=device-width" />
</head>
On the other hand, if what you are loading is a script that modifies some element of the DOM, the idea would be to load it once the tree has been built with all its nodes. It is in those cases that it would be necessary to load that script at the end in the body tag.
<head>
<style>
.foo {
color: red;
}
</style>
</head>
Postponing the loading of scripts that do not modify the DOM is a very good practice to reduce the loading time of the website. This can be done through the "async" and "defer" attributes.
Putting a script as async will cause this script to download and run independently, so it would not block the rendering process and the execution time is arbitrary.
A script with the defer attribute will be downloaded asynchronously, but respects the order in which it is located in the document. It's also a good way to control whether a small script runs after a larger script.
<html>
<body>
<!-- My content -->
<script src="./path/to/my/script.js"></script>
</body>
</html>
In the example above the three scripts will be downloaded asynchronously. We assume that the last script will be downloaded first, since it is smaller. The first script will download and run completely independently, neither waiting for other elements to be ready nor blocking the rendering process. In any case, the last script will be executed after the second, since the defer attribute respects the order.
The idea would be to load only the styles that will be needed on the screen, so a technique that could help optimize performance would be to separate the page styles into different files depending on whether they are going to be applied to mobile phones , tablets, desktop, etc. In the HTML these files would be loaded with media queries, avoiding the unnecessary loading of styles.
<head>
<meta name="viewport" content="width=device-width" />
</head>
Although it may seem silly, minifying files can considerably help improve the performance of a page, since eliminating white spaces, comments, etc. can reduce the work that the browser has to do to build the render tree.
These are just a few things to keep in mind to optimize this process. With this in mind it is more viable to be able to write quality code that is already designed to optimize the Critical Rendering Path.
The above is the detailed content of What is the Critical Rendering Path and how to optimize it. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
