AddThisFeature
Sign in

Critical CSS Strategy

Get the first screen styled correctly on the first paint, with no flash of raw markup.

involved Front-End Performance

What it adds

An inlined slice of the app's styles covering the first viewport, with the remainder loaded after paint.

What your agent is told to do

5
  1. 1

    Identify the entry screens that are painted before the main stylesheet has arrived — the marketing page, the sign-in screen, the authenticated shell — and extract only the rules the first viewport actually uses on each.

  2. 2

    Derive the critical slice from the same source as the full stylesheet, as a build step, so the two cannot drift apart when a component's styles change.

  3. 3

    Resolve the user's theme, colour scheme, and any layout preference before the first paint, from a value that can be read synchronously at the top of the document rather than after the app boots.

  4. 4

    Load the remainder without blocking rendering, and make sure the page reaches a fully styled state even if that request is slow — the inline slice is a head start, not a substitute.

  5. 5

    Do not hand-write and hand-maintain a separate critical stylesheet. It goes stale the first time a component changes and nobody notices until a page renders wrong in production.

Edge cases it handles

7
  • The extracted slice and the runtime stylesheet must agree on every rule they share. If a selector is inlined at one specificity and served at another, the page will visibly reflow the moment the full sheet applies.
  • An inline payload that grows past a few kilobytes costs more than it saves, because it is re-sent with every document and cannot be cached separately. Set a budget and fail the build when it is exceeded.
  • Theme has to be settled before anything paints. A dark-mode user who sees a white flash on every navigation is worse off than one who waited for the stylesheet.
  • A strict content security policy will block inline styles outright unless they carry a nonce or hash. Confirm the delivery mechanism works under the policy the app actually ships, not a relaxed development one.
  • Cached HTML holds the inline styles that were current when it was generated. After a deploy, a cached document paired with a new stylesheet must still render acceptably rather than half-styled.
  • Print styles, reduced-motion rules, and high-contrast overrides are not first-viewport rules and must not be pulled into the inline slice.
  • Font loading and font-face declarations belong to the Font Subsetting brief, not this one — keep the two from each inlining the same declarations twice.

Definition of done

8
  • Entry screens paint fully styled with no flash of unstyled or wrongly themed content.
  • The critical slice is generated by the build from the same source as the full stylesheet.
  • The inline payload has a documented size budget that the build enforces.
  • The page reaches a complete styled state even when the deferred stylesheet is slow or fails once.
  • Inline styles are delivered in a way the production content security policy permits.
  • Theme and colour scheme are resolved before first paint on every entry point.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.