Contact

CSS and the Critical Rendering Path

Everyday web users expect our websites to load fast. Like less than 3 seconds fast. And unsuprisingily, more and more users are accessing our sites via mobile devices. We have to ensure our sites are not only fast on standard WiFi, but also fast enough to access on slower networks like 3G.

We are going to explore various web performance techniques that can be useful for most any modern website. Some are simple–like ensuring your image file sizes are small enough–and others take more time to implement but do produce positive web performance gains.

Today, we'll take a look at the CSS Critical Path. What is it? Where is it? And how does it affect performance? Let's dive in.

What is the Critical Rendering Path?

The Critical Rendering Path is a series of necessary steps that happen before the intial view of a webpage is rendered:

  1. Document Object Model(DOM)
  2. CSS Object Model(CSSOM)
  3. Render Tree
  4. Layout
  5. Paint

Document Object Model (DOM)

The first step the browser takes is constructing the Document Object Modal ("DOM"). The browser will make a request for your HTML and then parse through all the HTML tags (e.g <p>, <h1>, </div>), convert them into tokens and then nodes. Processing the tokens allows the HTML parser to begin constructing a hierarchy of parent and child nodes. You can visualize this heirarchy like a tree: html-tree

If there are links to JavaScript and CSS during the HTML parsing, those links will be fetched. Similar to HTML, the browser will construct a tree like model for your CSS called the CSS Object Model.

CSS Object Model (CSSOM)

The browser needs to convert the CSS into something it can work with and later match with the HTML. It follows the same process as HTML of converting characters to tokens, then nodes and finally a tree model for the CSS is constructed known as the CSS Object Model. css-tree

Considering the example CSSOM above, the <body> styles will first be interpreted as these are the most general. Any element within the <body> will inherit these styles because they have "cascaded" down. For example, all elements within the <body> will have a font size of 18px unless it is specifically overriden.

But how are the styles from the CSSOM linked up with the DOM? That's where the Render Tree comes into play.

Render Tree

The Render Tree is where the DOM and the CSSOM are combined into one. This process involves traversing down the DOM tree, starting at the root node. Any node that is not visible, will not be included in the Render Tree. Each node from the DOM will be paired with its cooresponding node on the CSSOM, and that style will be applied.

The final result is a tree that contains both the DOM's content and the CSSOM's style information of all the visible content on the page. Keep in mind, nothing is visible yet to the user at this step.

Layout

At this point, the browser has all the content and style information, but the sizing and position of the content still needs to be determined. The browser will begin at the root of the Render Tree and make its way down the tree. Everytime a element within the render tree is updated, or the size of the viewport changes, the layout process initializes again.

Paint

Last, each individual node is "painted" or "rasterized" on the screen as pixels and will now be visible to the user. The CSS properties you use affect how long this step can take. For instance, painting a drop-shadow is much more expensive than a border. Depending on the size and complexity of your content, the Paint step can be costly in terms of time to complete.