CSSOM

What is CSSOM?

• CSSOM stands for CSS Object Model.
• It is basically a "map" of the CSS styles found on a web page.
• It is much like the DOM, but for the CSS rather than the HTML.
• The CSSOM combined with the DOM are used by browsers to display web pages.

The CSSOM is vital to a page rendering.

It is a fundamental, core part of the critical rendering path, and understanding what it does is an important part of web performance optimization (making web pages load faster).

What does the CSSOM do?

It maps out the rules in your stylesheet to the things on the page which need styling.

The CSSOM takes many complicated steps to do this, but the end function of the CSSOM is to map out styles to the places those styles need to go.

(More precisely, the CSSOM identifies tokens and coverts them into nodes which are linked into a tree structure. The entire map of all the nodes with their associated styles of a page would be the CSS Object Model).

Web browsers use the CSSOM to render a page

To display your webpage, a web browser must take a few steps ¹. For the moment we will simplify it a little and talk about four main steps that will illustrate the importance of the CSSOM...

1. The web browser examines your HTML and builds the DOM (Document Object Model).
2. The web browser examines your CSS and builds the CSSOM (CSS Object Model).
3. The web browser combines the DOM and the CSSOM to create a render tree.
4. The web browser displays your webpage.

As you can see in the above steps, the CSSOM is truly an important part of displaying a webpage.

Good news

You don't have to understand how the CSSOM actually works in order to optimize your web pages.

There are only a few key points that a webmaster needs to know about the CSSOM to take advantage of the very real page speed optimizations that can be made.

1. Know that the CSSOM blocks anything from rendering.
2. Know that the CSSOM has to be built everytime you load a new page.
3. Know that there is a relationship between the CSS your page loads and the javascript your page loads.

Let's look at each of those points quickly and then we will go into what we can do to improve our pages...

1. The CSSOM blocks anything from rendering

All CSS is render blocking (meaning nothing is displayed until the CSS is dealt with).

The reason this is true is because if browser were to show web page content before CSS is examined, then every web page you visit would be seen unstyled, and then a few moments later it would snap into being styled and the whole thing would be a bad experience. It would look terrible.

Since the CSSOM is used to help create the render tree, the way CSS is used on a web page has some very severe consequences if not done efficiently.

The main consequence is a blank screen while your web page is loading.

2. The CSSOM has to be built everytime you load a new page

This may or may not seem obvious to you, but it is a very important point.

This means that even if your CSS is cached, that does not mean the CSSOM is built for every page.

The CSSOM has to be built again when a user goes to another one of your pages (even though the browser may already have all the required CSS already cached).

In other words, if your CSS is crappy and large and written terribly, it will still negatively affect how your pages load.

3. There is a relationship between the CSS your page loads and the javascript your page loads

The way javascript is used on your web pages may (and often do) block the CSSOM from being built.

To lay it all out in plain english... The CSSOM is required to display anything. Nothing is displayed until it is done. If you block the process of the CSSOM being built, then the CSSOM takes longer, and that means it takes longer for anything to display. If your javascript is blocking the CSSOM from being built, your users are looking at blank pages longer than they should.

General optimizations which affect the CSSOM

Here are the main page speed best practices that will help your CSSOM get built faster (and therefore make your pages load faster)...

• Optimize your critical rendering path.
• Make sure your pages are calling stylesheets before javascripts.
• Ensure you are optimizing CSS delivery.

by Patrick Sexton