Critical CSS
How Critical CSS Works
Critical CSS is the set of style rules a browser needs to draw the part of a page visible on arrival, usually called the above-the-fold area. Instead of waiting for a full external stylesheet, the page includes these rules directly in its HTML so the first screen can be painted sooner.
A typical stylesheet holds far more than the first screen needs. It styles the header, the footer, every menu, forms on other pages and many components a visitor may never reach. The browser normally has to download and parse that whole file before it paints, because stylesheets are render-blocking resources.
The critical part is found by checking which rules match elements in the initial viewport, at a common phone and desktop size. Those rules are placed in a <style> block in the document head. The complete stylesheet is then loaded afterwards in a way that does not block the first paint, so styles for the rest of the site still apply when the visitor scrolls or navigates.
Trade-Offs of Inlining CSS
Inlining brings a clear benefit, but it also has costs that a site owner should understand.
- Larger HTML. Inlined rules travel inside every HTML document, so each page becomes heavier. Pages that are not cached pay this cost on every visit.
- Lost sharing. An external stylesheet is cached and reused across pages. Inlined rules are part of each HTML file, so the browser cannot reuse them from one shared file.
- Upkeep. When the design changes, the critical rules must be extracted again. Outdated critical CSS can leave old styles on screen or hide new layouts.
For this reason, critical CSS is most useful on templates shared by many pages, or on a few important landing pages. Sites with many unique layouts may find the upkeep outweighs the gain. Reducing the full stylesheet with minification still helps the parts that are not inlined.
A Shop Homepage Before and After
Consider a small online shop whose homepage shows a large banner, a navigation bar and three product cards above the fold. Its theme loads a 300 KB stylesheet that also contains rules for the checkout, blog and account pages. On a slow mobile connection, the banner stays blank until the whole file arrives.
With critical CSS in place, the header, banner and product card rules are inlined into the homepage. The first screen can be drawn while the full stylesheet loads in the background. Visitors see content sooner, although the homepage's raw HTML is larger. The checkout and blog pages keep using the external file, as before.
Frequently asked questions
Is Critical CSS the Same as Minified CSS?
No. Critical CSS is a selection of the rules needed for the first screen, placed directly in the page. Minified CSS is the full stylesheet with whitespace and comments removed. The two techniques can be combined, and the inlined block is usually minified too.
Does Critical CSS Improve Core Web Vitals?
It can improve Largest Contentful Paint, because the browser can render the main content without waiting for the full stylesheet. It does not fix every slow metric. Scripts, large images and a slow server response affect other timings and need their own solutions.