Biasanya optimasi kecepatan web identik dengan mengurangi ukuran CSS. Tapi GitHub baru saja mempublikasikan cerita sebaliknya: setelah bertahun-tahun memakai pendekatan CSS-in-JS, github.com kini berjalan 100% dengan CSS Modules — dan halaman GitHub justru jadi jauh lebih cepat, meski mereka justru mengirim lebih banyak CSS ke browser.

Dalam tulisan teknis berjudul "Improving site performance by shipping more CSS" yang terbit 25 September 2026, tim engineering GitHub membuka seluruh proses migrasi: latar masalahnya, strategi rollout, sampai angka hasilnya. Berikut ringkasannya.

Kenapa CSS-in-JS mulai jadi beban

Primer — sistem desain yang menggerakkan hampir seluruh tampilan GitHub, dari tombol sampai breadcrumb — dibangun dengan styled-components. Sejak 2023, jumlah komponen di halaman-halaman GitHub meledak dan masalah mulai terasa:

• Load awal lebih lambat karena style diinisialisasi di sisi client saat halaman dibuka.
• Performa server-side rendering (SSR) menurun karena pengumpulan style bergeser menjadi beban server.
• Update style makin sulit dikendalikan seiring bertambahnya komponen per halaman.

Puncaknya adalah prop sx: cara paling populer untuk mengustomisasi komponen. Nyaman dipakai — dukungan TypeScript bagus dan dekat dengan komponennya — tapi objek inline-nya harus dievaluasi terus-menerus saat halaman berjalan. Biaya runtime-nya tinggi dan tidak skalabel.

Solusinya: CSS Modules tanpa biaya runtime

GitHub memilih CSS Modules: style ditulis di file .css di samping komponen, nama class bersifat lokal secara default (anti bentrok), dan yang terpenting tanpa runtime. Tidak ada JavaScript yang perlu menghitung lalu menyuntikkan style; semuanya bergulung menjadi stylesheet statis yang ikut terkirim bersama HTML dan bisa di-cache browser.

Di sinilah paradoks "mengirim lebih banyak CSS" masuk akal: daripada mengirim logika styling lewat JavaScript, GitHub mengirim file CSS statis yang ukurannya lebih besar — tapi jauh lebih murah dieksekusi dan lebih mudah di-cache. Total byte CSS naik, biaya JavaScript turun, halaman pun lebih cepat.

Hasilnya: SSR 55% lebih cepat

Migrasi seluruh komponen Primer selesai Desember 2024 dengan hasil signifikan: 55% lebih cepat saat server-side rendering halaman, dan 25% lebih cepat waktu inisialisasi komponen. Setelah itu GitHub melanjutkan pembersihan ke seluruh kode github.com, termasuk sekitar 7.760 prop sx yang harus dimigrasikan pada puncaknya.

Playbook migrasi ala GitHub yang bisa ditiru

Bagian paling berharga adalah cara mereka melakukannya tanpa membuat situs mereka rusak:

1. Migrasi bertahap per komponen. Setiap komponen mendapat file CSS Modules baru, lalu dipasang feature flag untuk memilih antara gaya lama dan baru.
2. Visual regression test. Snapshot visual sebelum dan sesudah harus identik — bukti bahwa tidak ada tampilan yang rusak.
3. Rollout berlapis. Feature flag dibuka bertahap: tim internal, staf GitHub, baru seluruh pengguna.
4. Wrapper masa transisi. Paket perantara @primer/styled-react menjaga kode lama tetap berjalan selama migrasi.
5. Automasi agresif. Plugin VS Code buatan internal dan codemod memindahkan ribuan prop secara massal: 8 engineer memigrasikan 6.419 prop dalam 6 bulan, dengan penghematan waktu SSR 1% hingga 22% di berbagai halaman.
6. Manfaatkan AI coding agent. Sisa 895 prop diselesaikan hanya dalam 3 minggu oleh 2 engineer berbekal Copilot coding agent.

Contoh: dari prop sx ke CSS Modules

Gaya yang dulu didefinisikan inline di JavaScript:

// Sebelum: CSS-in-JS (biaya runtime)
<Box sx={{ padding: 3, backgroundColor: 'canvas.default' }}>
  Halo GitHub
</Box>

Berganti menjadi class dari file CSS biasa:

// Sesudah: CSS Modules (tanpa runtime)
import styles from './card.module.css';

<div className={styles.card}>Halo GitHub</div>

/* card.module.css */
.card {
  padding: 16px;
  background-color: var(--color-canvas-default);
}

Babak akhir: tema dan dependensi

Masih ada pekerjaan besar sebelum styled-components bisa dibuang total: tujuh tema GitHub, masing-masing dengan mode kontras tinggi, masih memakai utilitas JavaScript dari styled-components. Butuh sekitar dua bulan untuk memindahkan logika tema itu ke CSS. Di tengah proses ini, proyek styled-components mengumumkan masuk fase pemeliharaan (maintenance mode) pada Maret 2025 — sinyal bahwa langkah GitHub sejalan dengan arah industri.

Sejak Juni 2026, GitHub berjalan 100% dengan CSS Modules, dan sx, styled-components, serta styled-system resmi dihapus dari produk mereka.

Pelajaran untuk tim web di Indonesia

• Biaya runtime itu nyata. CSS-in-JS praktis, tapi untuk aplikasi dengan banyak komponen, evaluasi seriuslah performanya. CSS Modules atau CSS biasa plus design token bisa jadi opsi yang lebih ringan.
• Migrasi besar tidak harus big bang. Feature flag, visual regression test, dan rollout berlapis memungkinkan mengubah fondasi arsitektur dengan tetap aman di produksi.
• Design system adalah kendaraan perubahan. Karena semua komponen berasal dari sumber yang sama, satu perbaikan menyebar ke seluruh produk.
• Automasi dan AI untuk pekerjaan mekanis. Codemod dan AI coding agent memangkas pekerjaan repetitif — buktinya 895 prop dalam 3 minggu.

Sumber: Improving site performance by shipping more CSS — GitHub Blog, dan dokumentasi CSS Modules.