كيفية التخلص من موارد حظر العرض في Blogger
كلنا واجهتنا هذه المشكلة هى بطئ الموقع الذى يترتب عليه عدم ظهوره فى الصفحات الأولى وهى اهم شئ بالنسبة لصاحب الموقع , ومن الاشياء التى تبطئ سرعة الموقع هى ( موارد حظر العرض Render-Blocking Resources ) هنا سوف نتكلم عن كيفية التخلص من موارد حظر العرض في المدون.
الجميع يحب موقع التحميل السريع. لا أحد يحب صفحة الويب التي تستغرق وقتًا طويلا لتحميلها بالكامل. حتى Google نفسها لا تعطي الأولوية لصفحات الويب ذات التحميل البطيء. قد تقلق أيضًا بشأن موقع الويب الخاص بك الذي يستغرق الكثير من الوقت للتحميل. إذا كنت ستتحقق من موقع الويب الخاص بك في أداة سرعة صفحة Google ، فسترى فرصة تتمثل في "التخلص من موارد حظر العرض". سأخبرك في هذه المقالة ، كيف يمكنك التخلص من موارد حظر العرض هذه لزيادة سرعة تحميل المدون الخاص بك. سأخبرك أيضًا ما هي موارد حظر العرض هذه وكيف يمكنك العثور عليها في مدونتك ، وأيضًا ما هو تأثير هذه الموارد على سرعة تحميل موقع الويب الخاص بك.
قبل المضي قدمًا ، تحقق أولاً من سرعة موقع الويب الخاص بك في أداة سرعة صفحة Google.
انقر هنــــــــا للتحقق من موقع الويب الخاص بك.
ستظهر معك هذه النتائج ( موارد حجب العرض هى ما يشار اليها بالسهم )
ما هى موارد حجب العرض أو بشكل أقدق التحميل؟
Render-Blocking Resources هى الموارد التي تقلل من سرعة تحميل موقع الويب الخاص بك ، موارد حظر العرض باختصار ، العلامات التي تقلل من سرعة تحميل موقع الويب الخاص بك هي موارد تمنع العرض.
ما هي موارد منع العرض؟
أكثر موارد مسؤولية لحظر العرض هي JavaScript و CSS والتي تقع في منطقة <head> .
بحسب جوجل google
هناك ثلاثة أنواع من عناوين URL لحظر العرض.
- scripts
- stylesheets
- HTML imports
علامة <script> الموجودة في <head> للمستند و ليس له سمة مؤجلة defer . ولا يحتوي على سمة غير متزامن async .
مثال هذا tag :
<"link rel="stylesheet>
- ليس فيها سمة معطلة . وعند وجود هذه السمة ، لا يقوم المتصفح بتنزيل stylesheet.
- لا يحتوي على سمة وسائط تطابق جهاز المستخدم.
هذا tag :
<link rel="import">
لا يحتوي على سمة غير متزامن.
هناك سؤال يساله الكثير منا ........ هل الصور موارد تحجب العرض؟
لا ، لا تمثل الصور موارد تمنع العرض ولكن يوصى بعدم نسيان تحسين صورك لجعل مدونك مميزًا.
تعرف على مواردك التي تمنع العرض
لإصلاح موارد حظر العرض في المدون الخاص بك ، يجب أن تعرف ما هو نوع موارد حظر العرض. قد تكون JavaScript أو CSS. في كلتا الحالتين ، تحتاج إلى تطبيق طريقة مختلفة لإصلاح المشكلة.
كيف تعرف ، مصدر حظر العرض هو JAVASCRIPT أو CSS:
خطوات القيام بذلك هي كما يلي.
ما عليك سوى تحليل موقع الويب الخاص بك في أداة سرعة الصفحة والانتقال إلى فرصة "إزالة موارد حظر العرض". انسخ الرمز المميز في الصورة إلى الحافظة الخاصة بك وافتح ملف theme.xml الخاص بمدونتك في أي محرر HTML وابحث في الرمز الذي نسخته من أداة سرعة الصفحة.
كيفية التخلص من موارد حظر العرض في Blogger.
انسخ الرموز المميزة. يمكنك نسخ الروابط أيضا.
إذا احتوى المقتطف على أكواد مثل
<script , .js , .min.js , <type='text' , <type='javascript' وما إلى ذلك ، فهي عبارة عن اكواد JavaScript.
الكود التالى هو كود JavaScript.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
إذا كان المقتطف يحتوي على رموز مثل
<link , <.css , <media='xyz', rel='stylesheet'>
rel='import'> type='css'
مثل الكود التالي هو css.
<link href='http://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i'media='all' rel='stylesheet' type='text/css'/> rel = 'import'> type = 'css' وما إلى ذلك ، فهي عبارة عن ملف css.
كيفية التخلص من JAVASCRIPT لحظر العرض في المدونة:
نصيحة قبل عمل اى شئ خذ نسخة من القالب تجسبا لاى خطأ
بمجرد تحديد جافا سكريبت المهم ، حان الوقت الآن لإصلاحها. فيما يلي بعض الطرق لحل المشكلة.
وضع الجافا سكريبت أسفل الهد <body>:
من أفضل الممارسات للتخلص من حظر عرض JavaScript هو أنك تحتاج إلى وضع JavaScript الهام أسفل علامة <body> في المظهر الخاص بك. ما عليك سوى قص JavaScript المهم من الرأس ولصقه أسفل علامة <body>.
<html>
<head>
<title> العنوان </ title>
<---- قص الكود من هنا ---->
</head>
<body>
<---- لصق الكود هنا ---->
</body>
</html>
ماذا سيفعل هذا الأمر :
ستخبر هذه التعليمات المحلل اللغوي لـ html بتحميل JavaScript المهم بعد تحميل رأس صفحة الويب.
ولكن اذا لم تعرف من هو JavaScript المهم وكيفية نقلة , يمكن تنفيذ هذه الأمر
- أضف علامة تأجيل defer إلى جافا سكريبت .
</"script defer="defer" src="...file/code.js>
<script defer='defer' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
ماذا ستفعل أضافة علامة تأجيل defer إلى جافا سكريبت :
سيمنع البرنامج النصي من التحميل عند تحميل صفحة الويب بأكملها.
ASYNC لهم :
الحل الثاني : أضف علامة غير متزامنة async = "async" إلى JavaScript.
<script async = "async" src = "... file / code.js" />
<script async = 'async' src = 'https: //ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type = 'text / javascript' />
كيفية التخلص من CSS لحظر العرض:
أضف سمة الوسائط في link rel = "stylesheet"> TAG
مثال
<link href = "print.css" rel = "stylesheet" media = "print" />
الكود أعلاه يقول "هنا رابط CSS". وكذلك إخبار "CSS للطباعة فقط".
ما يجب فعله باستخدام <link rel = "stylesheet"> العلامة التي تحتوي على وسائل الإعلام لكنها لا تزال مصدرًا يحجب العرض:
قد تواجه احيانا مشكلة تتمثل في أن علامة <link rel = "stylesheet"> تحتوي على سمة وسائط ولكنها لا تزال تمثل موردًا يحظر العرض. لذلك في هذه الحالة ، تحتاج إلى إعطاء تعليمات محددة لسمة الوسائط. كما هو الحال في العلامة التالية ، لا تحتوي سمة الوسائط على تعليمات محددة.
مثال :
<link href = 'http: //fonts.googleapis.com/css؟ family = Roboto: 400،400i، 500،500i، 700،700i' media = 'all' rel = 'stylesheet' type = 'text / css' />
في هذه الحالة ، تحتاج إلى تحديد التعليمات الخاصة بسمة الوسائط. مثلما حددت سمة الوسائط مع قراءة التعليمات. انظر الآن الرمز المحدث.
<link href = 'http: //fonts.googleapis.com/css؟ family = Roboto: 400،400i، 500،500i، 700،700i' media = 'read' rel = 'stylesheet' type = 'text / css' />
ماذا سيفعل :
إنه يخبر المحلل اللغوي لـ HTML أن "هنا رابط CSS" وسيخبر أيضًا "أن CSS لا يقرأ كل شيء".
كيفية إزالة روابط CSS لحظر العرض باستخدام <link rel = "import"
قم بتمييزها بسمة غير متزامنة async :
<link rel = "import" href = "myfile.html" async>
إصلاح روابط maxcdn.bootstrap:
<link href = "// maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet" />
عندما تحدد موارد حظر العرض ، ستحصل بالتأكيد على رابط css أعلاه. في رابط css هذا لن تعمل أي من الطرق المذكورة أعلاه. إنه استثناء وحيد حيث لن تعمل أي من الطرق الموضحة. الخطوات على النحو التالي لحل هذا الشرط.
ملحوظة. تأكد من عمل نسخة احتياطية من ملف theme.xml لتجنب أي مشكلة.
قص (إزالة) فوق رابط css.
الآن ضع JavaScript التالي أسفل علامة <body>.
<script src = "https://kit.fontawesome.com/699d058cf1.js" crossorigin = "anonymous"> </script>
يُنصح بإنشاء مجموعة رائعة من الخطوط الخاصة بك عن طريق النقر هنا لأن الكثير من عمليات التثبيت للمجموعة المذكورة أعلاه يمكن أن تخلق مشكلة في المدون الخاص بك
هذا هو.
إذا كانت لديك أي مشكلة فيما يتعلق بالمشكلة ، فيمكنك أن تسألني في مربع التعليقات.
المنشورات ذات الصلة
- كيفية إعادة توجيه صفحة الخطأ 404 المخصصة إلى الصفحة الرئيسية في بلوجر.
- كيفية إعادة توجيه صفحة الخطأ 404 المخصصة إلى صفحتك الرئيسية في Blogger
- كيف تضيف نموذج الاتصال في بلوجر
- كيفية إضافة نموذج الاتصال الإبداعي في المدونة
- كيفية تثبيت GOOGLE ANALYTICS 4 في المدونة في عام 2021
- 5 أفكار حول "كيفية التخلص من موارد حظر العرض في Blogger"
جيد - زد عليه شرح فيديو
ردحذف