Critical CSS

Definition

A technique that extracts the CSS for above-the-fold content and inlines it directly into the HTML document, while deferring the rest of the CSS.

Explain Like I'm New

When a user visits your site, they only see the top 20% of the page (the hero banner and navigation). They don't see the footer until they scroll down. Critical CSS grabs ONLY the CSS needed to paint that top 20%, shoves it directly into the HTML `<head>`, and loads the footer CSS later. This makes the website appear instantly on the screen.

Real World Example

Getting a perfect 100/100 score on Google PageSpeed Insights. Without Critical CSS, the browser stares at a blank white screen for 2 seconds while it downloads the massive `styles.css` file.

Common Use Cases

•Extreme performance optimization
•Core Web Vitals improvement (LCP)

Interactive Example

Interview Questions

basic

Where does Critical CSS go in the HTML document?

intermediate

If Critical CSS is so good, why not inline the entire `styles.css` file?

Flash Cards

Question

Where does it go?

Click to reveal answer

Answer

It is written inside a `<style>` tag directly in the `<head>` of the HTML.

Question

Why not inline everything?

Click to reveal answer

Answer

Because external CSS files can be cached by the browser. If the user visits a second page on your site, the browser instantly loads the cached `.css` file from their hard drive. If you inline EVERYTHING into the HTML, the user has to re-download the massive CSS chunk on every single page they visit.