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 1. For the moment we will simplify it a little and talk about four main steps that will illustrate the importance of the CSSOM...
- The web browser examines your HTML and builds the DOM (Document Object Model).
- The web browser examines your CSS and builds the CSSOM (CSS Object Model).
- The web browser combines the DOM and the CSSOM to create a render tree.
- 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.
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.
- Know that the CSSOM blocks anything from rendering.
- Know that the CSSOM has to be built everytime you load a new page.
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.
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.
- Ensure you are optimizing CSS delivery.