[ بلوجر] طريقة التخلص من عناصر جافا سكريبت وCSS التي تحظر عرض المحتوى في الجزء العلوي

عناصر جافا سكريبت وCSS التي تحظر عرض المحتوى في الجزء العلوي
عند قياس سرعة مدونة بلوجر على أداة فحص سرعة المواقع Pagespeed Insight المقدمه من جوجل نجد أحد إقتراحات التحسين التي تقدمها لنا الأداة هي:
التخلص من عناصر جافا سكريبت وCSS التي تحظر عرض المحتوى في الجزء العلوي
فهي أحد المشاكل التي تتسبب في تقليل سرعة المدونة ولذلك ينبغي التخلص من تلك العناصر حتي يتم تسريع مدونة بلوجر ولا نفقد الزوار بسبب ذلك الخطأ.
إقرأ أيضا:

ما هي مشكلة عناصر جافا سكريبت وCSS التي تحظر عرض المحتوى في الجزء العلوي

عندما يتم طلب رابط url لصفحة ما بواسطة المتصفح يبدأ المتصفح في قراءة أكواد الصفحه سطرا تلو الأخر من الأعلى إلى الأسفل.
بالنسبة لأكواد HTML, CSS, JavaScript  الأساسية التي تم من خلالها برمجة الصفحة يقوم المتصفح بقرائتها بسهولة وفي وقت قليل ولكن المشكله تكمن في بعض عناصر جافا سكريبت وCSS والتي تكون مستضافه لدى موارد خارجية وتكون موجوده في الجزء العلوي من الصفحه.

عناصر جافا سكريبت وCSS المستضافه لدى خوادم خارجيه

يستغرق المتصفح الكثير من الوقت لقراءة تلك الملفات مقارنة بالأكواد العادية المستضافه على خادم الصفحة الأساسي حيث أنه يضطر لطلب url للملف ثم يدخل إليه ثم يبدء في قراءته وعرضه فهو يأخد أضعاف الوقت الذي يستغرقه لقراءة أكواد الصفحة العاديه، ولهذا فعناصر جافا سكريبت وCSS المستضافه لدى خوادم خارجيه تتسبب في بطىء الصفحه ويفضل أن يتم التخلص من تلك الملفات أو تحسينها .
إقرأ أيضا:

العناصر التي تحظر عرض المحتوى في الجزء العلوي

وكما ذكرنا فتلك الملفات تستغرق كثير من الوقت عندما يقوم المتصفح بقرائتها ولكن تلك ليست المشكلة الوحيده بل هناك المشكلة الأكبر وهو مكان وجود تلك الملفات الثقيله وهو الجزء العلوي من الصفحة وكما ذكرنا أيضا فالمتصفح يقرأ الأكواد سطرا تلو الأخر وبالتالي فتلك الملفات تقف عائقا أمام المتصفح عن قراءة باقي الأكواد الهامه التي يحتاج لقرائتها من أجل عرض المحتوى الاهم في الصفحة
مثال توضيحي:
عند وجود عنصر CSS خارجي خاص بأيقونات Fontawesome للمدونه تم وضعه في السطر الخامس من أكواد القالب ثم وضع الكود الخاص بعرض المحتوى النصي للصفحة في السطر السابع فعند طلب الزائر للصفحة سيضطر المتصفح لقراءة عنصر CSS الخاص بخط الأيقونات أولا وعرضه ثم يقرأ الكود الخاص بعرض المحتوى وعرضه ثانيا.
النتيجة: أن الزائر عند طلبه لصفحه معينه ستظهر له الأيقونات أولا والتي لن يكون مهتما لها على الإطلاق ثم يظهر له المحتوى النصي ثانيا وهو الأهم لديه وربما تأخذ الصفحه وقتا كبيرا في التحميل حتى ظهور المحتوى وبالتالى يمل الزائر ويغلق الصفحه ولا يعود مرة أخرى.

طريقة التخلص من عناصر جافا سكريبت وCSS التي تحظر عرض المحتوى في الجزء العلوي

لحل المشكله بشكل جذري هناك إجرائين:

الإجراء الأول: تحسين عناصر جافا سكريبت و CSS أو حذفها

حيث يجب تحسين تلك العناصر والتي تبدو غالبا بذلك الشكل
<link href='//csselemnt.css' rel='stylesheet'/>
حيث أن csselemnt.css// هو رابط العنصر الخارجي لملف CSS
أو
<script src='https://jselement.js' type='text/javascript'/>
حيث أن https://jselement.js هو رابط العنصر الخارجي لملف جافا سكريبت
فكما نرى هي عناصر إمتدادها css.  و js. ولرؤية الأكواد الموجوده في هذه العناصر يجب طلب الرابط على المتصفح.
في حالة كان الملف صغير الحجم يمكن نسخ مابداخله وتضمينه داخل أكواد html للقالب ولقد قمت بشرح ذلك بشكل تفصيلي في موضوعين سابقين، إقرأ:
رفع سرعة مدونة بلوجر من خلال تحسين ملفات CSS
تسريع مدونة بلوجر من خلال تحسين أكواد و ملفات JavaScript
وفي حالة كان الملف كبير الحجم يجب إما:
  • تنزيله وضغطه ثم إعادة رفعه مرة أخرى على أحد مواقع إستضافة الملفات.  
  • أو حذفه من القالب نهائيا.

الإجراء الثاني: ترتيب أولوية المحتوى المرئي

كما ذكرنا فالملفات الصغيره سيتم تضمينها داخل القالب والكبيره فيتم ضغطها وإعادة رفعها  أو حذفها نهائيا، ولكن ماذا لو كان الملف مضغوطا بالفعل ولا زال كبيرا ولا يمكن حذفه لأنه من العناصر الأساسية للقالب؟!، هنا يأتي دور ترتيب أولوية المحتوى المرئي وذلك من خلال تأخير تحميل ذلك العنصر وجعله في أسفل الصفحة بدلا من أعلى الصفحة فلا يقوم المتصفح بقرائته إلا بعد أن يقوم بقراءة الأكواد الأساسية أولا

ننصحك بقراءة: تسريع مدونات بلوجر حتى 99% للجوال وسطح المكتب لتصدر محركات البحث في خطوات بسيطة

تأخير عرض عناصر CSS التي تحظر عرض المحتوى في الجزء العلوي 

وذلك من خلال نقل كود العنصر من اعلى الصفحه ووضعه فوق الوسم <body/> وتلك الطريقه تصلح مع عناصر CSS فقط.
إقرأ: رفع سرعة مدونة بلوجر من خلال تحسين ملفات CSS

تأخير عرض عناصر JavaScript التي تحظر عرض المحتوى في الجزء العلوي

ويكون ذلك من خلال إضافة وسم 'async='async إلى كود عنصر جافا سكريبت ليصبح شكله النهائي هكذا
<script async='async' src='https://jselement.js' type='text/javascript'/>
تابع الجزء التالي من الشرح

جديد قسم : PageSpeed Insights

إرسال تعليق

اعلان خاصية تقسيم المواضيع
اعلان اول الموضوع
اعلان اخر الموضوع
اعلان فوق مقالات ذات صله
اعلان بعد الفقرة الاولي