CSS File Size Too Large

Checks for CSS files that exceed recommended size limits

How large is too large for a CSS file

squirrelscan warns on any single stylesheet over 150KB and fails the check at 500KB. The measurement is per file, not per page, and it is the size the server actually transfers (Content-Length), so a stylesheet served with gzip or brotli is judged on its compressed bytes and both thresholds are configurable below. Compressed CSS above 150KB is unusual outside an unpurged utility framework or a theme that ships every component’s styles on every page, which is why the default sits there.

Size matters here more than the download time suggests: CSS is render blocking, so the browser paints nothing until it has fetched and parsed the whole file, and one oversized stylesheet is usually loaded by every page on the site, including the pages that use a fraction of it.

Solution

Large CSS files slow down rendering and increase bandwidth. Split large stylesheets into smaller chunks, remove unused selectors, and minify CSS. Consider critical CSS inlining for above-the-fold styles and lazy-loading non-critical CSS.

Options

This rule supports the following configuration options:

Configuration example

[rules."perf/css-file-size"]
warn_bytes = 153600
error_bytes = 512000

Enable / disable

Disable this rule

[rules]
disable = ["perf/css-file-size"]

Disable all Performance rules

[rules]
disable = ["perf/*"]

Enable only this rule

[rules]
enable = ["perf/css-file-size"]
disable = ["*"]