CSS Optimization & Critical CSS Extraction | Blue Frog Docs

CSS Optimization & Critical CSS Extraction

Optimizing CSS delivery and extracting critical CSS to improve First Contentful Paint and Largest Contentful Paint

CSS Optimization & Critical CSS Extraction

What This Means

CSS optimization involves reducing the size and improving the delivery of your stylesheets to accelerate page rendering. Critical CSS extraction is the process of identifying and inlining the minimal CSS needed to render above-the-fold content, while deferring the rest. This eliminates render-blocking CSS and dramatically improves First Contentful Paint (FCP) and Largest Contentful Paint (LCP).

Understanding the CSS Performance Problem

Render-Blocking CSS:

  • Browsers wait for CSS to download before rendering page
  • Large stylesheets delay First Contentful Paint
  • Users see blank screen while CSS loads
  • Mobile networks especially affected

Common CSS Performance Issues:

  • Bloated CSS files with unused rules
  • Multiple stylesheet requests
  • Unoptimized CSS delivery
  • No critical CSS extraction
  • Inefficient selectors
  • Redundant or duplicate styles

Impact on Your Business

Performance Metrics:

  • FCP Impact: Can improve by 1-3 seconds
  • LCP Impact: Often improves by 500ms-2s
  • Total Blocking Time: Reduced CSS parsing time
  • Lighthouse Score: Significant performance boost

User Experience:

  • Faster visual rendering
  • Reduced blank screen time
  • Better perceived performance
  • Improved mobile experience

Business Results:

SEO Benefits:

  • Core Web Vitals ranking factor
  • Better mobile search rankings
  • Improved crawl efficiency
  • Enhanced user signals

How to Diagnose

Method 1: Chrome DevTools Coverage Tool

  1. Open Chrome DevTools (F12)
  2. Open Command Menu (Cmd+Shift+P or Ctrl+Shift+P)
  3. Type "coverage" and select "Show Coverage"
  4. Click reload button in Coverage panel
  5. Review CSS files showing unused bytes

What to Look For:

  • Red bars showing unused CSS
  • Percentage of unused code (should be < 20%)
  • Large stylesheets with high unused %
  • Multiple small CSS files that could be combined

Example Results:

style.css: 234 KB total, 187 KB unused (80% unused) ❌
vendor.css: 89 KB total, 72 KB unused (81% unused) ❌
critical.css: 12 KB total, 0 KB unused (0% unused) ✓

Method 2: Lighthouse Audit

  1. Open Chrome DevTools (F12)
  2. Navigate to "Lighthouse" tab
  3. Run Performance audit
  4. Check these opportunities:

What to Look For:

  • Render-blocking CSS files
  • Estimated savings in milliseconds
  • Specific files to optimize
  • CSS file sizes

Method 3: PageSpeed Insights

  1. Visit PageSpeed Insights
  2. Enter your URL
  3. Review "Opportunities" section
  4. Check:
    • "Eliminate render-blocking resources"
    • "Reduce unused CSS"
    • "Minify CSS"

What to Look For:

  • List of render-blocking stylesheets
  • Potential time savings
  • Field data showing real user impact
  • Mobile vs desktop differences

Method 4: WebPageTest Waterfall Analysis

  1. Visit WebPageTest.org
  2. Enter your URL and run test
  3. View waterfall chart
  4. Look for:
    • CSS files loading before first paint
    • Long download times for stylesheets
    • Multiple CSS requests
    • CSS blocking rendering start

What to Look For:

  • Start Render delayed by CSS
  • Multiple CSS files in critical path
  • Large CSS file sizes
  • Opportunity to inline critical CSS

Method 5: Manual Critical CSS Identification

View your page with only above-fold CSS:

// In browser console
// This shows what's visible without scrolling
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
console.log('Viewport height:', vh);

// Highlight above-fold elements
document.querySelectorAll('*').forEach(el => {
  const rect = el.getBoundingClientRect();
  if (rect.top < vh) {
    el.style.outline = '2px solid red';
  }
});

What to Look For:

  • Elements visible without scrolling
  • CSS rules needed for those elements only
  • Fonts, colors, layout for above-fold content
  • Minimal set of styles for initial render

General Fixes

Fix 1: Extract and Inline Critical CSS

Automatically extract critical CSS:

  1. Using Critical (Node.js tool):

    npm install -g critical

    // generate-critical-css.js
const critical = require('critical');

critical.generate({
  inline: true,
  base: 'dist/',
  src: 'index.html',
  target: {
    html: 'index-critical.html',
    css: 'critical.css'
  },
  width: 1300,
  height: 900,
  dimensions: [
    {
      width: 375,
      height: 667
    },
    {
      width: 1920,
      height: 1080
    }
  ]
});

  2. Using Critters (for webpack/build tools):

    // webpack.config.js
const Critters = require('critters-webpack-plugin');

module.exports = {
  plugins: [
    new Critters({
      preload: 'swap',
      noscriptFallback: true,
      inlineFonts: true,
      pruneSource: true
    })
  ]
};

  3. Manual inline critical CSS:

    <head>
  <!-- Inline critical CSS -->
  <style>
    /* Above-fold styles only */
    body { margin: 0; font-family: system-ui, sans-serif; }
    .header { background: #fff; padding: 1rem; }
    .hero { min-height: 100vh; background: #f5f5f5; }
    /* ... more critical styles ... */
  </style>

  <!-- Defer non-critical CSS -->
  <link rel="preload" href="/styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/styles/main.css"></noscript>
</head>

  4. Using loadCSS library:

    <head>
  <style>/* Inline critical CSS */</style>

  <!-- Load non-critical CSS asynchronously -->
  <link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/css/main.css"></noscript>

  <script>
    /*! loadCSS. MIT License. */
    !function(e){"use strict";var t=function(t,n,r,o){/* loadCSS function */};
    e.loadCSS=t}("undefined"!=typeof global?global:this);
  </script>
</head>

Fix 2: Remove Unused CSS

Eliminate dead CSS code:

  1. Using PurgeCSS:

    npm install --save-dev @fullhuman/postcss-purgecss

    // postcss.config.js
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: [
        './src/**/*.html',
        './src/**/*.js',
        './src/**/*.jsx',
        './src/**/*.tsx',
      ],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
      safelist: ['active', 'show', 'open'] // Classes added dynamically
    })
  ]
};

  2. Using UnCSS:

    npm install -g uncss

    uncss https://example.com > cleaned.css

  3. Using PurifyCSS:

    const purify = require('purify-css');

const content = ['*.html', '*.js'];
const css = ['*.css'];

purify(content, css, { output: 'purified.css' });

  4. Manual unused CSS removal:

    • Use Chrome DevTools Coverage
    • Identify unused rules
    • Remove manually or refactor

Fix 3: Minify and Compress CSS

Reduce CSS file size:

  1. Using cssnano (PostCSS):

    npm install cssnano --save-dev

    // postcss.config.js
module.exports = {
  plugins: [
    require('cssnano')({
      preset: ['default', {
        discardComments: {
          removeAll: true,
        },
        normalizeWhitespace: true,
        colormin: true,
        minifySelectors: true
      }]
    })
  ]
};

  2. Using clean-css:

    const CleanCSS = require('clean-css');

const input = 'body { margin: 0; padding: 0; }';
const output = new CleanCSS({
  level: 2, // Advanced optimizations
  compatibility: '*'
}).minify(input);

console.log(output.styles);

  3. Enable compression:

    Apache (.htaccess):

    <IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/css
</IfModule>

# Enable Brotli if available
<IfModule mod_brotli.c>
  AddOutputFilterByType BROTLI_COMPRESS text/css
</IfModule>

    Nginx:

    # Gzip compression
gzip on;
gzip_types text/css;
gzip_min_length 256;

# Brotli compression
brotli on;
brotli_types text/css;

Fix 4: Optimize CSS Delivery

Load CSS efficiently:

  1. Combine CSS files:

    // webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.[contenthash].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  }
};

  2. Use media queries for conditional CSS:

    <!-- Load print styles only when printing -->
<link rel="stylesheet" href="print.css" media="print">

<!-- Load mobile styles only on small screens -->
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">

<!-- Load desktop styles only on large screens -->
<link rel="stylesheet" href="desktop.css" media="(min-width: 769px)">

  3. Defer non-critical CSS:

    <!-- Critical CSS inlined above -->

<!-- Defer everything else -->
<link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="main.css"></noscript>

  4. Use CSS containment:

    /* Tell browser this element's layout is independent */
.widget {
  contain: layout style;
}

/* Aggressive containment for independent components */
.card {
  contain: strict;
}

Fix 5: Optimize CSS Code

Write efficient CSS:

  1. Use efficient selectors:

    /* Slow - descendant selectors */
body div.container ul li a {
  color: blue;
}

/* Fast - class selector */
.nav-link {
  color: blue;
}

/* Avoid universal selectors */
* {
  margin: 0;
}

/* Better - reset specific elements */
h1, h2, h3, p {
  margin: 0;
}

  2. Reduce specificity:

    /* High specificity - hard to override */
div#content .post article h2.title {
  font-size: 24px;
}

/* Lower specificity - easier to maintain */
.post-title {
  font-size: 24px;
}

  3. Avoid @import:

    /* Bad - blocks rendering */
@import url('typography.css');
@import url('layout.css');

    <!-- Good - parallel downloads -->
<link rel="stylesheet" href="typography.css">
<link rel="stylesheet" href="layout.css">

  4. Use CSS custom properties efficiently:

    /* Define once */
:root {
  --primary-color: #007bff;
  --spacing: 1rem;
}

/* Reuse everywhere */
.button {
  background: var(--primary-color);
  padding: var(--spacing);
}

Fix 6: Implement CSS Splitting

Load CSS per route/page:

  1. Webpack code splitting:

    // webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          type: 'css/mini-extract',
          chunks: 'all',
          enforce: true
        }
      }
    }
  }
};

  2. React lazy loading CSS:

    import React, { lazy, Suspense } from 'react';

// Lazy load component and its CSS
const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Dashboard />
    </Suspense>
  );
}

  3. Route-based CSS splitting:

    // Next.js - automatic per-page CSS
// pages/about.js
import styles from './about.module.css';

export default function About() {
  return <div className={styles.container}>About</div>;
}

Fix 7: Use Modern CSS Features

Reduce CSS complexity:

  1. CSS Grid and Flexbox (instead of complex layout CSS):

    /* Old way - complex float-based layout */
.container {
  width: 100%;
}
.column {
  float: left;
  width: 33.33%;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Modern way - simple grid */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

  2. CSS logical properties:

    /* Better for internationalization */
.element {
  margin-inline-start: 1rem;
  padding-block: 2rem;
  border-inline-end: 1px solid #ccc;
}

  3. CSS custom properties for theming:

    /* Single source of truth */
[data-theme="dark"] {
  --bg: #000;
  --text: #fff;
}

[data-theme="light"] {
  --bg: #fff;
  --text: #000;
}

body {
  background: var(--bg);
  color: var(--text);
}

Platform-Specific Guides

Detailed implementation instructions for your specific platform:

Platform Troubleshooting Guide
Shopify Shopify CSS Optimization Guide
WordPress WordPress CSS Optimization Guide
Wix Wix CSS Optimization Guide
Squarespace Squarespace CSS Optimization Guide
Webflow Webflow CSS Optimization Guide

Verification

After optimizing CSS:

  1. Run Lighthouse audit:

    • "Eliminate render-blocking resources" should pass
    • "Reduce unused CSS" shows minimal unused code
    • FCP and LCP scores improved
    • Performance score increased

  2. Check Coverage report:

    • Unused CSS < 20% of total
    • Critical CSS file is small (< 15KB)
    • Main CSS loads after initial render

  3. Test rendering:

    • Page renders without CSS flash
    • Above-fold content appears immediately
    • No FOUC (Flash of Unstyled Content)
    • Styles load progressively

  4. Verify file sizes:

    # Check CSS file sizes
ls -lh dist/**/*.css

# Expected results:
# critical.css: < 15KB
# main.css: reduced by 30-70%
# total CSS: < 100KB compressed

  5. Monitor real user metrics:

    • FCP improvement in CrUX data
    • LCP improvement
    • Lower bounce rate
    • Better engagement metrics

Common Mistakes

  1. Inlining too much CSS - Critical CSS should be < 15KB
  2. Not testing without JavaScript - CSS defer needs noscript fallback
  3. Removing used CSS - PurgeCSS too aggressive
  4. Breaking responsive design - Not testing all viewports
  5. Over-optimizing - Diminishing returns on tiny files
  6. Forgetting print styles - Removing needed print CSS
  7. Not caching CSS - Missing cache headers
  8. Inline CSS for every page - Should differ per page type
  9. No fallback fonts - Web fonts without system fallbacks
  10. Breaking third-party components - Removing their required CSS

Additional Resources

↑ Back to top
// SYS.FOOTER