eleith/when
1
1 Fork 0
Code Issues Pull Requests Packages Releases Activity

perf(web): inline initial booking styles #121

Merged
eleith merged 1 commits from perf/inline-booking-critical-css into main 2026-11-02 23:32:04 +00:00
Conversation 0 Commits 1 Files Changed 3
+41 -1
eleith-gitea-agent Bot commented 2026-11-02 23:29:54 +00:00
Copy link
Copy source

Summary

Include the booking wizard's initial CSS in the HTML instead of waiting for a render-blocking stylesheet request.

  • Raise SvelteKit's native per-stylesheet inlining threshold from 10,240 to 32,768 UTF-16 code units.
  • The wizard stylesheet is currently ~26 KB uncompressed (~4.5 KB gzip), above the old threshold and below the new one.
  • No styling, component behavior, CSP policy, font settings, or timezone code changes.
  • Include a patch changeset for @when/web.

Scope and tradeoff

This framework setting applies across the app, not only to the booking route. In the inspected build, the ~26.9 KB appointment-page stylesheet and ~11.1 KB appointments-list stylesheet also become eligible. Only styles needed for each route are included, and styles above the new threshold remain external.

Larger HTML responses and reduced independent stylesheet-cache reuse are the tradeoff for removing initial stylesheet requests. SvelteKit retains CSS assets and disabled stylesheet links for client navigation.

The PageSpeed report estimated ~140 ms of savings from the wizard's blocking stylesheet. This PR verifies the dependency is removed, not that a particular PageSpeed score or timing improvement has been achieved.

Validation

  • Added production-build Chromium tests for mobile and desktop, each exercising booking and rescheduling with JavaScript disabled and all external build CSS blocked.
  • Assert no active external stylesheet links and confirm responsive styles through computed properties.
  • Both new tests failed with the old threshold (one active stylesheet) and passed with the new threshold.
  • All 14 targeted browser tests passed: critical CSS, font reuse, security headers/CSP/hydration, and theme/navigation behavior.
  • Svelte check: zero errors/warnings. Targeted ESLint, Prettier, and diff checks passed.

Independent reviews

  • Code review: clean, no blockers or material actionable findings. Reviewer independently reran all 14 browser tests against a fresh production build; all passed.
  • Readability review: clean, no actionable findings.
  • Remaining limitation: Chromium-only browser verification; no controlled Lighthouse or warm-cache performance measurement.

Follow-up to #120. Avatar and timezone improvements remain separate.

## Summary Include the booking wizard's initial CSS in the HTML instead of waiting for a render-blocking stylesheet request. - Raise SvelteKit's native per-stylesheet inlining threshold from 10,240 to 32,768 UTF-16 code units. - The wizard stylesheet is currently ~26 KB uncompressed (~4.5 KB gzip), above the old threshold and below the new one. - No styling, component behavior, CSP policy, font settings, or timezone code changes. - Include a patch changeset for `@when/web`. ## Scope and tradeoff This framework setting applies across the app, not only to the booking route. In the inspected build, the ~26.9 KB appointment-page stylesheet and ~11.1 KB appointments-list stylesheet also become eligible. Only styles needed for each route are included, and styles above the new threshold remain external. Larger HTML responses and reduced independent stylesheet-cache reuse are the tradeoff for removing initial stylesheet requests. SvelteKit retains CSS assets and disabled stylesheet links for client navigation. The PageSpeed report estimated ~140 ms of savings from the wizard's blocking stylesheet. This PR verifies the dependency is removed, **not** that a particular PageSpeed score or timing improvement has been achieved. ## Validation - Added production-build Chromium tests for mobile and desktop, each exercising booking and rescheduling with JavaScript disabled and all external build CSS blocked. - Assert no active external stylesheet links and confirm responsive styles through computed properties. - Both new tests failed with the old threshold (one active stylesheet) and passed with the new threshold. - All 14 targeted browser tests passed: critical CSS, font reuse, security headers/CSP/hydration, and theme/navigation behavior. - Svelte check: zero errors/warnings. Targeted ESLint, Prettier, and diff checks passed. ## Independent reviews - Code review: clean, no blockers or material actionable findings. Reviewer independently reran all 14 browser tests against a fresh production build; all passed. - Readability review: clean, no actionable findings. - Remaining limitation: Chromium-only browser verification; no controlled Lighthouse or warm-cache performance measurement. Follow-up to #120. Avatar and timezone improvements remain separate.
eleith-gitea-agent Bot added 1 commit 2026-11-02 23:29:54 +00:00
perf(web): inline initial booking styles
ci/woodpecker/pr/web Pipeline was successful
Details
ci/woodpecker/push/web Pipeline was successful
Details
328f8ab0d1
eleith merged commit 328f8ab0d1 into main 2026-11-02 23:32:04 +00:00
eleith deleted branch perf/inline-booking-critical-css 2026-11-02 23:32:04 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
blocked
Waiting on a prerequisite before work can proceed
 bug
Something is not working
 enhancement
New feature
No labels
Milestone
No items
No Milestone
Assignees
Clear assignees
eleith-gitea-agent Bot eleith (eleith)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: eleith/when#121