كما تحدثنا سابقا عن كيفية ظهور صفحة الويب للمستخدم وما هي العمليات التي يقوم بها المتصفح لترجمة الملفات لبناء شجرة العرض في النهاية ، سنخوض في احدي تلك الخطوات و نتحدث عن اسباب منعها لظهور صفحة الويب.


دائما اذا قمت باختبار اداء وسرعة موقعك علي اى من المواقع المختصة يقابلك هذه الجملة وهي "Eliminate render-blocking JavaScript and CSS"

سنتحدث هنا عن اسباب منع ملفات CSS عن عرقلة ظهور شجرة والعرض وكيفية التغلب علي عرقلة شجرة العرض.

ما هي عرقلة شجرة العرض render-blocking CSS؟

عرقلة شجرة العرض تعني تأخر وحجب ظهور صفحة الويب للمستخدم ، كما نعلم ان المتصفح لايقوم بعرض الصفحة للمستخدم الا عند الانتهاء من بناء DOM + CSSOM وكما نعلم ان الـCSSOM هي خريطة وهيكل  ملفات الـCSS فان المتصفح لن يقوم بعرض الصفحة الا عند الأنتهاء من بناء الـCSSOM ، ولكن ما الذي يعرقل و يؤخر بناء الـCSSOM؟

ما الهدف من جعل ملفات الـCSS تمنع ظهور شجرة العرض؟

الهدف من جعل صفحة الويب لا تظهر للمستخدم الا عند اكتمال بناء الـDOM + CSSOM هو جعل الصفحة منظمة ويمكن التعامل معها من البداية.

كما نري في الصورة ان المستخدم سيجد صعوبة في التعامل مع الموقع لعدة ثواني حتي يتم تحميل ملف الـCSS  كما ان الشكل العام للموقع غير مُحبب، لذلك كان من المستحسن جعل صفحات الويب لا تظهر الا عند اكتمال تحميل ملفات الـCSS ليكون الموقع ذو فعالية وشكل جميل.

ما هي اسباب عرقلة ملفات CSS لبناء شبكة العرض؟ 

- عدد ملفات CSS المستخدمة.
- استدعاء الملفات عن طريق import@.
- عدم استخدام شروط لملفات الـCSS.

- ملفات CSS المستخدمة

ملفات CSS المستخدمة في الموقع تقوم بحجب و إعاقة ظهور الموقع و لكن كيف هذا؟

كثير من المواقع الأن تستخدم عدد كبير من ملفات CSS والتي تعمل علي إطالة المدة الزمنية لظهور الصفحة للمستخدم.

اذا لماذا كثرة استخدام ملفات CSS يُعيق ظهور الصفحة؟

كما نعلم ان كل ملف من هذه الملفات الخارجية بحاجة الي طلب استدعاء "Request" ليتم استدعائة لبناء الـCSSOM و كل استدعاء بحاجة الي وقت معين يختلف من ملف للاخر كل هذا يعمل علي إعاقة و إطالة المدة الزمنية لبناء الـCSSOM.


كيف يمكننا تجنب كثرة استخدام ملفات الـCSS؟ 

يمكننا التغلب علي هذه النقطة بعدة اساليب:
- تقليل عدد الملفات.
   .تجميع الملفات "Combine".
- تضمين ملف الـCSS في ملف الـHTML 

تقليل عدد الملفات:
يمكننا تقليل عدد ملفات الـCSS المستخدمة و ذلك عن طريق دمج عده ملفات CSS بداخل بعضهما 

الأن تم تقليل عدد ملفات CSS من 6 ملفات الي 3 يمكنك تقليلهم الي ملف واحد او اى عدد هذا يتوقف عليك ويتوقف علي حجم ملف الـCSS ولكن في النهاية تم تقليل عدد الطلبات المُرسلة الي خادم الملفات من 6 طلبات "Requests" الي 3 طلبات فقط.

وتذكر ان ملفات CSS أكثر تعني عدد طلبات أكثر ، و حجم ملف CSS أكبر يعني مدة تحميل الملف أطول.

تضمين ملف الـCSS في ملف الـHTML:

تضمين ملفات الـCSS بداخل ملف الـHTML يمكنك تنفيذها اذا كان ملف الـCSS الخاص بك صغير واذا كان ملف الـCSS كبير يمكنك تقسيم الملف الي جزئين:

- جزء الذي يظهر في بداية الموقع و تضمنه في ملف الـHTML.
- الجزء الباقي يمكنك دمجه في ملف CSS واحد كما ذكرنا في الخطوة السابقة.

- استدعاء الملفات عن طريق import@.

استدعاء الملفات عن طريق import@ من الاشياء المهمة التي تعمل علي تأخير بناء الـCSSOM وذلك لان استدعاء الملفات عن طريق import@ يضيف عمليات طلبات "Request" داخل ملف الـCSS هذا يعمل علي تأخير بناء الـCSSOM والأنتهاء منه.

بدلا من استدعاء الملفات عن طريق import@ استدعي الملف عن طريق 
<link rel="stylesheet" href ="path/"> أو يمكنك دمج ما بداخل الملف في ملف CSS اخر.

في هذه المقالة ستجد شرح كافي لـتجنب استدعاء الملفات عن طريق import@ و ما البديل المناسب والأفضل لأستدعاء الملفات.

- عدم استخدام شروط لملفات الـCSS.

يتاح لنا استخدام انواع الوسائط كـmedia لتحديد اى ملف CSS يجب ان يتم تحميلة عند توافق الشرط غير ذلك لن يلجأ المتصفح لتحميل الملف مما يؤدي الي عدم حظر واعاقة الملف لتحميل شجرة العرض ، يجب علينا الأهتمام بنوع الوسائط واستخدامها حتي نمنع اى إعاقة لشجرة العرض.

الان وقد عرفنا ما اهم أسباب إعاقة ملفات CSS  لشجرة العرض يجب علينا الأهتمام بجميع النقط السابقة و تنفيذها مع بعضِها للحصول علي اداء أفضل لموقعك.