ما المقصود بـالموارد المعطِّلة للعرض (Render-blocking)؟

الموارد المعطِّلة للعرض (Render-blocking resources) ملفات يجب على المتصفح جلبها ومعالجتها قبل أن يتمكن من رسم أي شيء على الشاشة. وفي أثناء تحميلها يحدّق الزائر في صفحة فارغة — مع أن HTML قد وصل بالفعل.

ما الموارد التي تعطّل العرض

• أوراق الأنماط (Stylesheets) المرتبطة في الـ head. افتراضيًا لا يرسم المتصفح قبل أن يحصل على CSS، تجنبًا لعرض محتوى بلا تنسيق.
• السكربتات الكلاسيكية التي لا تحمل async ولا defer ولا type="module". وهذه تعطّل محلّل HTML نفسه: يتوقف المتصفح عن بناء الصفحة، وينزّل السكربت، وينفّذه، ثم يواصل.
• خطوط الويب، بشكل غير مباشر. فالنص المنسّق بخط لم يُحمَّل بعد قد يبقى غير مرئي حتى ثلاث ثوانٍ في معظم المتصفحات.

كل ملف معطِّل يضيف رحلة شبكة واحدة على الأقل قبل أول رسم، والرحلات في شبكات الجوال مكلفة. ويتغذى هذا التأخير مباشرةً في أكبر عنصر محتوى مرئي (LCP).

قبل وبعد

<!-- قبل: كل شيء يعطّل العرض -->
<link rel="stylesheet" href="/css/all.css">
<script src="/js/slider.js"></script>
<script src="https://tags.example/analytics.js"></script>

<!-- بعد -->
<style>/* CSS الحرج لما يظهر أعلى الصفحة، بضعة كيلوبايتات */</style>
<link rel="stylesheet" href="/css/all.css" media="print" onload="this.media='all'">
<script src="/js/slider.js" defer></script>
<script src="https://tags.example/analytics.js" async></script>

ما الذي تغيّر:

• يُنزّل defer السكربت بالتوازي وينفّذه بعد التحليل، بحسب ترتيب المستند — وهو الخيار الافتراضي الآمن لسكربتاتك (MDN: عنصر script).
• يشغّل async السكربت فور وصوله، بلا ترتيب معين — وهو مناسب لوسوم الأطراف الثالثة المستقلة.
• تضمين CSS الحرج داخل الصفحة (inline) يتيح رسم الشاشة الأولى فورًا. وورقة الأنماط التي لا يطابق media فيها الشاشة، مثل print، تُنزَّل دون تعطيل؛ ثم يطبقها تبديل onload على الشاشة.

أخطاء شائعة

• تأجيل مكتبة يعتمد عليها كود مضمّن، فتظهر أخطاء مثل «jQuery is not defined».
• استخدام async لسكربتات تعتمد على بعضها. فترتيب التنفيذ غير مضمون.
• تأجيل كل CSS، ما يسبب وميض محتوى بلا تنسيق وتحولات في التخطيط. لا بد من شيء ينسّق الشاشة الأولى.
• خطوط الأطراف الثالثة بلا preconnect، فيضاف زمن DNS وTLS إلى المسار الحرج.
• صقل ملفاتك أنت بينما تعطّل لافتة موافقة أو سكربت اختبار A/B في الـ head كل شيء. بعض أدوات الاختبار تعطّل عمدًا لمنع الوميض؛ فزِن هذه الكلفة بصدق.

كيف ترتّب الأولويات

ابدأ بكل ما في <head> ولا تحتاجه الشاشة الأولى. وغالبًا ما تكون وسوم الأطراف الثالثة أسهل المكاسب: فكثير منها لا يحتاج إلى العمل قبل أن يرى الزائر أي شيء. ثم قلّص CSS الذي يبقى معطِّلًا — فالقواعد غير المستخدمة من قالب أو إطار شائعة — ليحمل المسار الحرج ما تحتاجه الشاشة الأولى فقط.

اعثر عليها في صفحتك

تسرد أداة اختبار سرعة الصفحة السكربتات وأوراق الأنماط المعطِّلة للعرض في صفحتك مع عدد السكربتات والأنماط ووزنها، فتعرف بالضبط أي وسوم تؤجّلها أو تضمّنها أو تزيلها. وللصورة الأكبر، راجع سرعة الصفحة.

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