تحسين أداء CSS: لماذا تشحن GitHub المزيد من CSS (وليس أقل) لتحقيق أوقات تحميل أسرع
لأكثر من عقد من الزمان، كانت استراتيجية أداء الواجهة الأمامية متسقة بشكل ملحوظ: قلل من CSS الخاص بك، وقم بتضمين المسار الحرج، وقسم الباقي، وقم بتسليم كل شيء بشكل غير متزامن. لقد تم ترسيخ شعار "شحن كود أقل" بعمق في عقلية المطورين الجماعية لدرجة أن التشكيك فيه يبدو شبه هرطقة.
ثم نشر فريق الهندسة في GitHub مقالاً بعنوان "تحسين أداء الموقع عن طريق شحن المزيد من CSS"، وأثار حاجبًا جماعيًا في مجتمع الواجهة الأمامية. العنوان وحده يبدو وكأنه تناقض. شحن المزيد من CSS لجعل الموقع أسرع؟ أليس هذا عكسيًا؟
كما اتضح، لا. نتائج GitHub تتحدى الحكمة التقليدية التي حكمت استراتيجيات تسليم CSS لسنوات. تكشف بياناتهم أن النهج التقليدي المتمثل في تضمين CSS الحرج وتقسيم الكود المتبقي، رغم أنه سليم من الناحية النظرية، غالبًا ما ينتج عنه عوائد متناقصة في الظروف الواقعية. في بعض الحالات، يضر بالأداء بشكل فعال.
في هذا الغوص العميق، سنفكك اكتشاف GitHub غير البديهي، وندرس المقاييس التي تشرح لماذا يمكن أن يكون شحن المزيد من CSS أسرع، ونستكشف ما يعنيه هذا لسير عملك التطويري، بما في ذلك كيف تتناسب أدوات مثل DivMagic مع استراتيجية CSS حديثة تركز على الأداء.
دليل تسليم CSS التقليدي
قبل أن نقدر لماذا نهج GitHub ثوري، نحتاج إلى فهم الإطار الذي يتحداه. تبدو استراتيجية تحسين CSS القياسية التي توصي بها معظم أدلة الأداء شيئًا كهذا:
الخطوة 1: تضمين CSS الحرج
استخرج قواعد CSS المطلوبة لعرض المحتوى المرئي أولاً وقم بتضمينها مباشرة في <head> من HTML الخاص بك. هذا يلغي طلب حظر العرض لورقة الأنماط الخارجية أثناء الرسم الأولي.
الخطوة 2: تحميل ورقة الأنماط الكاملة بشكل غير متزامن
قم بتحميل ملف CSS الكامل بشكل غير متزامن باستخدام خدعة السمة preload أو media ، حتى يتمكن المتصفح من بدء العرض فورًا باستخدام الأنماط المضمنة وتطبيق ورقة الأنماط الكاملة بمجرد وصولها.
الخطوة 3: تقسيم CSS حسب المسار أو المكون
في التطبيقات ذات الصفحة الواحدة، قم بتقديم CSS اللازم فقط للعرض الحالي. أدوات مثل PurgeCSS، ووحدات CSS، وأدوات تقسيم الكود الخاصة بالإطار تجعل هذا النهج التفصيلي ممكنًا.
على الورق، تعمل هذه الاستراتيجية على تحسين كل بايت. في الممارسة العملية، ومع ذلك، فإنها تقدم سلسلة من المقايضات التي نادرًا ما تُناقش، وهنا بالضبط بدأ فريق الهندسة في GitHub تحقيقهم.
اكتشاف GitHub غير البديهي
مثل معظم المنصات واسعة النطاق، نفذت GitHub نظامًا متطورًا لتسليم CSS. قاموا بتضمين CSS الحرج، وتقسيم الباقي إلى أجزاء خاصة بالمسارات، واستخدموا تقنيات تحميل حديثة لتجنب سلوك حظر العرض. ومع ذلك، روت بيانات مراقبة المستخدم الحقيقية (RUM) قصة تتعارض مع توقعاتهم.
الزيارات المتكررة، وهي القاعدة لموقع مثل GitHub حيث يعود المطورون عشرات المرات في اليوم، كانت أبطأ مما ينبغي. CSS الحرج المضمن، الذي يتم تنفيذه في كل تحميل صفحة، كان يضيف وقت تنفيذ JavaScript. الأجزاء الخاصة بالمسارات تعني أن كل تنقل يؤدي إلى طلب CSS جديد. تعقيد النظام كان يضيف عبئًا دون فائدة متناسبة.
كان حلهم هو قلب النص: تقديم ملف CSS واحد أكبر يتم تخزينه مؤقتًا بواسطة المتصفح في الزيارة الأولى وإعادة استخدامه عبر جميع التنقلات اللاحقة. لا CSS حرج مضمن. لا تقسيم لكل مسار. لا حيل تحميل غير متزامن. مجرد ملف واحد، طلب واحد، مخزن بالكامل.
النتيجة؟ تحميل صفحات أسرع للغالبية العظمى من المستخدمين، وتقليل عبء تنفيذ JavaScript، وقاعدة كود أبسط بشكل كبير.
"أسرع طلب CSS هو الذي لا يحدث أبدًا. ورقة أنماط واحدة مخزنة مؤقتًا تجعل كل زيارة متكررة مجانية تقريبًا."
لماذا "المزيد من CSS" ليس في الواقع أكثر
هناك فارق دقيق مهم هنا يسهل تفويته. GitHub لا يشحن CSS منتفخًا ، بل يشحن ملف CSS موحدًا ومحسنًا وقابلًا للتخزين المؤقت . كلمة "المزيد" في عنوانهم تشير إلى حجم CSS المسلم في طلب واحد، وليس تأييدًا لأوراق أنماط كبيرة الحجم.
الفرق الرئيسي هو بين إجمالي البايتات المنقولة والبايتات الفعالة المنقولة. عندما يتم تخزين ملف CSS مؤقتًا، لا يحتاج المتصفح إلى جلبه مرة أخرى في تحميلات الصفحات اللاحقة. لا يتم إجراء طلب HTTP أبدًا، ولا يتم نقل البايتات، ويكون مسار العرض نظيفًا. على النقيض من ذلك، يتم إعادة إرسال CSS المضمن مع كل استجابة HTML، بغض النظر عما إذا كان المحتوى قد تغير.
هذا المقياس، تجربة الزيارة المتكررة، هو المكان الذي أظهرت فيه بيانات GitHub التحسن الأكثر دراماتيكية. لمنصة حيث يتنقل المستخدمون بسرعة بين المستودعات والمشكلات وطلبات السحب وعروض الكود، تهيمن التنقلات المتكررة على تجربة المستخدم.
المقاييس التي تهم حقًا
لفهم قرار GitHub، تحتاج إلى النظر إلى ما وراء المقياس السطحي "حجم ملف CSS الإجمالي" وفحص ما يدفع الأداء المدرك في العالم الحقيقي.
أول رسم للمحتوى (FCP)
يقيس FCP عندما يعرض المتصفح أول قطعة من محتوى DOM. يهدف CSS الحرج التقليدي إلى تقليل FCP عن طريق إزالة CSS الذي يحجب العرض. ومع ذلك، إذا كان ملف CSS مخزنًا مؤقتًا، فلا يوجد طلب حظر عرض في الزيارات المتكررة، يقرأ المتصفح من ذاكرة التخزين المؤقت ويرسم فورًا.
الوقت حتى التفاعل (TTI)
يقيس TTI عندما تصبح الصفحة قابلة للتفاعل بالكامل. CSS الحرج المضمن، عندما يقترن بـ JavaScript الذي يدير تحميل ورقة الأنماط غير المتزامن، يمكن أن يؤخر TTI لأن المتصفح يجب أن ينفذ JavaScript قبل أن يتمكن من حل ورقة الأنماط الكاملة. ملف CSS واحد مخبأ يلغي هذا الاعتماد على JavaScript تمامًا.
تغيير التخطيط التراكمي (CLS)
يقيس CLS الاستقرار البصري. أحد أكثر الشكاوى شيوعًا حول تطبيقات CSS الحرج هو أنها تسبب "وميض" الصفحة، حيث يتغير التخطيط عندما يتم تحميل ورقة الأنماط الكاملة وتتجاوز الأنماط المضمنة. ملف CSS واحد محمل بالكامل من البداية يلغي هذا التغيير في التخطيط في الزيارات المتكررة.
الخلاصة واضحة: بالنسبة لأي موقع أو تطبيق يزوره المستخدمون أكثر من مرة، فإن استراتيجية التخزين المؤقت أهم من حجم الملف الأولي. وبالنسبة لأدوات المطورين ولوحات المعلومات والمنصات، حيث الزيارات المتكررة هي القاعدة وليس الاستثناء، فإن هذا عامل حاسم.
HTTP/2 وموت عصر "الطلبات الصغيرة المتعددة"
كان أحد الدوافع الأصلية لتقسيم CSS هو الحمل الزائد لطلبات HTTP/1.1. كل طلب يتطلب اتصال TCP منفصل، وكانت المتصفحات تستطيع فتح عدد محدود من الاتصالات لكل نطاق. تقسيم CSS إلى أجزاء أصغر يعني المزيد من الطلبات، لكن كل طلب كان أسرع في التنزيل، وهي مقايضة كانت تستحق العناء أحيانًا.
غير HTTP/2 قواعد اللعبة. مع الإرسال المتعدد، يمكن لاتصال TCP واحد التعامل مع عشرات الطلبات المتزامنة دون حظر الرأس. هذا يلغي الكثير من الحمل الزائد الذي جعل تقسيم الكود جذابًا في المقام الأول. الحسابات الحديثة تفضل طلبات أقل وأكبر على العديد من الطلبات الصغيرة، خاصة عندما يمكن تخزين تلك الطلبات الأكبر مؤقتًا.
متى يكون شحن المزيد من CSS منطقيًا، ومتى لا يكون
نهج GitHub ليس حلاً شاملاً. إنه يعمل بشكل رائع للمواقع ذات الخصائص المحددة، لكنه ليس إجابة واحدة تناسب الجميع. إليك كيفية تقييم ما إذا كان ينطبق على مشروعك.
متى يعمل
- معدل زيارات متكررة مرتفع: المنصات ولوحات المعلومات والأدوات الداخلية ومنتجات المطورين حيث يعود المستخدمون عدة مرات يوميًا
- بصمة CSS معتدلة: إجمالي CSS المضغوط أقل من 200 كيلوبايت، كبير بما يكفي للاستفادة من التخزين المؤقت، وصغير بما يكفي لتجنب عقوبات التنزيل
- تنقل متعدد الصفحات أو متعدد المشاهدات: التطبيقات حيث يتنقل المستخدمون بين العديد من المشاهدات أو المسارات المختلفة
- HTTP/2 مع تخزين مؤقت لشبكة CDN: بنية تحتية تدعم التسليم الفعال ورؤوس تخزين مؤقت قوية
متى لا يعمل
- صفحات هبوط لزيارة واحدة: صفحات تسويقية أو مواقع حملات حيث يصل معظم المستخدمين مرة واحدة ولا يعودون أبدًا
- حزم CSS ضخمة: أوراق أنماط تزيد عن 500 كيلوبايت مضغوطة، حيث تفوق عقوبة التنزيل الأولي فوائد التخزين المؤقت
- أنماط متنوعة للغاية: مواقع ذات متطلبات CSS مختلفة بشكل كبير عبر الأقسام (على الرغم من أن هذا نادر في الممارسة العملية)
| Approach | Initial Load | Repeat Load | Complexity |
|---|---|---|---|
| Inline Critical CSS + Async | Fast (render-blocking JS) | Medium (re-inlines each time) | High (build tooling needed) |
| Code-Split CSS per Route | Medium (multiple requests) | Medium (new request per route) | High (router integration) |
| Single Cached CSS File | Slightly slower first visit | Very fast (zero requests) | Low (one file, one request) |
ماذا يعني هذا لسير عمل التطوير الخاص بك
الآثار العملية لاكتشاف GitHub تمتد إلى ما هو أبعد من مقاييس الأداء. تبسيط استراتيجية توصيل CSS له تأثير متتالٍ على خط أنابيب التطوير بأكمله.
تكوين بناء أبسط
يتطلب تضمين CSS الحرج أدوات بناء يمكنها تحديد الأنماط الحرجة واستخراجها وحقنها في HTML وقت البناء. يتطلب صيانة واختبارًا وضبطًا مستمرًا. ملف CSS واحد يلغي كل هذا التعقيد. تنتقل خطوة البناء من خط أنابيب متعدد المراحل إلى تجميع CSS مباشر.
تبعيات أقل
أدوات استخراج CSS الحرج ومكتبات التحميل غير المتزامن وأطر حقن CSS القائمة على المسار تصبح جميعها غير ضرورية. هذا يقلل من بصمة التبعيات وعبء الأمان والصيانة المرتبط بها.
تصحيح أخطاء أسهل
عندما يحدث خطأ ما في تضمين CSS الحرج، يكون تصحيح الأخطاء صعبًا بشكل سيئ. قد يتم عرض الصفحة بشكل غير صحيح، ثم "تقفز" فجأة عند تحميل ورقة الأنماط الكاملة. قد تكون الأنماط مكررة أو متعارضة أو مفقودة. ملف CSS واحد يلغي هذه الفئة بأكملها من سيناريوهات تصحيح الأخطاء.
تحسين CSS الذي تشحنه
قبول أن "شحن المزيد من CSS" يمكن أن يكون أسرع ليس ترخيصًا لتجاهل جودة CSS. يجب أن يكون CSS الذي تشحنه في هذا الملف الواحد نظيفًا وفعالًا وهادفًا قدر الإمكان. إليك كيفية التأكد من أن CSS الذي تقوم بتجميعه يستحق التخزين المؤقت.
تنظيف القواعد غير المستخدمة
أدوات مثل PurgeCSS والأدوات المساعدة الخاصة بالإطار (وضع JIT في Tailwind، على سبيل المثال) تزيل قواعد CSS غير المستخدمة في مشروعك. هذا مهم بشكل خاص عند تجميع CSS عبر موقع بأكمله، فأنت لا تريد قواعد لمكونات لم تعد موجودة.
تحسين كفاءة المحدد
المحددات المعقدة (.nav ul li a span) تتطلب عملاً أكبر من المتصفح لتقييمها مقارنة بالمحددات الأبسط (.nav-link). على الرغم من أن تأثير الأداء للمحددات غالبًا ما يُبالغ فيه، إلا أنه لا يزال من الجدير الحفاظ على محدداتك خفيفة.
تصغير وضغط
تصغير CSS يزيل المسافات البيضاء والتعليقات والأحرف الزائدة. ثم يقلل ضغط Gzip أو Brotli الحجم المنقول بنسبة 60-80%. ملف CSS غير مصغر بحجم 200 كيلوبايت قد يكون فقط 40 كيلوبايت بعد الضغط، وهو تنزيل تافه حتى على الاتصالات المتواضعة.
كيف تتناسب DivMagic مع سير عمل CSS القائم على الأداء أولاً
أحد أكثر الجوانب استهلاكًا للوقت في البناء باستخدام CSS هو إعادة إنشاء مكونات واجهة المستخدم من المواقع التي تعجبك. ترى زرًا جميلاً أو شريط تنقل مصممًا جيدًا أو تخطيط بطاقة معقد، وتقضي ساعات في الهندسة العكسية لـ CSS لتكراره.
هذه العملية لها تكلفة خفية: CSS الذي تكتبه أثناء الهندسة العكسية غالبًا ما يكون أقل كفاءة من الأصل. تقوم بتضمين قواعد زائدة، وتفوت التتالي الذكي للأصل، أو تفرط في تحديد محدداتك محاولاً مطابقة النتيجة المرئية. النتيجة هي CSS منتفخ يقوض مكاسب الأداء التي تحاول تحقيقها.
هنا يغير DivMagic سير العمل. بدلاً من إعادة بناء CSS يدويًا، يتيح لك DivMagic نسخ عنصر واجهة المستخدم الدقيق، مع CSS الخاص به، مباشرة من أي موقع ويب. المخرجات هي CSS الحقيقي من الدرجة الإنتاجية الذي يستخدمه الموقع الأصلي، وليس تقريبًا.
"توقف عن الهندسة العكسية لواجهة المستخدم. انسخ CSS الدقيق من أي موقع ويب وشحن أنماط من الدرجة الإنتاجية في ثوانٍ، وليس ساعات."
الفائدة من الأداء ذات شقين: تقضي وقتًا أقل في كتابة CSS، وCSS الذي تشحنه أنظف وأكثر كفاءة لأنه ورقة الأنماط الأصلية المحسنة، وليس تقريبًا مكتوبًا يدويًا.
من النسخ إلى القابل للتخزين المؤقت: سير عمل عملي
إليك سير عمل عملي يجمع بين DivMagic واستراتيجية GitHub "شحن المزيد من CSS":
الخطوة 1: استخدم DivMagic لنسخ مكونات واجهة المستخدم من المواقع المرجعية. استخرج HTML و CSS الدقيقين لكل عنصر تحتاجه.
الخطوة 2: قم بتجميع الأنماط المنسوخة في ورقة أنماط واحدة متماسكة. نظمها بشكل منطقي، وحل أي تعارضات، وتأكد من اتفاقيات تسمية متسقة.
الخطوة 3: قم بتنقية القواعد غير المستخدمة باستخدام PurgeCSS أو الأدوات المضمنة في إطار العمل الخاص بك. قم بإزالة أي شيء لا يُستخدم بنشاط في مشروعك.
الخطوة 4: قم بتقديم CSS المجمع كملف واحد مع رؤوس تخزين مؤقت قوية (Cache-Control: public, max-age=31536000, immutable للملفات ذات الإصدارات).
الخطوة 5: قم بالنشر خلف CDN يدعم HTTP/2 وضغط Brotli.
يحقق سير العمل هذا أفضل ما في العالمين: تقوم بشحن CSS بجودة إنتاجية لم تضطر لكتابته من الصفر، وتقوم بتسليمه باستخدام استراتيجية التخزين المؤقت التي تثبت بيانات GitHub أنها الأسرع للزيارات المتكررة.
قياس التأثير في مشاريعك الخاصة
الطريقة الوحيدة لمعرفة ما إذا كان نهج GitHub يعمل لمشروعك المحدد هي قياسه. لحسن الحظ، الأدوات اللازمة لذلك متاحة على نطاق واسع وسهلة التنفيذ.
مراقبة المستخدم الحقيقي (RUM)
أدوات مثل Google Analytics و Sentry Performance و New Relic Browser توفر بيانات المستخدم الحقيقي حول مؤشرات أداء الويب الأساسية. تتبع FCP و TTI و CLS لكل من الزوار الجدد والمتكررين. مقاييس الزوار المتكررين هي حيث سترى الفرق الأكثر دراماتيكية من استراتيجية CSS المخزنة مؤقتًا.
الاختبار الاصطناعي
توفر أدوات مثل Lighthouse و WebPageTest وما شابهها قياسات محكومة وقابلة للتكرار. بينما لا تلتقط سلوك التخزين المؤقت للزيارات المتكررة، إلا أنها مفيدة لتحديد الاختناقات الواضحة والتحقق من أن استراتيجية تسليم CSS الخاصة بك تعمل كما هو مقصود.
اختبار A/B لاستراتيجيات تسليم CSS
النهج الأكثر صرامة هو اختبار A/B لاستراتيجيات تسليم CSS المختلفة. قدم لنصف مستخدميك نهج CSS الحرج المضمن التقليدي وللنصف الآخر ملفًا واحدًا مخزنًا مؤقتًا، ثم قارن مقاييس RUM. هذا يزيل التخمين ويمنحك بيانات خاصة بقاعدة مستخدميك.
مستقبل أداء CSS
نتائج GitHub هي جزء من تحول أوسع في كيفية تفكير مجتمع الواجهة الأمامية في الأداء. عصر تحسين البايتات الدقيق يفسح المجال لرؤية أكثر شمولية تعطي الأولوية للتخزين المؤقت، وعدد الطلبات، وتجربة المستخدم الكلية عبر زيارات متعددة.
هناك عدة اتجاهات تدعم هذا التطور:
- HTTP/3 و QUIC: الجيل التالي من بروتوكولات HTTP يقلل بشكل أكبر من الحمل الزائد للطلبات الفردية، مما يجعل استراتيجية "طلبات أقل وأكبر" أكثر ملاءمة
- تحسين التخزين المؤقت للمتصفح: أصبحت المتصفحات أكثر تطورًا في سلوك التخزين المؤقت، مما يجعل استراتيجيات التخزين المؤقت أولاً أكثر موثوقية
- شيوع CDN: أصبحت شبكات توصيل المحتوى بنية تحتية قياسية، مما يجعل الأصول المخزنة مؤقتًا على الحافة أسرع بشكل كبير في التقديم
- تطور CSS-in-JS: أطر العمل مثل styled-components و Emotion تتجه نحو الاستخراج الثابت، مما يزيل الحدود بين تحسين CSS و JavaScript
الخلاصة: الطريق غير البديهي إلى CSS أسرع
اكتشاف GitHub "شحن المزيد من CSS" هو تذكير بأن تحسين الأداء نادرًا ما يكون مباشرًا كما يبدو. الحكمة التقليدية، تضمين CSS الحرج، تقسيم أوراق الأنماط الخاصة بك، تقليل كل بايت، ظهرت في عصر قيود مختلفة ومتصفحات مختلفة. في الويب الحديث، مع HTTP/2، والتخزين المؤقت المتقدم، وشبكات CDN المنتشرة في كل مكان، تغيرت المعادلة.
الخلاصة الرئيسية ليست أنه يجب عليك شحن CSS منتفخ. بل أن استراتيجية تسليم CSS أهم من حجم ملف CSS. ورقة أنماط واحدة، منظمة جيدًا، قابلة للتخزين المؤقت، حتى لو كانت أكبر من الحد الأدنى النظري، يمكن أن تقدم تجربة مستخدم أفضل من نظام شديد التحسين يعيد إرسال الأنماط المضمنة في كل طلب.
بالنسبة لمطوري الواجهة الأمامية، الآثار محررة: بسط تسليم CSS الخاص بك، ركز على التخزين المؤقت، أعط أولوية لأداء الزيارات المتكررة، وأنفق ميزانية التحسين الخاصة بك حيثما يهم حقًا. وعندما يتعلق الأمر ببناء CSS نفسه، أدوات مثل DivMagic تلغي ساعات الهندسة العكسية اليدوية التي غالبًا ما تسبب الانتفاخ في المقام الأول.
شحن المزيد من CSS. فقط اشحنه بذكاء.
