لون الويب

أحدث المواضيع

حل مشكلة Eliminate Render-blocking resources من اجل تسريع مدونة بلوجر


الجميع يحب موقع التحميل السريع في التصفح. لا أحد يحب صفحة الويب التي تستغرق وقتاً غير متوقع لتحميلها بالكامل. حتى Google نفسها لا تعطي الأولوية لصفحة ويب بطيئة التحميل. قد تقلق أيضاً بشأن موقع الويب الخاص بك الذي يستغرق الكثير من الوقت للتحميل، غالباً ما يواجه المدونون الجدد هذه المشكلة. إذا كنت ستتحقق من موقع الويب الخاص بك في أداة Google PageSpeed، فسترى فرص عدة وأحد هذه الطرق تتمثل في "إزالة موارد الحظر" أو Eliminate Render-Blocking Resources

سأخبرك في هذه الدرس، كيفية حل هذه المشكلة لزيادة سرعة تحميل المدونة الخاص بك، وأيضاً ما هي موارد الحظر هذه وكيف يمكنك العثور عليها في مدونتك.

قبل المضي قدماً، تحقق أولاً من موقع الويب الخاص بك في أداة Google PageSpeed.

ما معنى Render-Blocking Resources:

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

فيما يلي بعض الطرق لحل المشكلة:

الطريقة الاولى:

وهي من أفضل الطرق للتخلص من حظر JavaScript عن طريق قص كود JavaScript من منطقة <Head> ولصقه أسفل وسم <Body>.

<html>
<head>
<title>your title</ title>
<---- قص الكود من هنا ---->
</head>
<body>
<---- لصق الكود الخاص بك هنا ---->
</body>
</html>

وللقيام بهذه الطريقة:
  • قم بتسجيل الدخول إلى حساب Blogger الخاص بك وإنتقل إلى لوحة تحكم Blogger.
  • إنقر فوق Theme أو المظهر، ثم من القائمة المنسدلة حدد تعديل HTML.

  • نقوم بنقل أكواد JavaScript الظاهرة ضمن الخطأ Render-Blocking Resources في أداة Google PageSpeed من منطقة <head> لصقها فوق الوسم </body>.

  • أخيراً اضغط على زر حفظ.

الطريقة الثانية:

  • قم بالدخول مرة اخرى الى صفحة تعديل HTML الخاصة بالمظهر.
  • أضف الكود
 b:css='false' 

بعد HTML. سيكون النص مشابهاً أو يبدو تقريباً مثل سطر الكود في الصورة أدناه:


  • أخيراً إضغط على زر حفظ.

الطريقة الثالثة:

وهذه الطريقة خاصة بكود CSS الخاص بملف Font-Awesome والذي يكون بالصيغة التالية:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

أو 

<link href=' https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

  • قم بالدخول مرة اخرى الى صفحة تعديل HTML الخاصة بالمظهر.
  • قم بقص الرابط الخاص بملف Font-Awesome وقم بلصقه في ملف Notepad.
  • قم بنسخ الكود في الأسفل ولصقه فوق وسم </head>.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("CSS link");
//]]>
</script>

  • إستبدل CSS link الموضح باللون الأحمر بالرابط الخاص بملف Font-Awesome من ملف Notepad.

  • أخيراً إضغط على زر حفظ.

وللمزيد من التفصيل يمكنكم متابعة الفيديو في الأسفل...


ليست هناك تعليقات:

إرسال تعليق

Adbox

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *