Load reader styles by route and reduce unused render-blocking CSS #128

Problem

Public reader pages receive a global stylesheet dominated by rules they do not use.

Production audit evidence

Measured on 2026-10-07 UTC against https://devfeed.tech using Lighthouse 12.6.1 and Chrome 154.0.8037.97, with fresh anonymous browser profiles. Mobile uses the default simulated mobile network/4× CPU profile (412×823, DPR 1.75); desktop uses the default desktop profile (1350×940, DPR 1). These are lab observations, not field p75 data.

unused-css-rules estimated 15,373 bytes unused on mobile feeds and 16,538 on /topics, from the 18,284-byte 41xw4hwa1ml1q.css chunk (84–90% unused). The leaderboard also flagged render-blocking styles with an estimated 150ms saving. The current globals.css imports settings, profile editor, article, catalog, onboarding, and other route styles together.

Audit IDs: unused-css-rules, render-blocking-resources, render-blocking-insight.

Work required

• Use route/component CSS boundaries for styles not needed by the initial page, keeping required shared tokens/layout and above-the-fold styles available immediately.
• Check intercepted article routes, overlays, lazy components, and theme transitions before moving styles; do not delete rules solely because one navigation did not exercise them.

Acceptance criteria

• Same-route coverage and Lighthouse reports show lower unused CSS bytes and reduced render-blocking impact.
• No flash of unstyled content or layout/theme regressions during direct navigation, client navigation, overlays, settings, and profile visits.
• Capture comparable before/after reports and add regression coverage for the changed behavior. For shared reader changes, verify browser behavior on web and both built Chrome/Edge extensions.