Inlining critical CSS can make your website super fast. But it's not always easy to implement, and there are some downsides.
In this article we take a look at how you can optimize stylesheets on your website, and take a look at some common challenges.
CSS and page speed
Websites are made up of different resources, like the HTML document and CSS stylesheets files. An unstyled website generally won't be useful, so CSS files are render-blocking: all page content is hidden until after they are loaded.
A request waterfall like this shows the problem: while the CSS is loading the user just sees a blank page. Here the HTML code is loaded after 475 milliseconds, but the visitor has to wait three times that long before they can see the first page content.
The critical rendering path describes the set of steps required to render page content.
What is critical CSS?
Critical CSS refers to essential stylesheet rules required to render page content. As long as these styles are ready the browser can start rendering page content while still providing a good experience.
Typically that means critical CSS for above-the-fold page content, for example:
- The general page layout
- Header and navigation elements
- The first one or two content sections
- Sticky or fixed page elements
Inlining critical CSS
Inlining critical CSS means embedding the essential styles directly in the HTML document, rather than loading them with a separate request. If JavaScript code is also deferred, that means the page can start rendering as soon as the HTML starts to load.
Here's an example of a website where all critical CSS is embedded as a <style> tag in the HTML <head> section. Page content becomes visible less than 200 milliseconds after the document request finishes.
The full CSS files then load afterwards, so that when the visitor starts scrolling that content is also displayed correctly.
If we check the Sources tab in Chrome DevTools we can see the inlined CSS code.
How to generate critical CSS
Now, a big challenge is identifying what styling rules are critical and which can be omitted. Different visitors might see different content above the fold, depending on screen size, login status, or other website state.
You can use a tool like penthouse to generate critical CSS. It opens a page in Chrome at a pre-defined viewport size and identifies the CSS code that's needed to render visible content. You can then embed that into your page HTML.
Keep in mind that you'll have to update your critical CSS after making changes to your website.
There are also online critical CSS generators that you can use to identify essential CSS rules for your website. These can be useful if you just want to try out critical CSS and measure the performance impact (you can use our free website speed test for that).
Lazy-loading the full stylesheet files
If you just inline critical CSS you won't see an improvement in page load time, as the full stylesheets still block rendering.
You can lazy-load your stylesheet files using a preload link tag. Since it's not a stylesheet <link> it won't block rendering. Then, you only tell the browser to apply the styles once they are loaded.
This is achieved by adding an onload handler to the preload tag, which changes the rel attribute from preload to stylesheet.
<link
rel="preload"
href="/style.css"
as="style"
onload="this.rel='stylesheet'"
/>
Harry Robert's critical CSS article discusses different approaches to loading the full-size CSS in more detail.
Disadvantages of inlining critical CSS
Inlining critical CSS can improve page load time, even if it comes at the cost of additional complexity. However, there are also a few disadvantages.
For example, inline styles increase the size of your HTML file. Critical styles are duplicated between <style> tags and the full CSS files.
The HTML Size Analyzer can tell you how much of your HTML code consists of inline styles.
When your CSS code is separate from the HTML, the browser can cache these files for repeat visits. The styles can be loaded once and then re-used for all subsequent page renders.
However, critical CSS can't be re-used between different page loads on your website. So subsequent page views can actually be slower than they would be without critical CSS.
You might also miss styles that are required for certain edge cases. This would result in layout changes once the necessary styles load.
Is loading CSS really your main problem?
Before deciding to inline critical CSS, check if it's actually the bottleneck for rendering content on your website.
For example, if you still have render-blocking JavaScript code, inlining CSS is unlikely to help. The request waterfall below shows an example of a website where a JavaScript file is delaying rendering.
You might also be able to optimize how you load your CSS code, and reduce the download size of your stylesheets.
For example, the website below loads three different CSS files. The first two load quickly because they are loaded from the same domain as the HTML file. That means they can re-use the existing HTTP server connection.
In contrast, the third CSS file is loaded from a different domain. That means three network round trips are required to connect to the new server before the stylesheet itself can be loaded.
Measure the impact of your optimizations
Extracting critical CSS to inline it in your HTML code can help your website load super-fast. But often it's not the most impactful optimization.
Use web performance tooling to check what's really holding back your website, and monitor your page speed over time to check that the changes you're making actually improve performance.
DebugBear can run regular synthetic page speed tests, as well as collecting real user performance analytics.
Monitor Page Speed & Core Web Vitals
DebugBear monitoring includes:
- In-depth Page Speed Reports
- Automated Recommendations
- Real User Analytics Data