Skip to content

Reduce render-blocking production CSS and font preload - #1922

Closed
BigSimmo wants to merge 4 commits into
mainfrom
codex/performance-css-delivery
Closed

Reduce render-blocking production CSS and font preload#1922
BigSimmo wants to merge 4 commits into
mainfrom
codex/performance-css-delivery

Conversation

@BigSimmo

Copy link
Copy Markdown
Owner

Summary

  • isolate mockup-only Tailwind utilities in the /mockups layout so production routes no longer download design-scratch utility vocabulary
  • stop preloading the 28 KB Geist Sans face ahead of the render-blocking stylesheet; retain display: swap and the generated size-adjusted fallback
  • preserve complete responsive mockup styling with a theme-aware, route-scoped utility sheet
  • update Codify live retrieval RPCs, reclaim dead vector indexes, unify schema health #117's merge-safe ledger evidence with exact deployed-SHA live measurements

The 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 build with an isolated NEXT_DIST_DIR — passed; 1,712 pages, TypeScript and client-secret scan passed
  • generated CSS manifest inspection — production routes receive 302,113-byte shared CSS; mockups additionally receive their route-only sheet with responsive variants
  • npm run test -- tests/css-delivery-contract.test.ts — 2/2 passed
  • npm run test:e2e -- tests/ui-style-contract.spec.ts --project=chromium — 9/9 passed
  • npm run test:e2e -- tests/ui-tools-search-mode-mockup.spec.ts --project=chromium-mockups — 15/15 passed
  • npm run lint — passed
  • npm run typecheck — passed
  • npm run format — passed with no remaining changes
  • outstanding-issue and branch-review ledger guards — passed
  • Initial pre-push exact-commit static wrapper: blocked by Windows The command line is too long; the same lint/typecheck/ledger checks passed directly, so the documented SKIP_STATIC_GUARD=1 bypass was used for publishing. Hosted CI remains authoritative.

Risks and limitations

  • Live LCP improvement requires merge and exact-SHA Railway deployment before it can be measured; this PR does not claim a field pass yet.
  • Lighthouse does not measure INP, and no usable CrUX field result is available, so INP remains unverified.
  • The route-scoped mockup sheet increases only /mockups/** CSS; those routes remain design scratch and are excluded from production-route weight.

Governance

  • No clinical content, retrieval/ranking, search behavior, APIs, database schema, privacy behavior, or answer generation changed.
  • Evidence above is local/offline plus the pre-change live deployed baseline; post-change hosted/live evidence is pending CI, merge, and deployment.

@supabase

supabaseBot commented Aug 13, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai

coderabbitaiBot commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

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 @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6a6dce9d-21cb-48df-b408-ec96b7aa83cd

📥 Commits

Reviewing files that changed from the base of the PR and between 2d27039 and e9ee071.

📒 Files selected for processing (9)
  • docs/branch-review-records/2c6a919bc949df279d074bdf810c92f2cb5a090b3bd4b521a833f0baa002e0e3.record.md
  • docs/branch-review-records/e9ef965f3b9bffc0aef79a3be4d3c206f04207ac0e1b2d8696bb3f657b7df90a.record.md
  • docs/outstanding-issues-inbox/66f364c0-5612-449b-9046-94b4dab0b152.json
  • docs/outstanding-issues-inbox/f4b9c833-03f4-40bd-9537-90501c1287c4.json
  • src/app/globals.css
  • src/app/layout.tsx
  • src/app/mockups/layout.tsx
  • src/app/mockups/mockups.css
  • tests/css-delivery-contract.test.ts

Comment @coderabbitai help to get the list of available commands.

@chatgpt-codex-connectorchatgpt-codex-connectorBot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge 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 👍 / 👎.

@BigSimmo
BigSimmo enabled auto-merge (squash) August 13, 2026 15:02
@github-actions

Copy link
Copy Markdown
Contributor

CI triage

CI failed on this PR. Automated classification of the 2 failed job(s):

  • Lighthouse budgetneeds investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
  • PR requiredmain-side: the same job also failed on the latest completed main CI run.

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

Copy link
Copy Markdown
OwnerAuthor

Superseded by #1927, which retains the CSS reduction while restoring the LCP-critical Sans preload and removing the persistent mockup utility precedence issue.

auto-merge was automatically disabled August 13, 2026 16:06

Pull request was closed

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@BigSimmo