Reduce render-blocking production CSS and font preload - #1922
Conversation
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Warning Review limit reachedYou’ve reached a temporary PR review limit under our Fair Usage Limits Policy. Next review available in:6 minutes Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (9)
Comment |
…rformance-css-delivery
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit:14272ad408
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| @@ -0,0 +1,9 @@ | |||
| @import "tailwindcss/utilities.css" layer(utilities) source(none) important; | |||
There was a problem hiding this comment.
Prevent mockup utilities from persisting into live routes
When mockups are enabled and a user client-navigates from /mockups/** to a live route, Next 16 does not remove the global stylesheet imported by the nested mockup layout, so this complete utility sheet remains active. Emitting every utility as !important then overrides normal inline theming on live components—for example, the border-[color:var(--border)] utility defeats the category-specific borderTopColor on factsheet cards—leaving the destination styled differently than on a direct load. Scope these declarations beneath a mockup ancestor or avoid a persistent global important sheet; a mockup-to-factsheet navigation test would prove the fix.
AGENTS.md reference: AGENTS.md:L5-L5
Useful? React with 👍 / 👎.
CI triageCI failed on this PR. Automated classification of the 2 failed job(s):
Compared with main CI run #10559 (failure). Classification is evidence routing, not permission to ignore a failure. Exact quarantined Playwright identities remain governed by the flake ledger. |
BigSimmo
commented
Aug 13, 2026
Superseded by #1927, which retains the CSS reduction while restoring the LCP-critical Sans preload and removing the persistent mockup utility precedence issue. |
Pull request was closed
Summary
/mockupslayout so production routes no longer download design-scratch utility vocabularydisplay: swapand the generated size-adjusted fallbackThe deployed PR #1915 baseline showed every mobile route breaching LCP (3.54-3.95 s; Services 3.79 s), while desktop LCP stayed 584-691 ms and live TTFB was 267-316 ms. Trace attribution identified shared CSS/font delivery as the dominant cold-paint path. This change reduces the production stylesheet from 367,050 to 302,113 raw bytes and from 55,140 to 46,203 gzip bytes (16.2%).
Verification
npm run buildwith an isolatedNEXT_DIST_DIR— passed; 1,712 pages, TypeScript and client-secret scan passednpm run test -- tests/css-delivery-contract.test.ts— 2/2 passednpm run test:e2e -- tests/ui-style-contract.spec.ts --project=chromium— 9/9 passednpm run test:e2e -- tests/ui-tools-search-mode-mockup.spec.ts --project=chromium-mockups— 15/15 passednpm run lint— passednpm run typecheck— passednpm run format— passed with no remaining changesThe command line is too long; the same lint/typecheck/ledger checks passed directly, so the documentedSKIP_STATIC_GUARD=1bypass was used for publishing. Hosted CI remains authoritative.Risks and limitations
/mockups/**CSS; those routes remain design scratch and are excluded from production-route weight.Governance