12 طريقة فعالة لتسريع تحميل مدونة بلوجر

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

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

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

الـ AMP ليست خيارًا جيدًا لمنصة بلوجر في الوقت الحالي نظرًا لعدم وجود دعم رسمي لها حاليًا، إن تحويل شفرة القالب بالقوة إلى AMP سيجعل الامر مجرد صداع للأشخاص الذين ليسوا على دراية جيدة بالتغيير والتبديل في شفرة الكود. 

علاوة على ذلك، يؤدي بطئ تحميل مدونتك إلى فقدان الزوار عموما. ووفقا لتقارير، سيتخلى 40٪ من الأشخاص عن موقعك إذا تطلب تحميله أكثر من 3 ثوان، وستتسبب كل ثانية إضافية لتحميل موقعك في انخفاض معدل التحويل بنسبة 7٪.

طريقة تسريع المدونة وتقليل وقت تحميل الصفحة فى بلوجر

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

اما و اذا لم تكن كذلك فاننا و لغرض مساعدتك سنشارك معك 14 طريقة فعالة لتسريع مدونتك بلوجر.

قبل ان نبدا

اخذ نسخة احتياطية من قالبك

قم بالدخول الى منصة بلوجر و من القوائم الجانبية انتقل الى "المظهر" و هناك اضغط على زر "نسخ احتياطي / استعادة" و اخيرا اضغط على "تنزيل المظهر".

فحص سرعة مدونتك

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

إعطاء الاولوية للمحتوى المرئي

حسنًا، لذا فإن الطريقة الأولى لتسريع مدونتك الإلكترونية هي إعطاء الأولوية للمحتوى المرئي.
إذا استخدمت أداة Insights، فقد تكون على دراية بهذه المشكلة، مشكلة Prioritize Visible Content.

تحدث هذه المشكلة أساسًا لأنك استخدمت مواردا كبيرة من أكواد الجافا سكريبت أو اكواد CSS في قالب مدونتك بدلاً من استضافتها على خادم خارجي.

1- لحل هذه المشكلة، انتقل إلى قالب مدونتك على منصة بلوجر و قم بتحرير اكواد HTML.
2- وابحث عن المجموعة الكبيرة من اكواد الجافا سكريبت والتي ستجدها هكذا.

<script>

انسخ اكواد جافا سكريبت الكبيرة ما بين هذين الوسمين

 </script>

3- افتح الآن المفكرة not-pad وقم بنسخ والصاق تلك الاكواد داخل المفكرة و قم بحفظها باي اسم و في الاخير بدل .txt غيرها الى .js.
4- الان قم برفع ملف الكود الذي قمت بحفظه على احد الاستضافات في الانترنت كموقع  yourjavascript الذي يقدم خدمة استضافة اكواد الجافا سكريبت مجانا و حتى اكواد CSS.

5- سيطلب منك ادخال البريد الالكتروني ليرسل لك رابط  ملف الكود المستضاف، بعد ان تحصل على الرابط ارجع الى قالب مدونتك و بدل تلك الاكواد ضع الكود التالي مع وضع رابط الملف الذي حصلت عليه في مكانه.

<script src='رابط ملف جافا سكريبت المستضاف' />

*1 اذا كانت هناك مجموعة كبيرة من اكواد CSS فستجدها هكذا.

<style>

انسخ اكواد سي اس اس  الكبيرة ما بين هذين الوسمين

 </style>

2* قم بلصق اكواد CSS في المفكرة وقم بحفظها وبدل .txt غيرها الى .css و ارفعها على نفس الموقع yourjavascript .

3* بدل الاكواد الذي نسختها من القالب ضع هذا الكود مع اضافة رابط الملف المستضاف.

<link href='رابط ملف سي اس اس المستضاف' />

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

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

استخدام تنسيقات الصور الحديثة

إن JPEG 2000 و JPEG XR و WebP هي تنسيقات الصور الحديثة التي لها خصائص ضغط ونوعية عالية مقارنة بنظيراتها القديمة JPEG و PNG.
إن تشفير صورك بهذه التنسيقات بدلاً من JPEG أو PNG يعني أنه سيتم تحميلها بشكل أسرع وتستهلك بيانات أقل وستجدها ظاهرة كمشكلة ان قمت بفحص مدونتك عبر اداة Insight ستجدها بعنوان Serve images in next-gen formats.

يتم دعم WebP على Chrome و Opera و Firefox و على الرغم من ذلك ليست مدعومة عالميا الا انها تبقى الجيل التالي من تنسيق الصور الذي سيتم الانتقال اليه عاجلا ام اجلا.
يمكنك استخراج صورك من الفوتوشوب عبر هذه الصيغ غير ان بعضها يحتاج اولا الى تثبيت اضافة قبل ان يتاح لك استخدامها كـ webp.

ضغط الصور

مشكلة أخرى شائعة تواجهها أثناء تسريع موقعك و هي الصور، فعليك ضغط الصور الموجودة على مدونتك ليتم تحميلها في وقت اقل فعند الضغط تخفف عن مدونتك تحميل الكثير من الكيلوبيت.
يستغرق تحميل ملفات الصور الكبيرة وقتًا أطول وبالتالي وقت اكثر لتحميل موقعك.
و سبق ان شرحنا طريقة عمل ذلك في موضوع بعنوان ضغط صور JPG و PNG بدون التاثير على جودتها و بدون برامج.
تقدم العديد من المواقع خدمة ضغط الصور مجانًا. و اليك اهمها:
موقع ضغط صور webp
JPEG Optimizer
Tiny PNG
Optimizilla
Kraken.io

تحميل الصور ببطئ

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

  <script type='text/javascript'>//<![CDATA[   

  (function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

بعد اضافتك للكود الذي بالاعلى سيتم تحميل صور مدونتك كلها ببطئ مما يزيد من سرعة تحميل مدونتك.

إزالة ايقونات Quickedit

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

<b:include name='quickedit'/> 

ستجد العديد منه قم بحذفه في كل مرة تجده.
لإزالة ايضا "رمز التحرير السريع" ، توجه إلى قسم "التخطيط" وانقر على تعديل "رسائل المدونة الالكترونية" وقم بإلغاء التحديد عن خيار "إظهار التحرير السريع".

بفعلك هذا ستعطي دفعة اكبر لسرعة مدونتك و ان كانت قليلة.

تسريع تحميل خطوط المدونة

يتم استضافة الخطوط المخصصة خارجيًا وتؤدي إلى تباطؤ مدونتك. وبالتالي فإن أسهل طريقة لتسريع مدونتك هي التخلص من الخطوط المخصصة.
لكن مدونة بدون خطوط مخصصة تبدو باهتة وقبيحة، لذلك الخطوط المخصصة ضرورية.
لكن كلما زادت الخطوط التي تستخدمها في المدونة، زاد وقت التحميل لهذا ينسح بنوع واحد من الخطوط و قد تضيف للحاجة خط font awesome.

* اذا كنت تستعمل روابط Google fonts و تستعمل اكثر من خط فيمكنك تقليل وقت التحميل من خلال تجميع كل الخطوط في رابط واحد.
على سبيل المثال، إذا كنت تستخدم Oswald و Open Sans، فيمكنك إضافتها كارتباط فردي بدلاً من روابط متعددة. فمثلا:

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet">

أو يمكنك أيضًا جعل الخطوط يتم تحميلها بشكل أسرع باستخدام السكريبت التالي:

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
//CSS Ready
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("https://fonts.googleapis.com/css?family=Oswald");
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

قم باضافة هذا السكريبت فوق الوسم </head> مع تغيير https://fonts.googleapis.com/css?family=Oswald برابط خط مدونتك، كما ترى ان font awesome موجود في السكريبت اذا كنت لا تستخدمه في مدونتك فقط قم بحذف الكود الذي بالاحمر، و بالتاكيد بعد اضافة سكريبت تاكد من حذف اكواد الخطوط السابقة في قالب المدونة.

تقليل عدد المشاركات في الصفحة الرئيسية

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

تأجيل تحميل اكواد جافا سكريبت او عدم مزامنتها

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

تأجيل تحميل اكواد جافا سكريبت

إن تأجيل الجافا سكريبت يعني تحميل كل باقي الموارد في مدونتك قبل تحميل كود الجافا سكريبت.
هذه الوظيفة تجعل تحميل موقعك في وقت اقل ويجعل الأمر يبدو وكأن موقعك أسرع. تدعم جميع المتصفحات تقريبًا هذه الوظيفة.
ملاحظة: لا يمكنك استخدامه للاكواد الضرورية مثل Jquery Script.

لتأجيل البرامج النصية الموجودة في مدونتك، أضف defer في علامة <script> مثل <script defer>، في بلوجر سيعطيك خطا لهذا بدل ذلك تضيف كالاتي:

<script src='Your Javascript URL' defer='defer'></script>

جافا سكريبت غير متزامن

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

للتحميل غير المتزامن لجافا سكريبت، أضف علامة async للبرنامج النصي كـ <script async> في بلوجر سيعطيك خطا لهذا بدل ذلك تضيف كالتالي.

<script src='Your Javascript URL' async='async'></script>

ضغط اكواد HTML و CSS

من بين الامور المهمة لتسريع مدونتك هو ضغط اكواد HTML و CSS و الضغط يكون بحذف التعليقات و تكديس سطور الاكواد البرمجية هذا و قد سبق و ان شرحنا موضوع كامل لهذا الامر بعنوان ضغط أكواد CSS و Html لتسريع مدونة بلوجر إطلع عليه فسيفيدك.

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

استخدام CDN

من الطرق المكلفة لتسريع مدونتك استخدام CDN ،CDN هي اختصار لشبكة توصيل المحتوى (Content Delivery Network) وتسلم الصفحات والملفات الأخرى للمستخدمين بناءً على موقعهم وخادمهم.
يمكن استخدام CDN مثل MaxCDN لاستضافة ملفات الجافا سكريبت الخارجية.
يوفر CDN طريقة اسرع وآمنة لاستضافة ملفاتك. وبالتالي فإنه يجعل تحميل مدونتك اسرع و في وقت وجيز.

تجنب الإعلانات الزائدة

الإعلانات إما نصوص أو صور أو كليهما يمكن أن تكون سبب في السرعة البطيئة لمدونتك.
لذلك ينصح بتقليل عدد الإعلانات على مدونتك، لا يحب القراء أيضًا دك العديد من الإعلانات على الصفحة الواحدة.
وبالتالي يجب تجنب الإعلانات الزائدة، 3-4 إعلانات في كل صفحة كافية.

كيفية الاستفادة من متصفح التخزين المؤقت على بلوجر Exploit Browser Caching

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

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