What is Critical CSS and How It Impacts Page Speed?
Remember the movie Speed in which a bomb on a bus was about to explode, if its speed dropped below 50 mph? It would be nice, if there was a similar kind of “bomb” which would keep websites’ speed up. Critical CSS is just it. But let’s get into some more detail how it does that.
When your website is slow, the first place where you will go to check its speed, would probably be Google’s PageSpeed Insights tool. You enter the URL of the website and Google’s tool shows its suggestions in the results. The usual suggestion is to “eliminate render-blocking CSS in above-the-fold content”. This might sound complicated, if you don’t split the text in chunks. So, let’s do that.
Above-the-fold content is an old graphic design term which comes from newspapers. It indicates the part of the paper which is visible to the eyes, before you fold the paper in half. In our case, above-the-fold is the part of the webpage which you see before you scroll down the page. Basically, this is the first thing you see on a website. The pixel height of the above-the-fold content depends on the device on which you are loading the site.
Render-blocking CSS refers to any external CSS (also called Cascading Style Sheets) that is needed to render this above-the-fold content and it is called render-blocking because it blocks the rendering of the page until it is fully loaded. That makes a webpage render longer in time, because it waits for all the CSS files to load, parse and execute in the above-the-fold content. This means that if the webpage has a large CSS file, users will have to wait for the whole CSS file until the browser can load the whole webpage. Until then users will see simply a white screen. What is more, the speed of the website will depend on how big the CSS files are (how many KB there are). Therefore, it is important to optimize CSS for page speed and user experience on the website. Here comes in handy Critical CSS.
What does Critical CSS mean?
Critical CSS, also known as “critical CSS rendering path” can be considered the opposite of render-blocking CSS because it is the minimum part which is needed in order to load the top of the page (above-the-fold content). It is the minimum, critical CSS, which you need in order to make the top of the webpage load and appear to the user.
In other words, you need to only load the critical CSS required to load the top of the page (what the user sees at first). You might wonder what happens then to the rest of the CSS. It can simply be loaded asynchronously (or later).
In order to implement Critical CSS, you need to choose a point on the page above which CSS would be considered critical. This is solely up to you, but specialists would recommend a number of about 1300 px height, so that you are safe to go.
How does Critical CSS work?
If you load all the CSS for every user on every page, this will definitely result in the slower loading time of your website. This can sometimes lead to a white screen appearing to the user or significant parts of the page not appearing. Thus, it is important to figure out which elements are critical and which are critical sometimes, or never. For example, background color or page styling are almost always critical, while CSS that is below the fold is almost never critical to load at first.
In other words, you don’t need all the CSS for every page and every user, but you will certainly need it at some point. For example, different elements of the CSS would be needed to load the About Us page and another set of CSS would be needed for the Blog page. Therefore, Critical CSS will vary from page to page and from user to user.
In order to implement it, first of all, you need to make two different sets of CSS files. The first file will be your Critical CSS, which will contain only the minimum set of CSS needed to load the above-the-fold content. You then need to inline it in the webpage. The second file is the so-called non-critical CSS. You will load it asynchronously so that it doesn’t slow down the loading of the webpage. These two types of loadings are known as loading CSS “inline” or loading it “asynchronously”.
As a result, Critical CSS eliminates all the unnecessary steps in the path to loading a webpage to the user faster.
NitroPack has the solution
If you are not a pro at coding and you are not sure how to inline Critical CSS in the
of your page, NitroPack comes as a solution to page speed issues. This is especially important, if your website has hundreds of different pages. NitroPack has a functionality which extracts the base CSS needed to load the above-the-fold content of the webpage. Then, the webpage no longer loads slowly and the CSS files are not render-blocking.
If we go back to the movie Speed and the “bomb” metaphor, you can now see how Critical CSS keeps the speed of the “bus” (or better say the webpage) up, by making the path on which it drives load and render smoother and faster.