CSS Academy · درس

CSS الحرج وحجب العرض

ضمّن CSS الحرج الظاهر قبل التمرير، وأجّل الأنماط غير الحرجة لإزالة حجب العرض.

CSS الحرج وحجب العرض درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

كيفية عرض المتصفح

يحلل المتصفح HTML إلى DOM، وCSS إلى CSSOM، ثم يدمجهما في شجرة العرض، وينفّذ التخطيط، ثم يرسم. وتحجب CSS العرض حتى اكتمال CSSOM، لذا تؤخر كل بايت من CSS في المسار الحرج الرسم الأول.

ما هي CSS الحرجة؟

CSS الحرجة هي الحد الأدنى من الأنماط اللازمة لعرض المحتوى الظاهر أعلى الصفحة. ويؤدي تضمينها داخل وسوم <style> في <head> إلى إلغاء طلب ورقة الأنماط الذي يحجب العرض في العرض الأولي.

الموارد التي تحجب العرض

يحجب أي <link rel="stylesheet"> في الرأس العرض. كما تحجب البرامج النصية التي لا تحتوي على async/defer تحليل HTML. ويؤدي تقليل الموارد التي تحجب العرض مباشرةً إلى تحسين Largest Contentful Paint (LCP) وFirst Contentful Paint (FCP).

استخراج CSS الحرجة

تعرض أدوات مثل critical (npm) وPenthouse ومستخرجات تعتمد على Puppeteer الصفحة عند أحجام محددة لإطار العرض، ثم تلتقط الأنماط المنطبقة على العناصر المرئية. يُضمَّن الناتج داخل الصفحة، بينما تُحمَّل ورقة الأنماط الكاملة بشكل غير متزامن.

تحميل CSS غير الحرجة بشكل غير متزامن

حمّل ورقة الأنماط الكاملة من دون حجب العرض باستخدام media="print" مع تبديل onload، أو باستخدام النمط rel="preload" + as="style" + onload="this.rel='stylesheet'".

  <pre class="snippet">&lt;link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'"&gt;
&lt;noscript&gt;&lt;link rel="stylesheet" href="styles.css"&gt;&lt;/noscript&gt;</pre>

استعلامات الوسائط كتلميحات للتحميل

تُنزّل ملفات CSS المحمّلة باستخدام استعلام وسائط غير مطابق، مثل media="print"، بأولوية منخفضة ولا تحجب العرض. وهذه هي الحيلة التقليدية لتحميل أوراق الأنماط من دون حجب المسار الحرج.

HTTP/2 وتقسيم CSS

مع تعدد الإرسال في HTTP/2، يكون تقسيم CSS إلى العديد من الملفات الصغيرة أقل كلفة إضافية مما هو عليه في HTTP/1. حمّل CSS اللازمة لكل مسار فقط، مثل home.css وcheckout.css، بدلًا من حزمة ضخمة واحدة تتضمن أنماط كل صفحة.

CSS وماسح التحميل المسبق

يكتشف ماسح التحميل المسبق في المتصفح وسوم <link> الخاصة بأوراق الأنماط مبكرًا، ويبدأ تنزيلها قبل وصول محلل HTML إليها. تأكد من وضع أوراق الأنماط داخل <head>، لا داخل body، حتى يكتشفها ماسح التحميل المسبق مبكرًا.

قياس تأثير حجب العرض

تعرض لوحة Network في Chrome DevTools وقت حجب الموارد ضمن المخطط الزمني. وتبلغ Lighthouse عن "إزالة الموارد التي تحجب العرض" مع بيان الوفورات لكل مورد. كما تعرض WebPageTest قيمة renderBlockingResources في طريقة عرض شريط اللقطات.

CSS الحرجة من جهة الخادم

تضمّن أطر مثل Next.js وAstro CSS الحرجة تلقائيًا أثناء SSR. يحدد الخادم الأنماط المنطبقة على HTML الأولي ويضمّنها، فلا حاجة إلى خطوة استخراج من جهة العميل.

المفاضلات العملية

يؤدي تضمين قدر كبير جدًا من CSS إلى زيادة حجم HTML، ما يبطئ TTFB ويقلل كفاءة التخزين المؤقت، إذ لا يُخزَّن HTML لمدة تضاهي مدة تخزين ملفات CSS. استهدف 14KB أو أقل من CSS الحرجة المضمّنة لتلائم نافذة الازدحام الأولى في TCP.

اختبار المعرفة

لماذا تؤخر ورقة الأنماط التي تحجب العرض ظهور First Contentful Paint؟

الملخص

تضمّن CSS الحرجة أنماط الجزء الظاهر أعلى الصفحة لإلغاء تأخيرات حجب العرض. حمّل CSS المتبقية بشكل غير متزامن باستخدام التحميل المسبق أو حيل استعلامات الوسائط. قِس التأثير باستخدام Lighthouse وDevTools، واستهدف حزمة CSS حرجة أقل من 14KB لتحقيق أفضل أداء.

الأسئلة الشائعة

هل درس «CSS الحرج وحجب العرض» مجاني؟

نعم — نص درس «CSS الحرج وحجب العرض» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «CSS الحرج وحجب العرض»؟

ضمّن CSS الحرج الظاهر قبل التمرير، وأجّل الأنماط غير الحرجة لإزالة حجب العرض. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «CSS الحرج وحجب العرض»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy