Do rules for phones count as unused?

Rules for a screen width other than the measured one count as unused. That is why the check sets the limit at 90 %: a style sheet with rules for phone and desktop reaches it only if it contains far more than the page needs.

Why only from 200 KB?

Small style sheets cost little, even if a large part stays unused. From 200 KB the amount is large enough for trimming to pay off.

In the Network tab my style sheet is much smaller. Why does the check say more than 200 KB?

The check measures the unpacked style sheet, like the “Coverage” tab in Chrome. The Network tab shows the compressed transfer. The measurement runs in Chromium, the basis of Chrome and Edge.

This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung

CO₂ & EmpCo

Why does the check report a style sheet that is 90 % unused?

Many themes and frameworks ship one large style sheet for every conceivable component, and every page loads all of it. In the browser, the check measures which part of a style sheet the measured page uses. If a style sheet is at least 200 KB unpacked and the page uses at most 10 % of it, the finding is raised.

How the check measures

It uses Chromium’s coverage measurement, the same as the “Coverage” tab in the Chrome developer tools. It measures while the page loads. Rules for states that only apply after a click or at a different screen width count as unused. That is why the limit is set high: from 90 %, the style sheet certainly contains far more than the page needs.

Why it costs electricity

The style sheet is transferred on every first visit and, in the head of the page, usually loaded so that the browser renders only after reading it. Of a 200 KB style sheet, the page then needs at most 20 KB; the rest costs transfer and computing time on every page that loads it.

Examples

Bootstrap

Not met

@import "bootstrap/scss/bootstrap";
/* alle Module */

Passes

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/utilities/api";
/* nur, was die Seite verwendet */

Open the page in Chrome, developer tools, “Coverage” tab, and reload. The list shows the unused share per file.
Trim the style sheet: with PurgeCSS, with Tailwind via the source setting (content in version 3, @source in version 4), or with Bootstrap via the modules you use.
Put the CSS for the first screen directly into the document and load the rest afterwards. This speeds up the first display; only trimming resolves the finding.
Then look at the pages with the most components, so that all required rules are kept.

Deutsche Fassung dieser Seite