ci: enforce the non-blocking font load in CI (finding b8f6046e942a)

[nish3451]

What this is

Dogfood finding b8f6046e942a ("Render-blocking resources on home", run
20260808T074205Z) was fixed by PR #20 (same-origin public/fonts.js promotion
of the Google Fonts css2 stylesheet, merged into main). That fix shipped static
source guards, but its own evidence receipt (docs/evidence/render-blocking-fonts-2026-08-08.md)
recorded the remaining gap: CI had no browser step, so a render-blocking
regression could still ship while CI stayed green. This PR closes that gap by
making the guarantee browser-proof in CI.

What changed

1. scripts/check-render-blocking.mjs (new) — npm run check:render-blocking.
   Serves the six public pages (index, audit, agents, pricing, specimen,
   brief-requested) statically under the exact production CSP the worker emits,
   intercepts the css2 request and delays it 2500ms (stubbed response — no
   external network dependency), then asserts in real Chromium that:
   • the css2 resource is non-blocking (renderBlockingStatus),
   • first-contentful-paint does not wait for it,
   • the only render-blocking resources are the site's own same-origin
     stylesheets,
   • the preload link is still promoted to a real stylesheet under the
     production CSP (link.sheet set; the inline-onload shape the CSP
     forbids leaves it null).
2. .github/workflows/ci.yml — runs npx playwright install --with-deps chromium + npm run check:render-blocking as a CI step after npm test.
3. scripts/check-site.mjs — drift guards so the wiring cannot silently
   disappear: the check script must exist, package.json must expose
   check:render-blocking, CI must run it, and the check's CSP string must
   mirror src/worker.js exactly.
4. package.json / package-lock.json — playwright devDependency
   (^1.62.1, the version the original receipt was measured with).
5. docs/evidence/render-blocking-fonts-2026-08-08.md — limitation section
   updated to record the CI enforcement (the receipt's measurement itself is
   untouched).

Negative test (the guard is real)

With a blocking <link rel="stylesheet"> to the font css2 temporarily
reintroduced on the homepage, the check fails with exit code 1: first paint is
held to the delayed css2 response (fcp 2780ms vs css2 end 2566ms) and the
external blocking resource is named. With the fixed pages, all six pages pass
(css2 non-blocking, fcp 130-300ms, no other blocking resources, sheet applied).

Deliberately unchanged

• The fix itself (PR fix(public): load Google Fonts without render-blocking via same-origin fonts.js #20): public/ head markup, fonts.js, worker
  allow-list — already on main, not re-touched here.
• npm test stays browser-free; the browser step is CI-only so local test
  runs do not require a browser install.

Verification (all passed locally)

• npm run check — TinyStudio.io checks passed (incl. the new drift guards)
• npm run check:render-blocking — all six pages PASS; exit 1 verified with a
  reintroduced blocking link
• npm test — worker 15/15 + UI 15/15, 0 failures
• git diff --check — clean
• sgscan — exit 1, warnings only in pre-existing baseline files
  (ci.yml:12-13 mutable action tags, public/*.html csrf/integrity,
  src/worker.js non-literal regexp, study/*.py urllib); none in changed files

intended-outcome: the no-render-blocking-fonts guarantee holds even if the
served HTML drifts, because CI now proves it in a real browser under the
production CSP.

verify: npm run check; npm run check:render-blocking; npm test;
git diff --check; sgscan (baseline warnings only).

Summary by CodeRabbit

• Performance
  • Improved safeguards to prevent web fonts from blocking page rendering, helping pages display content sooner.
  • Verified font-loading behavior across all six public pages under the production security policy.
• Bug Fixes
  • Added automated checks to detect regressions that could reintroduce render-blocking fonts or delay the first paint.
• Documentation
  • Updated performance documentation with details about ongoing render-blocking protections and validation.

[greptile-apps]

nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.

[coderabbitai]

📝 Walkthrough

Walkthrough

Added a Chromium-based regression check for render-blocking fonts across six public pages. The check runs under the production CSP, validates paint and resource timing, and runs in CI with static wiring and documentation checks.

Changes

Render-blocking font enforcement

Layer / File(s)	Summary
Chromium regression check scripts/check-render-blocking.mjs	Serves the public site with the production CSP, delays the Google Fonts response, measures rendering, validates blocking resources and stylesheet promotion, and reports page-specific failures.
Command and CI integration package.json, .github/workflows/ci.yml	Adds the check:render-blocking command, the Playwright dependency, and a CI step that installs Chromium and runs the check.
Static guards and documentation scripts/check-site.mjs, docs/evidence/render-blocking-fonts-2026-08-08.md	Checks script existence, package wiring, CI execution, and CSP synchronization. Documents the browser assertions and failure behavior.

Estimated code review effort: 3 (Moderate) | ~30 minutes

Sequence Diagram(s)

sequenceDiagram
  participant CI
  participant check-render-blocking.mjs
  participant LocalServer
  participant Chromium
  participant GoogleFonts
  CI->>check-render-blocking.mjs: run browser regression check
  check-render-blocking.mjs->>LocalServer: serve public pages with production CSP
  check-render-blocking.mjs->>Chromium: open six pages
  Chromium->>GoogleFonts: request css2 stylesheet
  check-render-blocking.mjs->>GoogleFonts: delay and stub response
  Chromium-->>check-render-blocking.mjs: return paint and resource timing
  check-render-blocking.mjs-->>CI: report results and exit status

Loading

Possibly related PRs

• nish3451/TinyStudio.io#8: Established the public pages and CSP structure validated by this check.
• nish3451/TinyStudio.io#20: Added the Google Fonts render-blocking fix that this PR validates.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: enforcing the non-blocking font-load check in CI.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/render-blocking-ci-proof

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/evidence/render-blocking-fonts-2026-08-08.md`:
- Line 101: Correct the date in the “CI enforcement” heading by replacing the
future August 9, 2026 date with August 8, 2026 or the actual merge date, while
preserving the heading text and formatting.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 9cb9c266-6a0c-474b-94d6-522bd23b3d66

📥 Commits

Reviewing files that changed from the base of the PR and between c0862d4 and 027f0d1.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (5)

• .github/workflows/ci.yml
• docs/evidence/render-blocking-fonts-2026-08-08.md
• package.json
• scripts/check-render-blocking.mjs
• scripts/check-site.mjs

[coderabbitai]

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Correct the future date.

Line 101 states added 2026-08-09, but August 9, 2026 is in the future. Use August 8, 2026, or the actual merge date.

Proposed fix

-### CI enforcement (added 2026-08-09)
+### CI enforcement (added 2026-08-08)

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	### CI enforcement (added 2026-08-09)
	### CI enforcement (added 2026-08-08)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/evidence/render-blocking-fonts-2026-08-08.md` at line 101, Correct the
date in the “CI enforcement” heading by replacing the future August 9, 2026 date
with August 8, 2026 or the actual merge date, while preserving the heading text
and formatting.