Two Ways to Load Only the CSS You Need

Modern web applications often ship more CSS than necessary, slowing down initial page loads and hurting user experience. This guide explores two effective approaches for loading only the CSS your pages actually need: using media queries for conditional loading and leveraging PostCSS for automated unused CSS removal.

Excess CSS impacts Core Web Vitals metrics like Largest Contentful Paint (LCP) and First Contentful Paint (FCP). By delivering only the styles your pages require, you improve perceived performance and create better user experiences. Implementing these optimization techniques is essential for high-performance web development that ranks well in search results.

Why Loading Only Needed CSS Matters

CSS is render-blocking by default, meaning the browser cannot display page content until all CSS has been downloaded and parsed. When you ship a monolithic stylesheet containing styles for every page section, browsers spend precious milliseconds--and sometimes seconds--processing CSS rules that don't affect the current page.

Unused CSS rules still consume browser resources. The browser's CSSOM (CSS Object Model) construction process must process every selector and rule, even if those styles never apply to any element on the page. This unnecessary processing:

• Delays First Contentful Paint (FCP)
• Impacts Largest Contentful Paint (LCP)
• Increases memory consumption
• Slows down subsequent page rendering

Modern websites often ship 100KB or more of CSS, when individual pages may only use 30-60KB of those styles. This overhead directly impacts user experience, SEO rankings, and conversion rates.

The Problem with Monolithic Stylesheets

The common pattern of a single large CSS file containing styles for every page creates convenience during development but creates significant performance problems. As applications grow, these stylesheets accumulate legacy styles, unused components, and redundant rules. The result is a bloated CSS bundle that slows down every page load, regardless of how much of that CSS is actually used.

Method 1: Loading CSS Conditionally with Media Queries

The first approach leverages the HTML <link> element's media attribute to conditionally load stylesheets. Browsers still download these stylesheets, but they don't block rendering when the media query doesn't match the current context.

Understanding the Media Attribute Approach

By adding a media query to your stylesheet link, you tell the browser when that particular stylesheet should be applied. For stylesheets with non-matching media queries, the browser:

1. Downloads the stylesheet (so it's ready if needed)
2. Does NOT block rendering
3. Does NOT apply the styles

This approach works particularly well for:

• Print styles that only apply when printing
• Mobile-specific styles on narrow screens
• Desktop-specific styles on large screens
• Accessibility preferences like reduced motion or dark mode

Practical Implementation

Organizing your CSS into purpose-specific files allows browsers to load only what's relevant:

<!-- Always render-blocking - base styles needed everywhere -->
<link rel="stylesheet" href="base.css">

<!-- Not render-blocking on desktop - loaded for mobile only -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">

<!-- Not render-blocking - loaded only when printing -->
<link rel="stylesheet" href="print.css" media="print">

<!-- Conditional loading for dark mode preference -->
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">

Desktop-Only and Mobile-Specific Styles

For responsive designs, loading only the styles relevant to the current viewport size significantly reduces initial CSS payload. Mobile devices with limited processing power benefit most from not parsing unnecessary desktop styles.

<!-- Desktop enhancements - doesn't block mobile rendering -->
<link rel="stylesheet" href="desktop-widgets.css" media="screen and (min-width: 1024px)">

<!-- Tablet-specific adjustments -->
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px) and (max-width: 1023px)">

Performance Considerations

It's important to understand that browsers still download all linked stylesheets, even those with non-matching media queries. This approach is best when:

• Styles genuinely don't apply to certain contexts (print, specific screen sizes)
• You want to avoid render blocking for non-critical styles
• Combined with other optimization techniques

For removing truly unused CSS (styles that never apply to any page), you'll need a different approach--PostCSS.

Method 2: Eliminating Unused CSS with PostCSS

PostCSS is a powerful CSS processing framework that, when combined with tree-shaking plugins, can automatically analyze your codebase and remove CSS rules that aren't actually used. This approach goes beyond conditional loading--it eliminates dead code entirely.

Introduction to PostCSS Tree-Shaking

Tree-shaking is the process of removing code (in this case, CSS) that isn't referenced or used by your application. Tools like postcss-discard-unused, PurgeCSS, or UnCSS analyze your HTML templates, JavaScript files, and CSS to identify:

• Selectors that match no elements in your HTML
• Classes never referenced in JavaScript
• CSS rules unreachable from any entry point

The result is a production CSS bundle containing only the styles your application actually uses.

How It Works

1. Analysis Phase: The tool scans your source files (HTML, JS, templates) to find all used CSS selectors
2. Comparison Phase: It compares used selectors against your CSS rules
3. Removal Phase: Unmatched rules are removed from the final output
4. Optimization Phase: CSSnano or similar tools minify the result

Setting Up PostCSS

// postcss.config.js
module.exports = {
 plugins: [
 require('postcss-import'),
 require('postcss-discard-unused')({
 // Only remove unused within these modules
 modules: ['my-styles'],
 // Keep these selectors even if unused
 ignore: ['.preserve-class', '#keep-id']
 }),
 require('cssnano')({
 preset: 'default',
 // Additional optimizations
 discardComments: { removeAll: true }
 })
 ]
}

Tailwind CSS: Built-In Optimization

Tailwind CSS takes a different approach with its utility-first methodology. Rather than writing custom CSS classes, you use small, single-purpose utility classes. Tailwind's JIT (Just-In-Time) compiler:

• Generates CSS on-demand during development
• Automatically purges unused utilities in production
• Results in minimal CSS bundles (often under 10KB gzip)

// tailwind.config.js
module.exports = {
 content: [
 './src/**/*.{js,jsx,ts,tsx,html}',
 './public/index.html'
 ],
 theme: { extend: {} },
 plugins: []
}

With this configuration, Tailwind scans your files and generates only the utility classes you've actually used. This approach to modern web development ensures your CSS remains lean and performant as your project grows.

Modern Approach: Compression Dictionaries

An emerging technique for optimizing CSS delivery uses HTTP compression dictionaries (Brotli, Zstandard) to reduce transfer size for subsequent page loads. This approach is particularly powerful for multi-page applications with shared styles.

How Compression Dictionaries Work

Compression dictionaries allow browsers to use previously downloaded content as a reference for decompressing new content. For CSS delivery:

1. First Visit: Browser downloads page A's CSS normally
2. Dictionary Creation: The CSS becomes a compression dictionary
3. Subsequent Visits: Page B's CSS is compressed using page A's CSS as a dictionary
4. Result: Only the delta (differences) transfer over the network

This technique can reduce follow-up page CSS transfer to near-zero for pages with similar styling.

Implementation

# Response headers for page A
Link: </css/page-a.css>; rel=preload; as=style
Accept-Encoding: br, zstd

# Dictionary registration
Use-As-Dictionary: match="/css/*.css"

Benefits

• Near-zero CSS transfer for returning visitors
• Particularly effective for sites with shared design systems
• Works with existing build pipelines
• Automatic fallback for unsupported browsers

This approach complements the other methods--use PostCSS to minimize the base CSS, then use compression dictionaries to optimize transfer between pages.

Combining Approaches for Maximum Performance

The most effective CSS optimization strategy combines multiple techniques, each addressing a different aspect of the loading problem:

Layer 1: Remove Truly Unused CSS

• Tool: PostCSS with tree-shaking
• What it does: Eliminates CSS that your application never uses
• When to use: Always--in every production build

Layer 2: Load Conditionally with Media Queries

• Tool: HTML link elements with media attributes
• What it does: Prevents render blocking for non-critical styles
• When to use: Print styles, responsive breakpoints, accessibility preferences

Layer 3: Optimize Transfer with Compression Dictionaries

• Tool: Server configuration, Brotli/Zstandard
• What it does: Reduces CSS transfer size between pages
• When to use: Multi-page applications with returning visitors

Layer 4: Critical CSS Inlining

• Tool: Build tools, critical CSS extractors
• What it does: Inlines styles needed for above-the-fold content
• When to use: When maximum initial load performance is critical

Implementation Priority

1. Start with PostCSS tree-shaking--this removes the largest source of CSS bloat
2. Add media query loading for conditional styles
3. Implement critical CSS for above-fold content
4. Consider compression dictionaries for large, multi-page sites

Best Practices for CSS Loading

Critical CSS Extraction

Critical CSS is the minimal set of styles needed to render above-the-fold content. By inlining these styles in the <head> and deferring the rest, you balance fast initial rendering with complete styling:

• Above-fold styles: Inline in HTML <style> block
• Below-fold styles: Load asynchronously with link rel="preload" or media="print"

Tools like critical, penthouse, or uncss can automate this extraction.

Code Splitting CSS by Route

Modern frameworks like Next.js, Remix, and Vite support CSS code splitting:

// Dynamic import loads component CSS only when needed
import React, { useState } from 'react'

const HeavyComponent = () => {
 const styles = await import('./HeavyComponent.css')
 // Component and styles load together
 return <div className={styles.heavy}>...</div>
}

Performance Testing and Monitoring

Measure your CSS optimization effectiveness:

1. Browser DevTools Coverage Tab: See unused CSS percentage
2. Lighthouse Audits: Track FCP, LCP improvements
3. WebPageTest: Analyze waterfall charts
4. Bundle Size Monitoring: Track CSS size over time

Performance Budgets

Set and enforce CSS size budgets:

// lighthouse-ci.json
{
 "ci": {
 "assert": {
 "assertions": {
 "resource-summary": [
 "error",
 {
 "resourceType": "stylesheet",
 "budget": 50
 }
 ]
 }
 }
 }
}

Implementation Checklist

• Audit current CSS usage with browser DevTools Coverage tab
• Set up PostCSS with unused CSS removal (PurgeCSS, postcss-discard-unused)
• Implement media query-based conditional loading for non-critical styles
• Extract and inline critical CSS for above-fold content
• Consider compression dictionaries for large multi-page sites
• Set up performance budgets for CSS bundle size
• Monitor and iterate based on Core Web Vitals metrics

Conclusion

Loading only the CSS your pages need is essential for delivering fast, performant web experiences. The two primary approaches covered in this guide address different aspects of the CSS loading problem:

Media queries for conditional loading excel at loading styles only when they apply--whether that's print styles, responsive breakpoints, or accessibility preferences. This approach prevents render blocking for non-critical styles without requiring build-time analysis.

PostCSS tree-shaking removes CSS that your application never uses at all. By analyzing your HTML templates and JavaScript, these tools eliminate dead code, often reducing CSS bundle sizes dramatically.

Compression dictionaries represent an emerging technique that optimizes CSS transfer between pages, reducing bandwidth for returning visitors on multi-page sites.

The most effective strategy combines all three approaches: use PostCSS to eliminate unused CSS, media queries to load conditionally, and compression dictionaries to optimize transfer. Monitor your results with browser DevTools and Core Web Vitals, and continuously iterate to maintain optimal performance as your application evolves. For teams looking to implement these performance optimization strategies, proper tooling and build pipeline configuration are essential investments.

Sources

1. LogRocket: Two ways to load only the CSS you need - Foundational article covering media queries and PostCSS approaches with code examples
2. Web Performance Calendar: How to load CSS (fast) - Modern compression dictionary techniques for optimized CSS delivery
3. MDN: CSS performance optimization - Comprehensive guide covering render-blocking, selector optimization, and modular CSS approaches
4. MDN: CSS @media - Media query documentation
5. PostCSS - CSS processing tool documentation