CSS Performance: Critical CSS, Unused CSS and Faster Rendering

JavaScript gets the blame for slow sites, but CSS quietly delays the first paint of almost every page. Each <link rel="stylesheet"> in the head must be downloaded and parsed before anything appears. On a typical page-builder site, that might be 10–20 stylesheets and several hundred kilobytes — mostly rules the page never uses.

How the browser handles CSS#

1. HTML parsing discovers stylesheet links.
2. The browser downloads them (in parallel, but each round trip costs time on mobile).
3. It parses them into the CSS Object Model.
4. Only then can it compute styles, lay out and paint the page.

That’s why CSS affects FCP and LCP directly.

1. Remove unused CSS#

• Use Chrome DevTools → Coverage (Ctrl+Shift+P → “Show Coverage”) to see how much of each stylesheet is used on a page.
• Deactivate plugins that load CSS sitewide for features used on one page (sliders, form builders, galleries).
• Use per-page asset managers (e.g. Perfmatters, Asset CleanUp) to unload plugin CSS where it isn’t needed.
• Page builders often offer “improved asset loading” or “load CSS per widget” options — enable them.
• Choose lightweight themes; a block theme or a lean custom theme can ship under 50 KB of CSS.

2. Inline critical CSS#

Critical CSS is the minimum needed to render the first screen. Inlining it in a <style> block lets the browser paint immediately, while the full stylesheet loads without blocking:

<style>/* header, hero, fonts, layout of first screen */</style>
<link rel="preload" href="/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/main.css"></noscript>

Caching plugins like WP Rocket, LiteSpeed Cache and others can generate critical CSS automatically. Test carefully — wrong critical CSS causes a flash of unstyled content.

3. Make stylesheets smaller#

• Minify CSS (remove whitespace and comments) — most caching plugins do this.
• Serve with Brotli or Gzip compression (usually automatic on good hosts and CDNs).
• Avoid @import inside CSS files; it creates sequential downloads.
• Combine tiny files only if you’re on HTTP/1.1; with HTTP/2 and HTTP/3, a few well-cached files are fine.

4. Fonts#

Web fonts are loaded by CSS and can delay text rendering. Use font-display: swap, limit families and weights, and consider self-hosting. Full guide: web fonts loaded fast.

5. Rendering performance#

• Animate transform and opacity only — see CSS animations that don’t hurt performance.
• Use content-visibility: auto on long below-the-fold sections to skip rendering until needed (test with your layout).
• Avoid huge box-shadows and filters on large or scrolling elements on low-end phones.
• Reserve space for images and embeds to avoid layout shift.

6. Caching#

Version your CSS file names or query strings (main.css?ver=1.2.0) and serve them with long cache lifetimes. WordPress does this automatically with wp_enqueue_style version parameters.