DEVOURED
Improving site performance by shipping more CSS
GitHub cut server-side rendering time by 55% by abandoning CSS-in-JS in favor of CSS Modules to eliminate runtime styling overhead.
What: GitHub migrated its infrastructure to move away from CSS-in-JS. The change reduced component initialization time by 25% and SSR time by up to 22% by avoiding dynamic style generation during the request lifecycle.
Why it matters: Large-scale React applications are hitting performance limits with CSS-in-JS; a return to build-time CSS compilation is becoming a common optimization pattern for complex apps.
Deep dive
- Performance Gains: Achieved 55% reduction in SSR time for Primer components.
- Technical Debt: Addressed overhead caused by massive runtime style injection.
- Migration Strategy: Utilized feature flags, automated codemods, and visual regression tests to manage the transition safely.
- Outcome: Improved runtime speed and reduced complexity by decoupling styling from JavaScript execution.
Decoder
- CSS-in-JS: A technique where CSS is composed using JavaScript at runtime, often causing performance bottlenecks in large applications.
- SSR (Server-Side Rendering): The process of rendering a web page on the server before sending the HTML to the client browser.
Original article
GitHub migrated github.com from CSS-in-JS to CSS Modules to remove client- and server-side styling overhead at scale. The migration cut Primer server-side rendering time by 55%, reduced component initialization time by 25%, and later improved SSR by up to 22% on some pages while thousands of sx usages were gradually replaced through feature flags, visual regression tests, codemods, and staged rollouts.
Explore all 67 articles in today's digest
Fresh dev news, AI-digested daily. Never miss a trend at devoured.fyi