شحن المزيد من CSS يمكنه فعلاً تحسين الأداء: اكتشاف GitHub غير البديهي
شحن المزيد من CSS يمكنه فعلاً تحسين الأداء: اكتشاف GitHub غير البديهي
عندما شرع مهندسو GitHub في تحسين أكبر رسم محتوى (LCP) في موقعهم، عثروا على نتيجة تقلب الحكمة التقليدية للواجهات الأمامية رأسًا على عقب: زيادة كمية CSS التي تقدمها يمكن أن تجعل موقعك أسرع. في مقال تفصيلي على مدونة GitHub، شرح الفريق كيف حسّنوا أداء الصفحة من خلال تضمين CSS الحرجة داخل الصفحة (inlining) وشحن أنماط إضافية مقدمًا، بدلاً من تأجيلها. هذا المقال يفكك منهجهم، والأساس المنطقي وراء "المزيد من CSS، وانتظار أقل"، وما يعنيه ذلك لاستراتيجيات أداء الويب الحديثة. سنستكشف أيضًا كيف يمكن لأدوات مثل DivMagic أن تتيح لك دراسة واستنساخ هذا النوع من تحسينات الواجهة والأنماط في ثوانٍ، دون تخمين.
مفارقة الأداء: كيف يمكن أن يكون تقليل CSS أكثر تكلفةً
تاريخيًا، حثّت أدلة الإرشادات الخاصة بالأداء على تقليل حجم CSS: ضغط الملفات، وإزالة الأنماط غير المستخدمة، وتقسيم الحزم، والتحميل غير المتزامن. المنطق سليم، فعدد البايتات الأقل يعني تنزيلًا أسرع. لكن تحليل GitHub كشف عن تكلفة خفية: سلوك حجب العرض وانزياحات التخطيط الناتجة عن تأخر تحميل CSS. عندما لا تتوفر الأنماط الحرجة فورًا، يرسم المتصفح تخطيطات غير مكتملة، ثم يعيد الرسم بمجرد وصول الأنماط. هذا التأخير يدفع LCP إلى الخارج ويخلق تجربة مستخدم مزعجة.
من خلال تضمين المزيد من CSS مباشرةً في <head>، أزال GitHub الرحلة الشبكية للأنماط الأساسية اللازمة لأول محتوى مرئي. زاد إجمالي حمولة CSS، لكن المسار الحرج انكمش بشكل كبير. انخفض LCP من 10.2 ثانية إلى 3.4 ثانية في التحسينات التي قاسوها، وهذا تغيير جذري لتحسين محركات البحث ورضا المستخدمين.
تفكيك منهج GitHub: المزيد من CSS، وبشكل أبكر
تستعرض مقالة مدونة GitHub سلسلة من التجارب. المحاولات المبكرة قسمت CSS إلى حرجة (مضمّنة) وغير حرجة (تُحمَّل بشكل غير متزامن). أظهرت القياسات أن التحميل غير المتزامن ما زال يُحدث وميضًا مرئيًا للمحتوى غير المنسق وأجبر المتصفح على إعادة حساب الأنماط والتخطيط بمجرد وصول CSS الكامل. ثم دفع الفريق المزيد من CSS إلى الكتلة المضمّنة، مما يعني شحن حمولة أولية أكبر من CSS، ولاحظوا أن المتصفح تمكن من عرض التخطيط النهائي في مسار واحد. بينما زاد حجم التنزيل، تحسنت مقاييس الرسم الأول (First Paint) وأول رسم محتوى (FCP) وLCP جميعها.
قياس التأثير الفعلي على أرض الواقع
أفاد GitHub بالمقاييس التالية لصفحة تمثيلية بعد شحن المزيد من CSS:
| Metric | Before (async CSS) | After (inline all) | Improvement |
|---|---|---|---|
| LCP | 10.2s | 3.4s | 67% faster |
| First Contentful Paint | 5.1s | 1.8s | 65% faster |
| CSS payload | 12 KB | 35 KB | 3x larger |
لاحظ أن حمولة CSS تضاعفت ثلاث مرات، ومع ذلك تحسنت توقيتات الرسم الرئيسية بأكثر من 60%. الخلاصة: النطاق الترددي رخيص؛ وإعادة حسابات التخطيط مكلفة.
"أفضل CSS هي التي يمتلكها المتصفح فور بدء رسم الصفحة، حتى لو كان ذلك يعني إرسال المزيد منها."
لماذا يتفوق تضمين CSS على أوراق الأنماط المنفصلة، حتى للأنماط "غير الحرجة"
لفهم نجاح GitHub، نحتاج إلى تحليل ما يحدث عند جلب ورقة أنماط بشكل غير متزامن:
- يبدأ المتصفح العرض دون سياق أنماط كامل، معتمدًا غالبًا على CSS الافتراضي.
- بمجرد انتهاء تنزيل CSS غير المتزامن، يُعاد بناء نموذج كائن CSS (CSSOM).
- ثم يعيد المتصفح حساب التخطيط ويعيد رسم الصفحة بالكامل، مما قد يزيح العناصر.
- هذا الانزياح يؤدي إلى تمريرات تخطيط إضافية للموارد التابعة (الصور، الخطوط).
- العملية برمتها تؤخر اللحظة التي يستقر فيها أكبر عنصر مرئي أخيرًا، مما يدفع LCP إلى أبعد من ذلك.
من خلال تضمين مجموعة سخية من الأنماط، يضمن GitHub أن الرسم الأول للمتصفح يتضمن بالفعل التخطيط النهائي في 90% من الحالات. الكيلوبايتات الإضافية، التي تبلغ بضع عشرات من الكيلوبايتات فقط حتى بعد النمو، لا تُذكر على اتصالات الإنترنت الحديثة. في المقابل، يمكن أن يكلف اضطراب التخطيط الناتج عن CSS غير المتزامن مئات المللي ثانية.
متى يصبح "المزيد من CSS" أكثر من اللازم؟
لم يضمّن GitHub نظام التصميم الكامل الخاص بهم بحجم 200 كيلوبايت. لقد اختاروا بعناية الأنماط التي تؤثر على محتوى الجزء المرئي من الصفحة (above-the-fold) بالإضافة إلى أي مكونات قد تسبب انزياحات في التخطيط إذا تم تنسيقها متأخرًا. باستخدام تحليل التغطية في Chrome DevTools، حددوا قواعد CSS المستخدمة خلال الثانيتين الأوليين وأعطوها الأولوية. النتيجة هي حل وسط عملي: ما يكفي من CSS المضمّنة للقضاء على إعادة التدفق، ولكن ليس كثيرًا لدرجة تضخم مستند HTML بشكل غير معقول.
استخراج CSS الحرجة: الأدوات التقليدية مقابل DivMagic
يعتمد المطورون عادةً على أدوات مثل Critical أو purifycss أو الاستخراج اليدوي لعزل أنماط الجزء المرئي من الصفحة. تتطلب هذه المنهجيات إعدادًا دقيقًا وتكاملًا مع خط البناء وصيانة متكررة مع تطور واجهات المستخدم. DivMagic يغير قواعد اللعبة: فهو يلتقط CSS المحسوبة للعناصر المحددة التي تشير إليها بالضبط، مباشرة من الصفحة المعروضة. هذا يعني أنه يمكنك انتقاء الأنماط الدقيقة التي يستخدمها GitHub أو أي موقع مرجعي لأقسام البطل الحساسة للأداء، والتنقل، والبطاقات، والمزيد.
دليل بياني: تطور LCP عبر التجارب
بيانات GitHub الخاصة مذهلة. الرسم البياني أدناه يوضح كيف انخفض LCP مع انتقالهم من CSS المؤجل بالكامل إلى استراتيجية تضمين عدوانية. كل خطوة أضافت المزيد من CSS إلى الحمولة الأولية.
التقدم واضح: كل شريحة إضافية من CSS المضمّنة خفضت LCP حتى تم الوصول إلى مرحلة الاستقرار، وبعدها قدم المزيد من التضمين عوائد متناقصة. تلك النقطة المثالية هي بالضبط ما يجب أن يهدف إليه كل فريق، ليس تضمين كل شيء بشكل أعمى، بل تضمين الأنماط الأكثر أهمية بشكل منهجي.
ماذا يعني هذا لعصر "الهاتف المحمول أولاً" ومقاييس الويب الأساسية (Core Web Vitals)
تؤكد مقاييس الويب الأساسية من Google على LCP وFID (تأخير الإدخال الأول) وCLS (انزياح التخطيط التراكمي). تقنية GitHub تهاجم LCP وCLS معًا في وقت واحد: المزيد من CSS مقدمًا يعني عرضًا أبكر لأكبر عنصر وانزياحات تخطيط أقل لاحقًا. للتجارة الإلكترونية والأخبار ومواقع التوثيق، يمكن أن يكون هذا هو الفرق بين اجتياز درجة CWV أو رسوبها.
بشكل حاسم، لا تتطلب هذه الطريقة إعادة كتابة كاملة. قام فريق GitHub بتطبيق تغييرات تدريجية على بنيتهم الحالية المقدمة من الخادم. يمكنك البدء بتدقيق عنصر LCP الحالي لديك ودمج الأنماط التي تؤثر عليه مباشرة. يساعدك DivMagic في جمع تلك الأنماط الدقيقة وتبعياتها بسرعة من صفحة إنتاج حية، لذا يمكنك بناء نموذج أولي لكتلة مضمنة في غضون دقائق.
طيف المفاضلة: الحجم مقابل السرعة
لا توجد إجابة واحدة تناسب الجميع؛ المقدار الأمثل من CSS المضمن يعتمد على ظروف شبكة المستخدمين وتعقيد تخطيطك. يوضح الرسم البياني أدناه علاقة مفاهيمية: كلما أضفت المزيد من CSS إلى التنزيل الأولي، يزداد حجم التنزيل ولكن يصبح العرض أسرع وأكثر استقرارًا، حتى نقطة معينة.
الهدف هو ركوب المنحدر الهابط لجدول العرض دون تضخيم حجم HTML دون داع. تشير مدونة هندسة GitHub إلى مراقبة حمولة المستند بعناية وتحديد ميزانية، بالنسبة لهم، كان 30-40 كيلوبايت من CSS المضمن هو الرقم الصحيح. قد تختلف ميزانيتك، لكن الطريقة عالمية.
خطوات عملية لتكرار نجاح GitHub
- حدد عنصر LCP الخاص بك. استخدم Lighthouse أو WebPageTest لمعرفة عنصر DOM الذي يساهم في درجة LCP الخاصة بك.
- استخرج سلسلة الأنماط الكاملة الخاصة به. افتح DivMagic على صفحتك، وحدد عنصر LCP، وانسخ CSS الكامل، بما في ذلك الأنماط الموروثة والخصائص المخصصة. يمنحك هذا مجموعة بداية قوية.
- قم بتضمين تلك الأنماط في
<head>. اختبر محليًا أو في بيئة اختبار مع حقن CSS الحرج مباشرة قبل أي مراجع لورقة أنماط خارجية. - قم بقياس توقيتات الرسم. قارن LCP و FCP و CLS قبل وبعد. قم بتوسيع الكتلة المضمنة تدريجيًا لتغطية المزيد من المكونات فوق الطية حتى تتوقف التحسينات.
- أتمتة للصفحات الديناميكية. استخدم منطق الخادم لحقن CSS المضمن حسب نوع الصفحة، مستفيدًا من الأنماط التي اكتشفتها باستخدام DivMagic.
دور HTTP/2 والبروتوكولات الحديثة
قد يجادل البعض بأن تعدد الإرسال في HTTP/2 يجب أن يجعل تحميل العديد من الملفات الصغيرة رخيصًا، مما يقلل الحاجة إلى التضمين. بينما هذا صحيح، تظل طبيعة CSS المعيقة للعرض قائمة: حتى إذا تم إرسال طلب ورقة الأنماط بالتوازي، لا يزال يتعين على المتصفح انتظار تنزيلها وتحليلها وبناء CSSOM قبل إجراء أي رسم يعتمد عليها. يتجاوز التضمين دورة حياة طلب الشبكة بالكامل، مما يوفر ميلي ثانية حاسمة، خاصة على اتصالات المحمول عالية الكمون.
كيف يعزز DivMagic سير عمل CSS الحرج لديك
DivMagic هو إضافة متصفح تتيح لك النقر على أي عنصر واجهة مستخدم ونسخ CSS الدقيق الخاص به على الفور. بالنسبة للمطورين المهتمين بالأداء، هذا يعني:
- رؤية الأنماط التي يستخدمها موقع عالي الأداء مثل GitHub لعنصر LCP الخاص به بالضبط.
- تحويل تلك الأنماط إلى مقتطفات كود قابلة لإعادة الاستخدام دون فتح أدوات المطور.
- تصدير CSS كـ Tailwind أو وحدات CSS أو CSS عادي، جاهز للتضمين.
- التكرار بشكل أسرع: يمكنك دراسة مواقع مرجعية متعددة ومزج أفضل أنماطها.
لأن DivMagic ينسخ الأنماط المحسوبة ، لا تحتاج إلى تتبع ملف ورقة الأنماط الذي توجد فيه القاعدة أو القلق بشأن سلاسل الوراثة. الناتج هو بالضبط ما يطبقه المتصفح، مثالي لبناء كتلة مضمنة تطابق التخطيط النهائي.
الخلاصة: انسى لتتعلم أداء الويب من جديد
تذكرنا تجربة GitHub بأن الأداء لا يتعلق بتقليل الأصول بشكل عقائدي، بل بتحسين إدراك المستخدم للسرعة. شحن المزيد من CSS، عندما يتم بعناية، يزيل إعادة التدفق المكلفة ويوفر صفحة مكتملة بصريًا في وقت أقرب. في المرة القادمة التي يقال لك فيها "قلل حجم CSS"، اسأل بدلاً من ذلك: "أي CSS يجب أن يكون لدى المتصفح من أول بايت؟"
"الأداء لا يتعلق بتقديم أقل، بل يتعلق بتقديم الأشياء الصحيحة في الوقت المناسب."
مع DivMagic، يصبح التقاط "CSS الصحيح" عملية تافهة، مما يحررك للتركيز على ما يحرك الإبرة فعليًا: رسومات أسرع، مستخدمين أسعد، ونتائج أفضل لـ Core Web Vitals.
