size-assets

Venue: check — A single static asset is heavier than the guideline. Warning only.

Rule

A single static asset heavier than 150 KB raw is reported. Nothing is refused: this rule has no failing tier, and an asset’s weight never changes check’s exit code.

What is weighed is each asset file the published section ships:

• an svg, image, or font imported directly in Renderer.tsx (or an island), and
• an svg, image, or font url()-referenced from the section’s own CSS or from a package stylesheet its module graph pulls in — including a webfont @font-face.

Each file is judged on its own, and the report names that file. Three 40 KB icons and one 400 KB font are one problem in one file, and you are told which.

A photograph you import is exempt. It is derived into a responsive ladder (see Assets), and the ladder is already optimized and capped at its own width ceiling — there is no move left for you to make, so warning about it would be advice you cannot act on. Its weight is still reported to you, in check’s media table, which prints each photo’s master and derived bytes. A url()-referenced image is not derived, and is weighed like any other hand-placed file.

The same asset referenced twice (from both a stylesheet and a component, say) is weighed once, not twice.

Reason

Nothing is refused, because a heavy asset is not by itself a defect. A published site carries only the assets its rendered pages actually reference. The publish pipeline scans the rendered HTML, the stylesheets and each island bundle for asset references and ships exactly that set — so a section that owns twenty images and renders one costs a visitor one. Refusing a section for what it could ship would wall off a legitimate way to build: carrying several assets and choosing between them from the content.

150 KB is still worth saying, because past it an asset is usually an accident rather than a decision. The heaviest asset a section legitimately places by hand is a full variable font family covering latin and latin-ext, which lands at 100–150 KB. Above the line you are typically looking at a font family shipped whole for three weights actually used, an svg exported without optimization, or a photograph dropped in through url() where an import would have derived it for you.

Fonts are the sharpest case. A url()-referenced webfont used to inline as part of the compiled stylesheet, which made a large font look like a CSS problem: trimming your own rules never fixed it, because the bytes were never your CSS to begin with. This rule separates that weight into its own report — a font, an icon, or an image is weighed as what it is, and the stylesheet budget (size-section-css) is left to measure only what it actually contains.

Fix

Nothing here is required. If the weight was not deliberate, three moves, in order of how often they work:

1. Subset the font. A full variable font family, shipped for three weights actually used, is the usual cause — subset it to the characters and weights the section renders. Better still, use a font the template’s theme already declares (--tr-font-<name>), which costs nothing because the page has already loaded it.
2. import a photograph instead of url()-referencing it. An imported image is derived into a responsive ladder for you and drops out of this report entirely; a url() background image ships at whatever size you saved it.
3. Optimize or drop the file. An svg exported straight from a design tool carries editor metadata worth stripping. A copied-in icon set or a leftover preview image that no code references still sits in your repo — delete what the section does not use.

Before

sections/hero/Renderer.tsx

import "brandfont/css"; // ← ships the package's full variable font family

After

sections/hero/Renderer.tsx

import heroIcon from "./assets/hero-icon.svg"; // ← a small, single-purpose asset

export default function Renderer() {
  // Uses a font the template's theme already declares (`--tr-font-<name>`),
  // which costs nothing because it is already loaded — no package font import.
  return (
    <h1 className="tr-font-display">
      <img src={heroIcon} alt="" /> Welcome home
    </h1>
  );
}

See also

• size-section-css — the stylesheet budget this rule was split out of; a url()-referenced font is weighed here, not there.
• size-renderer-bundle — the same idea applied to the section’s JavaScript, where a guideline sits under a real ceiling.
• TokenTheme — the fonts and tokens the page already loads, which cost you nothing to reuse.
• Assets — the derived-vs-passthrough import lanes, and why a photograph’s ladder is exempt here.