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

[ بلوجر] طريقة التخلص من عناصر جافا سكريبت و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
    وفي حالة كان الملف كبير الحجم يجب إما:
    • تنزيله وضغطه ثم إعادة رفعه مرة أخرى على أحد مواقع إستضافة الملفات.  
    • أو حذفه من القالب نهائيا.

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

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

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

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

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

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

    مقالات متعلقة

    إرسال تعليق