CSS File Optimization #2

New Issue

2026-09-13T07:22:27Z

kevin.bataille commented

2026-09-13 07:22:27 +00:00

Problem Statement

Multiple CSS files increase page load time due to HTTP requests. Render-blocking CSS delays first paint. Unused CSS wastes bandwidth.

Solution

Minify CSS files, combine them into fewer requests, defer non-critical CSS, generate and inline critical CSS for above-the-fold content, and remove unused CSS.

User Stories

As a site owner, I want to minify CSS files (remove whitespace/comments), so that file sizes are smaller
As a site owner, I want to combine CSS files into fewer requests, so that HTTP overhead is reduced
As a site owner, I want to defer non-critical CSS loading, so that above-the-fold content renders faster
As a site owner, I want to generate and inline critical CSS, so that first paint is not blocked
As a site owner, I want to remove unused CSS, so that page weight is reduced
As a site owner, I want async CSS loading, so that stylesheets load in parallel
As a site owner, I want to exclude specific CSS files from optimization, so that compatibility is maintained
As a site owner, I want per-page critical CSS generation, so that each page has optimal loading
As a site owner, I want to see which CSS files are being optimized, so that I can verify the changes
As a site owner, I want the optimization to work with CDN URLs, so that external resources are handled correctly

Implementation Decisions

CSS minification using independent implementation
Output buffering to detect and modify link tags
Critical CSS generation via parser or headless browser
File combination with cache-busting filenames
Async loading via media="print" onload pattern

Testing Decisions

Test CSS files are minified (whitespace removed)
Test CSS files are combined into single file
Test critical CSS is inlined in head
Test non-critical CSS is deferred
Test unused CSS is removed
Test excluded files are not modified
Test with CDN URLs

Out of Scope

JavaScript optimization (separate issue)

## Problem Statement Multiple CSS files increase page load time due to HTTP requests. Render-blocking CSS delays first paint. Unused CSS wastes bandwidth. ## Solution Minify CSS files, combine them into fewer requests, defer non-critical CSS, generate and inline critical CSS for above-the-fold content, and remove unused CSS. ## User Stories 1. As a site owner, I want to minify CSS files (remove whitespace/comments), so that file sizes are smaller 2. As a site owner, I want to combine CSS files into fewer requests, so that HTTP overhead is reduced 3. As a site owner, I want to defer non-critical CSS loading, so that above-the-fold content renders faster 4. As a site owner, I want to generate and inline critical CSS, so that first paint is not blocked 5. As a site owner, I want to remove unused CSS, so that page weight is reduced 6. As a site owner, I want async CSS loading, so that stylesheets load in parallel 7. As a site owner, I want to exclude specific CSS files from optimization, so that compatibility is maintained 8. As a site owner, I want per-page critical CSS generation, so that each page has optimal loading 9. As a site owner, I want to see which CSS files are being optimized, so that I can verify the changes 10. As a site owner, I want the optimization to work with CDN URLs, so that external resources are handled correctly ## Implementation Decisions - CSS minification using independent implementation - Output buffering to detect and modify link tags - Critical CSS generation via parser or headless browser - File combination with cache-busting filenames - Async loading via media="print" onload pattern ## Testing Decisions - Test CSS files are minified (whitespace removed) - Test CSS files are combined into single file - Test critical CSS is inlined in head - Test non-critical CSS is deferred - Test unused CSS is removed - Test excluded files are not modified - Test with CDN URLs ## Out of Scope - JavaScript optimization (separate issue)

kevin.bataille added the phase-2 label 2026-09-13 07:28:50 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: kevin.bataille/wp-recache#2