GitHub تخفض وقت الـ server-side rendering بنسبة 55% بعد انتقالها من CSS-in-JS إلى CSS Modules
حجم ملف CSS لم يكن هو ما يبطئ الصفحات، بل الحساب الذي يجري عليه أثناء التشغيل، والمتصفح يعالج CSS العادي أسرع من أي كود يولّده.
نشرت GitHub على مدونتها الهندسية في 25 سبتمبر 2026 مقالًا يشرح كيف خفّضت وقت الـ server-side rendering بنسبة 55%، رغم أنها صارت ترسل كمية أكبر من CSS إلى المتصفح لا أقل.
كانت GitHub تعتمد على مكتبة styled-components، وهي من أسلوب CSS-in-JS. في هذا الأسلوب لا تكون التنسيقات ملفًا جاهزًا، بل كودًا يُحسب في لحظة عرض الصفحة. ومع ازدياد عدد الـ components لديها في 2023، صار هذا الحساب عبئًا على المتصفح وعلى الخادم معًا.
فانتقلت إلى CSS Modules. في هذا الأسلوب تتحوّل التنسيقات أثناء الـ build إلى ملفات CSS عادية تُرسل مع الـ HTML، ولا يحسب الـ runtime أي شيء منها.
وجاءت الأرقام على نظام التصميم الخاص بها Primer وحده كالتالي:
- انخفاض وقت الـ SSR بنسبة 55%
- تسريع تهيئة الـ components بنسبة 25%
- تحسّن عبر خدماتها المختلفة يتراوح بين 1% و21.97%
وأنهت الشركة عملية النقل بالكامل في يونيو 2026.
والفكرة التي يوضحها المثال أن الملف المُرسل صار أكبر والصفحة صارت أسرع. فما كان يبطئ الأداء ليس حجم الـ CSS، بل العمل الذي يُنجز عليه وقت التشغيل. والمتصفح مصمم لمعالجة CSS العادي بكفاءة تفوق أي كود يولّد التنسيقات بنفسه.
وبالنسبة للفرق التي تستخدم CSS-in-JS في منتج يكبر، لم يعد هذا خيارًا نظريًا يُناقش في المقالات. فهناك الآن تجربة منشورة بالأرقام من منصة بحجم GitHub، تبيّن أين تذهب التكلفة مع نمو عدد الـ components.