GitHub ปรับโฉม CSS ครั้งใหญ่! เพิ่มประสิทธิภาพหน้าเว็บพุ่ง

Primer Design System คือขุมพลังเบื้องหลังหน้าตาของ GitHub ที่เราคุ้นเคย ตั้งแต่ปุ่ม แบนเนอร์ ไปจนถึง breadcrumbs โดยคอมโพเนนต์พื้นฐานเหล่านี้ต้องรองรับการเข้าถึง (accessible) มีความยืดหยุ่น และทำงานได้อย่างรวดเร็วในทุกสถานการณ์

ย้อนกลับไปในปี 2023 จำนวนคอมโพเนนต์ในบางหน้าเริ่มเพิ่มขึ้นอย่างก้าวกระโดด ส่งผลให้โซลูชัน CSS-in-JS เดิมเริ่มประสบปัญหาด้านประสิทธิภาพหลายประการ ดังนี้:

การโหลดหน้าเว็บครั้งแรกช้าลงเพราะต้องตั้งค่าสไตล์ที่ฝั่งไคลเอนต์
ประสิทธิภาพการเรนเดอร์ฝั่งเซิร์ฟเวอร์ (Server-side rendering) ลดลง
การอัปเดตสไตล์เริ่มควบคุมได้ยากเมื่อคอมโพเนนต์มีจำนวนมากขึ้น

ทีม Primer จึงจำเป็นต้องแก้ไขปัญหานี้จากต้นเหตุด้วยการหาทางเลือกใหม่ที่ลดภาระทั้งฝั่งไคลเอนต์และเซิร์ฟเวอร์ โดยมีเงื่อนไขสำคัญว่าการย้ายระบบต้องไม่ทำให้ GitHub เกิดความเสียหายระหว่างดำเนินการ

ขอแนะนำ CSS (Modules)

ทีมงานเลือกใช้ CSS Modules เป็นทางออก เนื่องจากช่วยให้เขียน CSS แบบดั้งเดิม (native) ได้ โดยยังคงความสามารถในการจัดวางโค้ดไว้ด้วยกัน (colocation) และแยกส่วนการทำงาน (encapsulation) ได้ดีเยี่ยม

ด้วยวิธีนี้ สไตล์จะถูกสร้างเป็นไฟล์ CSS ควบคู่ไปกับ JavaScript ของคอมโพเนนต์ และกำหนดชื่อคลาสเป็นแบบโลคอล (local) ช่วยป้องกันปัญหาชื่อซ้ำซ้อนหรือผลกระทบจาก global selectors นอกจากนี้ยังช่วยเปลี่ยนสไตล์ให้กลายเป็นสไตล์ชีตที่ส่งไปพร้อมกับ HTML แทนการใช้รันไทม์ที่หนักหน่วง

อย่างไรก็ตาม การเปลี่ยนแปลงนี้ต้องอัปเดตทุกคอมโพเนนต์ในระบบ ซึ่งถือเป็นงานใหญ่ แต่ระบบการออกแบบ (Design System) ที่ดีคือเครื่องมือที่เหมาะสมที่สุดในการขับเคลื่อนการเปลี่ยนแปลงระดับนี้ในวงกว้าง

การก้าวไปสู่ CSS Modules อย่างค่อยเป็นค่อยไป

ทีม Primer เลือกใช้กลยุทธ์การย้ายระบบแบบเพิ่มทีละส่วน (incremental migration) เพื่อความปลอดภัย โดยมีขั้นตอนสำหรับแต่ละคอมโพเนนต์ดังนี้:

สร้างไฟล์สไตล์ใหม่ในรูปแบบ CSS Modules
ใช้ feature flag เพื่อสลับระหว่างสไตล์ใหม่และแบบเดิม
ใช้การทดสอบ visual regression ตรวจสอบว่าหน้าตาต้องเหมือนเดิมทุกประการ
ค่อยๆ เปิดใช้งานไล่ตามลำดับ ตั้งแต่ทีมภายใน พนักงาน จนถึงผู้ใช้ทั้งหมด

กระบวนการนี้สร้างวงจรการตอบกลับที่แข็งแกร่ง ทำให้ตรวจพบปัญหาได้รวดเร็ว ภายในเดือนธันวาคม 2024 การย้ายคอมโพเนนต์ทั้งหมดก็สำเร็จลุล่วง ผลลัพธ์ที่ได้คือเวลาในการเรนเดอร์ฝั่งเซิร์ฟเวอร์ลดลง 55% และใช้เวลาตั้งค่าคอมโพเนนต์ในหน้าเว็บน้อยลง 25%

การก้าวออกจาก CSS-in-JS ที่ GitHub

อุปสรรคสำคัญในการเลิกใช้ CSS-in-JS คือ sx prop ซึ่งเคยเป็นวิธีหลักในการปรับแต่งคอมโพเนนต์ แม้จะรองรับ TypeScript ได้ดีและทำงานร่วมกับ Design Tokens ได้ง่าย แต่ก็มีต้นทุนรันไทม์สูงและขยายขนาดได้ยาก

การลดการใช้งาน sx ทั่วทั้ง GitHub จึงเป็นภารกิจสำคัญเพื่อปรับปรุงประสิทธิภาพทันที และเป็นการเตรียมความพร้อมสำหรับการนำ CSS-in-JS ออกจากผลิตภัณฑ์อย่างสมบูรณ์ในอนาคต

ความเป็นคู่ของ Primer

แม้ระบบหลักจะเลิกใช้ styled-components แล้ว แต่รหัสต้นฉบับส่วนใหญ่ของ GitHub ยังคงใช้งานอยู่ ทีมงานจึงสร้างคอมโพเนนต์ wrapper ในไลบรารีชื่อ @primer/styled-react เพื่อให้โค้ดเก่ายังทำงานได้ด้วย sx ในขณะที่ส่วนใหม่สามารถรับประโยชน์จากประสิทธิภาพของ @primer/react แบบใหม่ได้ทันที

Styled Box Zero

ในเดือนเมษายน 2025 มีการใช้งาน sx props ที่ต้องย้ายระบบกว่า 7,760 จุด โดยอาศัยเครื่องมืออย่างปลั๊กอิน VS Code ที่สร้างโดย Ian Sanders และการใช้ codemod ภายในบริษัท ซึ่งช่วยให้วิศวกร 8 คน ย้ายระบบได้ถึง 6,419 จุดภายใน 6 เดือน

Table titled “Server Side Rendering” with a search field and columns for CATALOG_SERVICE, CONTROLLER, and IMPROVEMENT. It lists GitHub services and controllers with improvement percentages ranging from 3.05% to 21.97%, including a highest value of 21.97% for github/code_view / commit.

ความก้าวหน้าของ GitHub Copilot ยังมีส่วนสำคัญอย่างมาก เมื่อทีมงานกลับมาสานต่องานในเดือนเมษายน 2026 ด้วยการใช้ Copilot coding agents ช่วยงาน ทำให้ลดจำนวน sx props จาก 895 จุดเหลือ 0 ได้ในเวลาเพียง 3 สัปดาห์

Area chart titled “Total SX props” showing values declining from about 7,300 in May to near zero by June–July of the following year, with several short-lived spikes. Two highlighted points are labeled 6.87k around August and 5.37k around October.

ศึกแห่งธีม

ด่านสุดท้ายคือระบบธีมทั้ง 7 แบบของ GitHub ที่เดิมผูกติดกับ styled-components ทีมงานต้องแยกส่วนระบบธีม (decouple) ออกมาก่อน โดยโชคดีที่ตัวแปรธีมส่วนใหญ่ถูกกำหนดใน CSS ผ่านแพ็กเกจ @primer/css ไว้อยู่แล้ว การย้ายระบบจึงดำเนินไปได้อย่างราบรื่นภายใต้การใช้ feature flag เพื่อความปลอดภัย

จบด้วยดีทุกประการ

ตั้งแต่เดือนมิถุนายน 2026 เป็นต้นมา GitHub ทำงานบน CSS Modules 100% เต็มตัว ความสำเร็จนี้ไม่ใช่แค่การเปลี่ยนภาษาที่ใช้เขียนสไตล์ แต่เป็นการยกเครื่องแพลตฟอร์มการสร้าง UI ใหม่ทั้งหมด ซึ่งช่วยเพิ่มทั้งประสิทธิภาพและประสบการณ์ที่ดีให้กับผู้ใช้งานทั่วโลกอย่างยั่งยืน