GitHub tăng tốc website bằng cách... chuyển sang nhiều CSS hơn

Việc tối ưu hiệu năng web thường gắn với việc cắt giảm tài nguyên. Nhưng GitHub lại chứng minh điều ngược lại: bằng cách chuyển từ CSS-in-JS sang CSS Modules, họ không chỉ giảm đáng kể thời gian tải trang mà còn đơn giản hóa toàn bộ kiến trúc giao diện.

Đây là câu chuyện về hệ thống thiết kế Primer — nền tảng cho mọi giao diện trên GitHub, từ nút bấm, biểu ngữ đến thanh điều hướng — và hành trình đưa nó thoát khỏi sự phụ thuộc vào JavaScript runtime.

Minh họa quá trình chuyển đổi giao diện GitHub

Khi CSS-in-JS trở thành gánh nặng

Năm 2023, số lượng component trên một số trang của GitHub bắt đầu tăng vọt. Điều này phơi bày những hạn chế cố hữu của giải pháp CSS-in-JS mà họ đang dùng:

• Thời gian tải trang ban đầu kéo dài vì style phải được khởi tạo phía client
• Hiệu năng server-side rendering (SSR) giảm sút khi việc thu thập style chuyển từ client sang server
• Cập nhật style mất kiểm soát khi số component trên trang tăng lên

Rõ ràng nhóm Primer cần giải quyết vấn đề từ gốc. Họ cần một giải pháp loại bỏ hoàn toàn chi phí runtime ở cả client lẫn server — nhưng vẫn phải đảm bảo không làm hỏng bất kỳ phần nào của GitHub trong quá trình chuyển đổi.

CSS Modules: giải pháp cân bằng

Nhóm Primer chọn CSS Modules — định dạng cho phép viết CSS thuần túy nhưng vẫn giữ được tính đóng gói và đặt cạnh component như CSS-in-JS.

Với CSS Modules, style được viết trong file .css nằm cạnh mã JavaScript của component. Mọi tên class mặc định đều là cục bộ, tránh xung đột toàn cục. Quan trọng nhất, giải pháp này loại bỏ hoàn toàn runtime ở cả client lẫn server — style được gộp thành các stylesheet gửi kèm trong HTML của trang.

Tuy nhiên, đây là thay đổi mang tính cách mạng so với hiện trạng. Nó đòi hỏi phải cập nhật mọi component của Primer và mọi component trên GitHub đang dùng kỹ thuật cũ.

Chiến lược di cư từng bước được áp dụng cho mỗi component:

1. Thêm file mới chuyển đổi style hiện có sang CSS Modules
2. Bọc component trong feature flag để chuyển đổi giữa style cũ và mới
3. Dùng kiểm thử hồi quy hình ảnh (visual regression test) để xác minh snapshot giống hệt nhau
4. Triển khai dần: nội bộ nhóm → nhân viên GitHub → toàn bộ người dùng

Đến tháng 12/2024, toàn bộ component trong Primer đã được chuyển đổi. Kết quả rất ấn tượng:

• Giảm 55% thời gian render phía server
• Giảm 25% thời gian khởi tạo component

Thách thức mang tên "sx prop"

Phần khó nhằn nhất khi loại bỏ CSS-in-JS khỏi Primer là việc sử dụng sx prop — cách để tùy biến component bằng object inline. Nó thể hiện cả điểm mạnh lẫn điểm yếu của CSS-in-JS:

• Hỗ trợ TypeScript tuyệt vời, tích hợp với Design Tokens
• Đặt cạnh component, mọi thứ ở một chỗ
• Chi phí runtime cao do tính động của object inline
• Khó mở rộng khi số component dùng sx trên trang tăng lên

Giải pháp tạm thời của nhóm là tạo thư viện @primer/styled-react — đóng vai trò "cầu nối" cho phép các component đã di cư vẫn nhận được sx prop. Nhờ vậy, các phần của GitHub đang dùng prop này vẫn hoạt động bình thường trong khi những nơi khác đã hưởng lợi từ hiệu năng của @primer/react.

Kiến trúc hệ thống Primer trên GitHub

Từ 7.760 sx prop xuống 0

Công cuộc di cư sx prop bắt đầu từ tháng 4/2025 với đỉnh điểm khoảng 7.760 prop cần chuyển đổi. Một kỹ sư nội bộ đã tạo plugin VS Code hỗ trợ di cư từng prop, cùng một codemod nội bộ để chuyển đổi toàn bộ file.

Một nhóm gồm 8 kỹ sư luân phiên đã di cư 6.419 prop trong 6 tháng, ghi nhận mức cải thiện thời gian SSR từ 1% đến 22% ở một số trang.

Đến tháng 4/2026, khi công việc được tiếp tục, bối cảnh đã khác hẳn. Với sự hỗ trợ của GitHub Copilot coding agent, chỉ với hai kỹ sư, nhóm đưa con số từ 895 xuống 0 sx prop chỉ trong ba tuần.

Trận chiến cuối cùng: hệ thống theme

Tưởng như mọi chuyện đã xong, nhưng GitHub hỗ trợ bảy theme khác nhau, mỗi theme đều có chế độ tương phản cao — tất cả đều vận hành nhờ styled-components. Trước khi loại bỏ hoàn toàn dependency này, họ phải tách rời phần theming.

May mắn thay, các biến theme của GitHub vốn đã được định nghĩa bằng CSS trong gói @primer/css. Vấn đề chỉ nằm ở phần JavaScript và các tiện ích do styled-components cung cấp. Sau hai tháng di cư và một vài trục trặc nhỏ, mọi thứ đã sẵn sàng — thậm chí việc loại bỏ dependency cũng được bọc trong feature flag để đảm bảo an toàn.

Từ tháng 6/2026, GitHub vận hành hoàn toàn trên 100% CSS Modules.

Bài học về di cư kiến trúc quy mô lớn

Điều khởi đầu như một cuộc di cư CSS hóa ra lại là một quá trình tái nền tảng hóa (re-platforming) toàn diện cách GitHub tạo style, theming và phân phối giao diện ở quy mô lớn.

Các nguyên tắc then chốt rút ra:

• Feature flag mọi thứ — cho phép thử nghiệm trên production mà không gây rủi ro
• Di cư từng bước — tránh "big bang" gây gián đoạn
• Kiểm thử hồi quy hình ảnh — đảm bảo giao diện không thay đổi ngoài ý muốn
• Tự động hóa khi có thể — codemod và AI coding agent giúp tăng tốc đáng kể

Với các nhà phát triển Việt Nam đang xây dựng design system hoặc cân nhắc giữa CSS-in-JS và CSS Modules, câu chuyện này mang lại bài học thực tế: hiệu năng không chỉ đến từ việc gửi ít tài nguyên hơn, mà còn từ việc loại bỏ đúng loại chi phí runtime.