مدونة عربية تهتم بكل ما يخص التعليم , مذكرات دراسية , كتب مدرسية

آخر الأخبار

Post Top Ad

Your Ad Spot

الخميس، 21 يناير 2021

كيفية إزالة ملفات CSS و JavaScript غير المستخدمة في blogger

 إزالة جميع Blogger JS و CSS الافتراضي لتسريع وقت تحميل الصفحة

 How to remove unused CSS and JavaScript files in blogger

How to Remove Unused Javascript and CSS files in Blogger

بصفتك مدونًا محترفًا ، تحتاج دائمًا إلى التركيز على تسريع وقت تحميل الصفحة لكل صفحة تتم إضافتها إلى مدونتك أو موقع الويب الخاص بك. كما تعلم ، فإن وقت تحميل الصفحة هو عامل مهم جدا فى تحسين محركات البحث (SEO) الأساسي على الصفحة الذي تضعه محركات البحث فى الاعتبار لمنح ترتيب بحث أعلى. في حالة مدونة Blogger بشكل خاص ، لاحظت أن جافا سكريبت وشفرة CSS الافتراضية تتم إضافتهما تلقائيًا داخل قالب HTML لمدونتك قد يؤدي إلى إبطاء وقت تحميل صفحتك. وهذا هو سبب حاجتك إلى إزالة كود JavaScript و CSS المدون الافتراضي من مدونة blogger.

  أنواع ملفات JavaScript (.js) و Stylesheet (.css) الافتراضية

هناك اربع انواع من هذة الملفات تحقق من قائمة الأنواع المختلفة من ملفات عناصر واجهة تعامل JavaScript و CSS الافتراضية التي تم إنشاؤها وإضافتها تلقائيًا بواسطة blogger:

    1- كود Blogger CSS الافتراضي: widget_css_bundle.css
    هذا هو الملف الأول الذي يتم تنفيذه على جانب المتصفح بمجرد زيارة الزائر لمدونتك. يتضمن هذا الملف جميع ملفات حزمة CSS الافتراضية لورقة أنماط عنصر واجهة المستخدم لقالب Blogger وجميع الأدوات الافتراضية مثل المنشورات ذات الصلة وأداة المراجعة والمنشورات الشائعة وقسم التعليقات ونموذج الاتصال وما إلى ذلك.

    2- معرف المدونة: authorization.css
    إنه ملف كود CSS صغير يتم تسليمه عند كل تحميل صفحة ويحمل BlogID الخاص بك.

   3- جافا سكريبت للأدوات: widget.js
    هذا هو الملف الأكثر تأثيرًا الذي يحتوي على رمز JavaScript لجميع أدوات Blogger الافتراضية. إنه ملف كبير وبالتالي يتطلب مزيد من الوقت للجلب والتحميل من جانب المتصفح.

   4- نص Google+: plusone.js
    إنها جافا سكريبت المضافة إلى كل مدونة بلوجر لأدوات + Google. تحديث: تم إغلاق Google plus وبالتالي إزالته تلقائيًا.

لقد ناقشنا بالفعل تقنيات تحسين سرعة موقع الويب وأهمية تقليل وقت تحميل الصفحة وبالتالي نقترح إزالة ملفات جافا سكريبت غير المستخدمة وملفات CSS غير المرغوب فيها من مدونة المدون الخاصة بك في أسرع وقت ممكن.

لماذا يجب عليك إزالة عناصر واجهة مستخدم حزمة CSS الافتراضية و Widgets.js من blogger؟
تعد إزالة JavaScript (Widgets.js) و CSS الافتراضية من مدونة Blogger أفضل طريقة لجعل مدونتك سريعة التحميل. لكن بما في ذلك المزايا ، فإن لها بعض العيوب أيضًا.

مزايا وعيوب إزالة ملفات JS & CSS الافتراضية من Blogger:

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

إزالة نصوص المدونات الافتراضية وملفات CSS

كود JavaScript (Widgets.js) & CSS (css_bundle_v2.css) الافتراضي
نظرًا لأنه مخفي ومُضاف تلقائيًا بواسطة إعدادات المدون ، يمكنك التحقق من الملف بمجرد تحميل الصفحة. للتحقق من الملف ، افتح أيًا من صفحات مدونتك وافتح كود المصدر الخاص به. لفتح شفرة المصدر ، انقر بزر الماوس الأيمن في أي مكان على الصفحة وانقر فوق "عرض مصدر الصفحة". 

How to remove non-detached CSS and JavaScript files in blogger
سوف تفتح معك صفحة جديدة لتحصل على الرمز ابحث على هذا الرمز (Widgets.js) :

يظهر ملف JavaScript (Widgets.js) الافتراضي في القالب بهذا الشكل :

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2423294629-widgets.js"></script> 
 
How to remove non-detached CSS and JavaScript files in blogger

بينما يظهر ملف أنماط CSS (css_bundle_v2.css) في النموذج :
 
<link href='https://www.blogger.com/static/v1/widgets/3416767676-css_bundle_v2.css' rel='stylesheet' type='text/css'/> 
 
 قم بإزالة Default Blogger JavaScript و CSS لتسريع وقت تحميل الصفحة
مطلوب بعض المعرفة الأساسية الأساسية لتخصيص رمز قالب HTML الخاص بـ Blogger لمعرفة كيفية تكوين الأدوات والعمل وفقًا لتصميم السمة.

اتبع الخطوات لإزالة ملفات حزمة جافا سكريبت و CSS الافتراضية من قالب بلوجر:

الخطوة 1: تأكد من عمل نسخة احتياطية من قالب بلوجر بالكامل. (مهم جدا تحسبا لاى خطا!)

الخطوة 2: انتقل إلى المظهر في القالب الخاص بك وبعده نضغط على سهم تخصيص واختار تعديل HTML

الخطوة 3: سترى الكود التالي في أول 3-4 أسطر:

<HTML b:version='3' class='v3' expr:dir='data:blog.languageDirection'...
الخطوة 4 : لإزالة ملفات CSS و JS الافتراضية ، يجب إضافة b: css = 'false' & b: js = 'false' كما هو موضح أدناه :
<HTML b:css='false' b:js='false' b:version='3' class='v3' expr:dir='data:blog.languageDirection'... ...
الخطوة 5: والآن قم بإزالة ملفات blogger CSS الافتراضية ، ابحث عن الكود التالي:
<b:skin><![CDATA[
...
All your CSS codes
...
]]></b:skin>
 الخطوة 6: واستبدلها بالكود التالي:
<style type='text/css'>
...
All your CSS codes
...
</style>
الخطوة 7: أضف الكود التالي فوق الكود الذي تم إنشاؤه في الخطوة 6.
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*
<b:skin><![CDATA[*/]]></b:skin>
 بحيث تبدو الشفرة بأكملها كالاتى :

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*
<b:skin><![CDATA[*/]]></b:skin>

<style type='text/css'>
...
All your CSS codes
...
</style>
الخطوة 8 : لإزالة رابط authorization.css لمدونة Blogger ، ابحث عن <head> واستبدله بالشفرة التالية:
&lt;head&gt;
الخطوة 9: ابحث الآن عن </head> واستبدله بالكود التالي:

<HTML b:version='3' class='v3' expr:dir='data:blog.languageDirection'...

الخطوة 10: الآن ابحث عن <body> واستبدله بالكود التالي:
&lt;body onload=&quot;script();&quot; onload=&quot;callFunction();&quot; onload=&quot;loaded();&quot; data-progrecss-mock=&quot;5&quot; class=&quot;progrecss green fixed mock staggered&quot; class=&#39;index&#39; expr:class=&#39;&amp;quot;loading&amp;quot; + data:blog.mobileClass&#39; itemscope=&#39;itemscope&#39; itemtype=&#39;http://schema.org/WebPage&#39;&gt;
الخطوة 11: ابحث عن </body> واستبدله بالرمز التالي:
&lt;!--</body>--&gt; &lt;/body&gt;
الخطوة 12: احفظ النموذج. وتحقق من سرعة مدونتك 
 
 
 الشيء المهم هو أنه لا يمكنك العثور على علامات CSS & JS الخاصة بالمدون الافتراضي في محرر كود HTML حيث يتم إضافتها تلقائيًا إلى مدونتك كلما تم تحميل الصفحة في المتصفح. يتم إخفاء هذه الملفات الافتراضية في جميع المدونات من خلال الإعدادات الافتراضية التي يوفرها خادم BlogSpot ولا تظهر إلا بمجرد تحميل الصفحة بالكامل في المتصفح.

كيفية إزالة CSS وجافا سكريبت الافتراضيين من مدونة بلوجر؟ هذا هو السؤال ، سأوضح لك كيف يمكنك بسهولة إزالة Javascript (js) الافتراضية و blogger's Cascade Style Sheet (CSS) من صفحات  مدونتك . تتم إضافة هذه العلامات الافتراضية بواسطة Blogger نفسها لكل تحميل صفحة ، لتشغيل ملفات عناصر واجهة تعامل حزمة JavaScript و CSS الافتراضية. بمساعدة الخطوات التالية ، يمكنك الآن إزالة CSS و js الافتراضيتين للمدونة بسرعة. من خلال إزالة هذه الملفات الافتراضية غير المرغوب فيها "widget_css_bundle.css" (CSS) و "widgets.js" (JS) ستحسن سرعة تحميل مدونتك بسرعة.

لتسريع تحميل المدونة ، يجب عليك إزالة كود javascript & CSS الافتراضي الخاص بـ blogger والذي يتم إضافته تلقائيًا في كود مصدر HTML لقالب مدونتك بين العلامة وقبلها. لقد طلبت إزالة اثنين من الروابط وعلامات البرنامج النصي في الكود المصدري مثل "b: template" و "b: skin" في حالة عدم توافقك مع CSS الخاص بترخيص حزمة blogger CSS بالإضافة إلى الأدوات الثابتة. تأكد أيضًا من إزالة جافا سكريبت "plusone.js" المشفر لأنه أكبر سبب لإبطاء مدونتك ويتسبب في مزيد من الوقت لتحميل موقع الويب الخاص بك.

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

تعد حزمة CSS و JavaScript Widgets الخاصة بورقة الأنماط الافتراضية من Blogger السبب الأكبر الذي يؤثر على سرعة تحميل صفحة مدونتك ويؤدي إلى زيادة وقت تحميل الصفحة. أيضًا ، ليس لدى Blogger أي طريقة لتعطيل JavaScript و CSS الافتراضيين ، لذا فإن إزالة CSS & JS الافتراضية تمامًا من مدونة Blogspot blogger هو الخيار الوحيد لتسريع وقت تحميل مدونتك.

هذه بعض من أفضل الأساليب والحيل لتحسين وقت تحميل الصفحة عن طريق إزالة حزمة Blogger الافتراضية CSS وملفات JS لعناصر JavaScript غير المرغوب فيها المضافة تلقائيًا إلى مدونة blogger. إذا وجدت أي صعوبة أثناء إجراء التغييرات ، فيرجى إبلاغي بذلك عبر قسم التعليقات الموضح أدناه.

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

إرسال تعليق

Post Top Ad

Your Ad Spot