ملفات CSS وحجب شجرة العرض. - مقال كلاود
 إدعم  المنصة   
makalcloud
تسجيل الدخول

ملفات CSS وحجب شجرة العرض.

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

  نشر في 20 أكتوبر 2016  وآخر تعديل بتاريخ 03 نونبر 2016 .

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


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

 Eliminate render-blocking JavaScript and CSS google page speed


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


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

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


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

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

الفرق بين ظهور الصفحة بملفات الـCSS 

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


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

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


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

ملفات CSS

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

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

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

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


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

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


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

تقليل عدد ملفات CSS

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

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


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

inline css

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

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

Inline CSS files


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

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


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

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

using link rel="stylesheet"


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

  specify stylesheet

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



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



  • 1

   نشر في 20 أكتوبر 2016  وآخر تعديل بتاريخ 03 نونبر 2016 .

التعليقات


لطرح إستفساراتكم و إقتراحاتكم و متابعة الجديد ... !

مقالات شيقة ننصح بقراءتها !



مقالات مرتبطة بنفس القسم











عدم إظهارها مجدداً

منصة مقال كلاود هي المكان الأفضل لكتابة مقالات في مختلف المجالات بطريقة جديدة كليا و بالمجان.

 الإحصائيات

تخول منصة مقال كلاود للكاتب الحصول على جميع الإحصائيات المتعلقة بمقاله بالإضافة إلى مصادر الزيارات .

 الكتاب

تخول لك المنصة تنقيح أفكارك و تطويرأسلوبك من خلال مناقشة كتاباتك مع أفضل الكُتاب و تقييم مقالك.

 بيئة العمل

يمكنك كتابة مقالك من مختلف الأجهزة سواء المحمولة أو المكتبية من خلال محرر المنصة

   

مسجل

إذا كنت مسجل يمكنك الدخول من هنا

غير مسجل

يمكنك البدء بكتابة مقالك الأول

لتبق مطلعا على الجديد تابعنا