CSS bundle size and LCP in UK web standards
Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures how quickly the main visible content of a page loads. A large render-blocking CSS file delays LCP directly. The GOV.UK Design System ships plain vanilla CSS with no preprocessor, meaning the stylesheet weight is whatever developers add on top. Minifying custom CSS on GOV.UK-based sites is a straightforward way to keep LCP in the "good" range (under 2.5 seconds). This tool works entirely in your browser, your CSS never leaves your machine.
What minification does
- Removes
/* block comments */ - Strips leading and trailing whitespace from each line
- Collapses multiple spaces into one
- Removes blank lines between rule blocks
- Removes trailing semicolons before closing braces
Minification vs CSS purging
| Technique | Size reduction | What it does |
|---|---|---|
| Minification (this tool) | 15-30 % | Strips whitespace and comments |
| PurgeCSS / Tailwind purge | 60-95 % | Removes unused rules entirely |
| Critical CSS inlining | Varies | Inlines above-the-fold styles, defers the rest |
For UK public sector sites with accessibility requirements (WCAG 2.1 AA), minification must not remove CSS that supports assistive technology. Check that focus indicators and skip-link styles survive the minification pass.
Beautifier and workflow
Use the beautifier to make a vendor-minified stylesheet readable during debugging, or to reformat CSS pasted from design tools like Figma exports. For production pipelines, use cssnano (PostCSS plugin) or Lightning CSS. Pair with JS Minifier to reduce the combined weight of your page assets.