If you are a web developer, you probably want your website to load fast and look good on any device. But how do you achieve that? How does the browser turn your HTML, CSS, and JavaScript code into a beautiful webpage that users can see and interact with?
In this blog post, we will explore the concept of the critical rendering path (CRP), which is the sequence of steps that the browser takes to display a webpage on a user’s device. We will also learn some tips and best practices to optimize the CRP and improve the performance of your website.
What is the Critical Rendering Path?
The critical rendering path (CRP) is the sequence of steps that the browser goes through to convert the HTML, CSS, and JavaScript files into pixels on the screen. It starts with the browser requesting the files from the server and ends with the fully rendered page being displayed to the user.
The CRP consists of the following steps:
- Document Object Model (DOM)
- CSS Object Model (CSSOM)
- Render Tree
- Layout
- Paint
How does each step work?
1. Document Object Model (DOM)
The DOM is created as the browser parses the HTML file. The HTML file consists of tags that represent different elements on the page, such as headings, paragraphs, images, links, etc. The browser converts these tags into tokens, which are then converted into nodes, which are then connected into a tree-like structure based on their hierarchy.
Consider this simple HTML file:
<html> <head> <title>Tech Blog</title> </head> <body> <h1>Hello Reader</h1> <p>This is my tech blog.</p> <img src="logo.png" alt="Logo"> </body> </html> The browser will parse this file and create a DOM tree like this:
The DOM tree represents all the content of your website and can be accessed and modified by JavaScript. For example, you can use document.getElementById() or document.querySelector() to select a specific element in the DOM tree and change its attributes or content.
2. CSS Object Model (CSSOM)
The CSSOM is created as the browser parses the CSS file. The CSS file consists of rules that define how different elements on the page should look, such as colors, fonts, margins, borders, etc. The browser converts these rules into tokens, which are then converted into nodes, which are then connected into a tree-like structure based on their specificity.
Consider this simple CSS file:
body { font-family: Arial; background-color: white; } h1 { color: blue; font-size: 36px; } p { color: black; font-size: 18px; } img { width: 100px; height: 100px; } The browser will parse this file and create a CSSOM tree like this:
The CSSOM tree represents all the styles of your website and can be accessed and modified by JavaScript. For example, you can use document.styleSheets or element.style to select a specific style sheet or element in the CSSOM tree and change its rules or properties.
3. Render Tree
The render tree is created as the browser combines the DOM and the CSSOM trees. The render tree contains only the visible elements on the page and their computed styles. The render tree is used to determine how each element should be displayed on the screen, such as their size, position, color, etc.
For example, consider the same HTML and CSS files from the previous examples. The browser will combine them and create a render tree like this:
The render tree does not include elements that are not visible on the page, such as <head>, <title>, <script>, <style>, etc. It also does not include elements that have display: none or visibility: hidden styles. The render tree can be modified by JavaScript as well, such as by adding or removing elements, changing their styles, etc.
4. Layout
The layout step is also called reflow or layout thrashing. It is the process of calculating the size and position of each element in the render tree, relative to the viewport. The viewport is the visible area of the browser window, which can vary depending on the device, screen size, zoom level, etc.
For example, consider the same HTML and CSS files from the previous examples. The browser will calculate the layout of each element in the render tree and assign them coordinates like this:
The layout step can be triggered by various events, such as resizing the browser window, changing the font size, adding or removing elements, changing their styles, etc. The layout step can be expensive and time-consuming, especially if it affects many elements on the page. Therefore, it is important to minimize the number of layout events and optimize their performance.
5. Paint
The paint step is also called rasterization or painting. It is the process of painting each element in the render tree onto pixels on the screen, using layers and compositing. Layers are used to group elements that have similar properties or effects, such as opacity, transform, animation, etc. Compositing is used to merge different layers into a final image that is displayed to the user.
For example, consider the same HTML and CSS files from the previous examples. The browser will paint each element in the render tree onto pixels on the screen like this:
The paint step can be triggered by various events, such as scrolling, hovering, animating, etc. The paint step can be expensive and time-consuming, especially if it affects many pixels on the screen. Therefore, it is important to minimize the number of paint events and optimize their performance.
Conclusion
The critical rendering path is an important concept for web developers who want to improve their website’s performance and user experience. By understanding how each step works and applying some optimization techniques, you can make your website load faster and look better on any device.
If you want to learn more about web performance and CRP, you can check out this resources:
Web performance | MDN