CSS Optimization: Performance, Size and Loading Speed

Why CSS Performance Matters

CSS is a render-blocking resource. The browser cannot render the page without loading CSS. Large CSS files increase First Contentful Paint (FCP) time.

Unused CSS increases page size and extends loading time. Typically 60-80% of CSS on a website is unused.

CSS optimization improves Core Web Vitals metrics (especially LCP and CLS). Optimized CSS provides a faster and smoother user experience.

CSS Minification

Minification reduces file size by 20-40% by removing spaces, comments, and unnecessary characters from CSS.

Tools: cssnano, clean-css, Terser (CSS support). Use minification plugin in your build pipeline (Webpack, Vite, Rollup).

Combined with Gzip/Brotli compression, minification can reduce CSS file size by 70-80%.

Always use minified CSS in production builds. Use readable CSS in development.

Critical CSS

Critical CSS is the CSS needed for above-the-fold (first view) content. Add this CSS inline in <head>.

Load non-critical CSS async: <link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">.

Tools: Critical (npm package), Penthouse, Critters (Webpack plugin). These tools automatically extract critical CSS.

Critical CSS size: Keep under 14KB (TCP slow start window). Larger critical CSS bloats the initial payload.

Removing Unused CSS

PurgeCSS removes unused CSS selectors. Used together with frameworks like Tailwind CSS, Bootstrap.

PurgeCSS configuration: Define content (HTML/JS files to scan) and safelist (selectors to keep).

Chrome DevTools Coverage tab: Detect unused CSS. Coverage report shows how much of each file is used.

CSS-in-JS: Libraries like Styled Components, Emotion only render used styles. Unused CSS is automatically removed.

CSS Loading Strategies

Code splitting: Create separate CSS file for each page. Use Webpack CSS code splitting or Vite's automatic splitting.

Lazy loading: Lazy load CSS for specific components (modal, tooltip). Load CSS file on demand with dynamic import().

Font loading: Use font-display: swap with @font-face. Minimize FOIT (Flash of Invisible Text) and FOUT (Flash of Unstyled Text) issues.

Media queries: Split conditional CSS (print, dark mode) into separate files: <link rel="stylesheet" href="print.css" media="print">.

Preconnect: Use <link rel="preconnect" href="https://fonts.googleapis.com"> for external CSS sources (Google Fonts).

CSS Best Practices

Keep CSS specificity low. Deep selector chains (div > ul > li > a) reduce performance. Use flat selectors.

Use Flexbox and Grid. Float-based layouts require more CSS and render slower.

CSS containment: Limit element's render scope with contain: layout paint style. This allows browser to optimize render area.

Will-change: Use will-change: transform on animated elements. But excessive use reduces performance.

Use CSS custom properties (variables). Manage repeated values (color, size) with variables.