proomt

Search

Search posts, papers, and topics

All posts

GitHub OldJosh Black7 min readadvanced

Improving site performance by shipping more CSS

Read on github.blogHN 91·72 commentsLobsters 5

Summary

GitHub migrated its frontend from CSS-in-JS (styled-components) to CSS Modules to resolve performance issues like slow SSR and client-side style initialization. This multi-year effort, involving incremental rollouts and automated tooling, resulted in significant performance gains, including 55% faster SSR for Primer components and up to 22% improvement from `sx` prop removal.

  • CSS-in-JS caused slow initial page loads, server-side rendering, and style updates at GitHub's scale.
  • Migration to CSS Modules eliminated client/server runtime costs by shipping static CSS stylesheets.
  • An incremental strategy used feature flags, visual regression tests, and a wrapper library for safe component rollout.
  • Automated tooling (VS Code plugin, codemods, Copilot agents) was crucial for migrating thousands of `sx` props.

Engineers managing large-scale frontend applications or design systems can learn from GitHub's detailed, multi-year strategy for migrating away from CSS-in-JS to improve performance and maintainability.

8/10
architectureperformancefrontendcssmigrationdesign systems

Related reading

  1. Migrating the GitHub Copilot runtime to Rust, using Copilot

    The Copilot agent runtime was rewritten from a 130‑k‑line TypeScript/Node.js codebase into a native Rust library (~830 k lines of Rust) to reduce startup latency, memory use, and improve reliability. The migration was done incrementally (in‑place) across 128 PRs, with AI‑generated code handling most of the work. The new runtime exposes a C ABI for in‑process embedding by all six Copilot SDK langu…

    GitHub Oldgithub.blog65 minHN188

  3. Optimizing GitHub Actions for Agent PRs: Speculative Test Slicing and AST Impact Analysis

    A step‑by‑step guide for handling the flood of pull requests generated by code‑generation agents. It builds a TypeScript CLI that uses ts‑morph to do AST‑level change‑impact analysis, maps affected symbols to tests, and runs only those tests in a “speculative” GitHub Actions job while a full‑suite verification runs in the background. The article includes concrete CLI code, dependency choices, con…

    SitePointsitepoint.com17 min

  5. The Road to Better Performance Profiles – Part 2

    Mozilla’s Automation Team added native system‑wide profiling to their CI pipelines for Speedometer 3 on Windows, macOS, Linux, and Android, using xperf, perf, and simpleperf together with the samply toolchain, and modernized the mozgeckoprofiler symbolication stack by replacing the legacy Eliot service with samply and profiler‑edit.

    Mozilla Automation Teammozilla.org5 min

  6. Developer policy update: Transparency, state policy, and what’s ahead

    GitHub updated its transparency reporting, showing a significant increase in government takedown requests due to revised counting methods, not more content removals. The company also detailed its engagement in 2026 state legislative sessions, influencing AI transparency and age assurance laws to protect open source projects from unintended impacts.

    GitHub Oldgithub.blog5 min