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

شارك مع اصدقائك:

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

تعد PageSpeed Insights أداة قوية مقدمة من جوجل تمكنك من تحديد المشاكل التي تبطئ من تحميل موقعك.
من المؤكد أنك استخدمت هذه الاداة من قبل (إذا لم تكن قد فعلت ذلك، فعليك التوجه إلى هناك (رابط PageSpeed Insights) قبل قراءة بقية هذا المقال). إنها اداة مجانية وتحدد المشكلات التي تؤدي إلى إبطاء تسليم مواقعك على الويب، مثل حظر جافا سكريبت و سي اس اس.

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

هناك عشرة قواعد للسرعة تُستخدم لتحليل المواقع من خلال PageSpeed Insights.
تتعلق اثنتان من هذه القواعد بمواد جافا سكريبت و سي اس اس التي تحظر محتوى الجزء المرئي من الصفحة.
فاذا فشلت أي من هاتين القاعدتين - والعديد من المواقع تفشل - وسترى رسالة "يجب إصلاحها" تتاتي كما يلي: التخلص من عناصر جافا سكريبت و سي اس اس التي تحظر عرض المحتوى في الجزء العلوي .

ما معنى حظر جافا سكريبت JavaScript و سي اس اس CSS لعرض المحتوى

قبل أن يتمكن المتصفح من عرض صفحة ويب معينة للمستخدم، يجب أن يحلل الصفحة. وإذا واجه المتصفح نصًا برمجيًا خارجيًا للحظر أثناء التحليل، يجب أن يتوقف وينزِّل النص البرمجي ( جافا سكريبت او سي اس اس). وفي كل مرة ينفذ ذلك، فإنه يضيف جولة ذهاب وإياب، مما يتسبب في تأخير العرض الأول للصفحة.

العرض الاول للصفحة: اذا كان موقعك يوفر خاصية التخزين المؤقت للبعض موارد الصفحة كالموارد التي تحظر المحتوى ففي هذه الحالة لن تتكرر مشكلة حظر المحتوى اما اذا لم يكن فانت في مشكلة ليس بكبيرة ان قراة هذا الموضوع: كيفية الاستفادة من متصفح التخزين المؤقت على بلوجر Exploit Browser Caching .

كيفية التخلص من حظر جافا سكريبت و السي اس اس للمحتوى

بعدم عرفنا ما هو حظر المحتوى و لماذا ان هذا الامر يعرقل تحميل الصفحة (كون ان المتصفح يقوم بجولة ذهاب و اياب اثناء تنزيله للنص البرمجي) الان ما هو الحل؟ كيف أتخلص من حظر جافا سكريبت و السي اس اس.

1- تحديد موارد الموقع التي تحضر عرض المحتوى

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

و هذا امر جيد! انت الذي عليك فتح تلك الملفات على متصفحك و تحديد حجمها بنظر الى كمية الاكواد في الملف هذه الخطوة تمهيدية لما هو آتي.

2- تضمين ملفات الجافا سكريبت و السي اس اس داخل اكواد القالب

بعد تحديدك لحجم الملف البرمجي الذي يحظر محتوى موقعك، اذا كان حجم الملف صغيرا يجب تضمينه داخل اكواد القالب (داخل الاتش تي ام ال)و هذا باتباع الخطوات التالية.

قم بنسخ اكواد الملف (بفتحه على متصفحك و عمل تحديد كلي للاكواد و نسخها)
قم بتضمين الاكواد التي نسختها داخل اكواد قالبك و هذا على حسب نوع الملف

# اذا كان نوع الاكواد جافا سكريبت JavaScript

# اذا كان نوع الاكواد سي اس اس CSS

جميع الاكواد التي تريد تضمينها داخل الاتش تي ام ال يجب ان تكون في الجزء العلوي للصفحة يعني فوق وسم </head> او اسفل وسم <head>.

3- تاجيل تحميل ملفات الجافا سكريبت و السي اس اس

اذا كان حجم الكود كبيرا يجب عدم تضمينه داخل اكواد الاتش تي ام ال HTML لان هذا سيزيد من بطئ الموقع.

اذا ما العمل اذا كان حجم الكود كبيرا؟ ببساطة يجب تاجيل تحميله و ها الامر يختلف فاكواد الجافا سكريبت توجد طريقة معتمدة لتاجيل تحميلها اما بالنسبة لاكواد السي اس اس فهناك طريقة فعالة ساريكم اياها .
طريقة تاجيل تحميل الاكواد مفهومها يعني انه حتى انتهاء تحميل محتوى صفحة الويب سيتم تحميل الملفات المؤجلة في الاخير.

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

لتاجيل تحميل كود جافا سكريبت الى نهاية تحميل كامل محتوى الصفحة اضف بعد رابط ملف كود جافا سكريبت الخارجي كلمة async ليظهر الكود هكذا.

على منصة بلوجر سيظهر لك خطا لهذا استبدل الكلمة بـ async='async' ليصبح الكود هكذا.

# تاجيل تحميل اكواد السي اس اس
لعلمك ان المتصفح يقرا اكواد صفحات الويب على التوالي (سطر بعد سطر يعالج الاكواد) مما يعني لنا ان اخر ما يتم تحميل الاكواد التي في نهاية وسم <body> و <footer>

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

خطا حظر جافا سكريبت و سي اس اس للمحتوى على PageSpeed insight

ننقل هذين الملفين الى الفوتر نضعهم فوق وسم </footer> هكذا.

بعد ذلك نرجع الى اداة PageSpeed Insights و نقيس سرعة المدونة سنجد ان الخطا تم حله نوعا ما و هذه النتيجة.

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

كما قلت هناك اشياء انا و انت لا يمكننا التحكم فيه فلو كانت الانترنت بطيئة لظن القارئ اننا نطرده من الموقع عمدا.

لا تقم ابدا بتاجيل ملف تحميل الخطا الرئيسي للمدونة.

كيفية التخلص من تقديم حظر السي اس اس CSS للهواتف BUNDLE.CSS

تقريبا انتهينا من حل جميع المشاكل المتعلقة بـحظر جافا سكريبت و السي اس اس للمحتوى و لكن بقي لنا شيء واحد كما تعلمون مشكلة حظر اكواد السي اس اس على الهواتف و التي تنبهك جوجل سبيد بالشكل الاتي:

https://www.blogger.com/...ets/2625229113-widget_css_bundle_rtl.css

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

<head>

</head>

<style type="text/css">
<!-- /*
<b:skin><![CDATA[*/

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