HTML & CSS Interview Question #142

What is critical CSS?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

Critical CSS is the subset of styles needed to render the initially visible or otherwise important portion of a page. Some performance strategies inline or prioritize these rules so the browser can display useful content before a larger stylesheet finishes loading.

Detailed Explanation

Critical CSS is the subset of styles needed to render the initially visible or otherwise important portion of a page. Some performance strategies inline or prioritize these rules so the browser can display useful content before a larger stylesheet finishes loading.

Critical CSS must be generated and maintained carefully because duplicating too much CSS increases HTML size and complexity. Whether it improves performance depends on the application's delivery architecture, caching, and measured bottlenecks.

Code Example

<head>
    <style>
        /* Small example of initial-page styles */
        body { margin: 0; font-family: sans-serif; }
        .hero { min-height: 20rem; }
    </style>

    <link rel="stylesheet" href="/css/site.css">
</head>