Critical CSS is a technique used to optimize the loading performance of a website. The idea is to identify the CSS that is necessary to render the above-the-fold content of a webpage and extract it from the main CSS file. This critical CSS is then inlined into the HTML document, and the remaining CSS is loaded asynchronously.
The critical CSS is only a small subset of the entire CSS file and it is only used to style the visible content on the page. This means that the browser can render the above-the-fold content of the page much faster, since it doesn’t have to wait for the entire CSS file to be loaded.
There are different ways to extract critical CSS:
- Manually: Website developers can manually identify the critical CSS by going through the CSS and selecting the styles that are necessary to render the above-the-fold content of the page.
- Automatically: There are some tools that can automatically extract critical CSS by analyzing the HTML and CSS of a webpage, such as Penthouse, Critical, and CriticalCSS.
Advantages of using critical CSS include:
- Faster loading times: By inlining critical CSS, the browser can render the above-the-fold content of the page much faster, which can improve the user experience.
- Better SEO: Faster loading times can also benefit search engine optimization (SEO) by improving the page’s speed score.
- Better performance on low-end devices: By reducing the amount of data that needs to be loaded, critical CSS can also improve the performance of a website on low-end devices with slow internet connections.
Disadvantages of using critical CSS include:
- Increased maintenance: Extracting and maintaining critical CSS can be time-consuming and requires a good understanding of the website’s structure and layout.
- Complexity: The process of extracting critical CSS can be complex, and it may require the use of specialized tools and knowledge.
- Increased HTML size: Inlining critical CSS into the HTML document can increase the size of the HTML file, which can negatively impact the performance of the website.
It’s important to note that critical css is not a silver bullet, and it should be used in conjunction with other performance optimization techniques such as minifying and compressing CSS and JS files, lazy loading, and use of webfonts as needed.
The process of creating critical CSS typically involves:
- Identifying the CSS styles that are used to render the above-the-fold content.
- Extracting those styles from the full CSS file and creating a separate “critical” CSS file.
- Inlining the critical CSS file into the HTML document, so that it is loaded and applied to the above-the-fold content as soon as possible.
- Loading the remaining CSS asynchronously or using a technique like loading it after the first paint, so that the full CSS is loaded and applied without blocking the rendering of the above-the-fold content.
Here is an example of how critical CSS can be implemented in a website:
In the HTML file, you will inline the critical CSS in the head section of the document:
<head>
<style>
/* Critical CSS styles */
/* Only the styles that are needed to render the above-the-fold content */
/* This can include the styles for the header, navigation, and main content */
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
header {
background-color: #333;
color: #fff;
}
/* etc... */
</style>
</head>Next, you will load the full CSS stylesheet asynchronously, typically by using a technique like link[rel=preload] or link[rel=stylesheet] with media attribute set to print to load the full css after the first paint:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">In the corresponding JavaScript file, you can then remove the inlined critical CSS.
const criticalCss = document.querySelector('style');
criticalCss.remove();Please note that, this example is a simple example, and in reality there are tools and libraries that can help you to automatically extract and inline the critical CSS, and also load the full css in a non-blocking way.
It’s also important to note that critical CSS is not a one-size-fits-all solution, and it’s important to test the results on different devices and browsers.