Web Performance Budgets: Optimizing CSS for Speed

CSS can quickly bloat your site. Set performance budgets and optimize ruthlessly for faster load times.

CSS Performance Budget

Recommended limits:

• Critical CSS: < 14KB (gzipped)
• Total CSS: < 50KB (gzipped)
• Unused CSS: < 10%
• Render-blocking: 0 requests

Measuring CSS Size

ls -lh styles.css
gzip -c styles.css | wc -c

Remove Unused CSS

module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: ['./src/<strong>/<em>.html', './src/</strong>/</em>.vue'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
}

Minification

npm install cssnano --save-dev

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [new CssMinimizerPlugin()]
  }
};

Code Splitting

import(/<em> webpackChunkName: "page-styles" </em>/ './page.css');

Best Practices

• Inline critical CSS
• Load non-critical CSS async
• Remove duplicate rules
• Use CSS variables
• Avoid @import
• Minimize specificity
• Use shorthand properties

Monitoring

• Lighthouse CI
• WebPageTest
• Bundle analyzer
• Coverage tools

Keep CSS lean with our tools and regular audits!