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

سينا ويب

سينا ويب عبارة عن موقع تأسس سنة 2018 ويضم عدد كبير من البرامج والتصاميم والدروس والفيديوهات بالإضافة إلى المقالات، نتطرق فيها إلى مختلف المواضيع التقنية القريبة من الشباب العربي وبصورة مبسطة من أجل دعم المطور والمصمم العربي.

في الختام نسعى دوماً جاهدين للتقدم والتطور وليس ما تراه هو حدودنا! ونحن نقدر كثيراً زوارنا وآراؤهم فإن كان لديك أي إقتراح/ نصيحة/ ومضة مفيدة/ نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا على الإيميل:
hussam.abidali@gmail.com

تابعنا على الفيسبوك

تابعنا على التويتر

تابعنا على يوتيوب

تابعنا على الانستقرام

الانضمام الى الويب

الجميع يحب موقع التحميل السريع في التصفح. لا أحد يحب صفحة الويب التي تستغرق وقتاً غير متوقع لتحميلها بالكامل. حتى 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>