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

سأعرض في هذه التدوينة كيفية زيادة سرعة تحميل مدونة بلوجر، كما سنحاول جعل مدونة بلوجر تحمل بشكل صاروخي “تسريع مدونة بلوجر بشكل صاروخي” وكيف تقوم بتسريع قالب بلوجر الي أقصى درجة ممكنة باستخدام كود تسريع لمدونة بلوجر.

طريقة زيادة سرعة تحميل قالب بلوجر، تسريع قالب بلوجر

تسريع مدونات بلوجر أمر هام جداً في زيادة زيارات المدونة وفي ترتيب موقعك في محركات البحث، وهو من العوامل المهمة للـ SEO ، حيث يعد تسريع مدونة بلوجر من الخطوات المتقدمة في تهيئة محركات البحث وأرشفة موقعك في الصفحة الأولي أو النتيجة الأولي.

وفي الاسفل ستجد كل ما يخص كيفية تسريع مدونة بلوجر من اكواد أو طرق وسأوضح طريقة قياس سرعة المدونة ونصائح لتسريع مدونة بلوجر الى اعلى درجة.

تعرف من هنا علي: افضل 5 قوالب بلوجر احترافية جدا.

قبل أن ننتقل الي كيفية زيادة سرعة تحميل مدونة بلوجر، دعونا نعرف كيف نقيس سرعة تحميل المدونة أولا ؟

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

هناك طرق عديدة لقياس سرعة مدونتك او موقعك ، ولكن دعونا نعرض أهم تلك الطرق :

1. 1. قياس سرعة تحميل المدونة بإستخدام موقع Page Speed Insights :

موقع Page Speed Insights هو أداة من جوجل لقياس سرعة المواقع الإلكترونية. ولقياس سرعة المدونة عن طريق موقع Page Speed Insights ، قم بالذهاب الي الموقع من هنا ، وقم بوضع رابط مدونتك وأخيراً أضغط علي Analyze أو تحليل إن كانت لغة متصفحك هي العربية .

وبعدها تظهر لك سرعة تحميل موقعك بحيث أن السرعة ما بين 0:50 فهي سيئة وما بين 50:90 فهي إلي حد ما جيدة وبين الـ 90 فما فوق فهي ممتازة .

ويظهر لك في الأسفل بعض معايير قياس سرعة تحميل موقعك، دعني اوضح لك بعضها:

شرح لبعض المعايير المهمة لآداة جوجل Page Speed Insights :

آداة جوجل Page Speed Insights هي آداة توفرها جوجل كما ذكرنا سابقا لقياس سرعة تحميل المواقع الالكترونية، ويمكنك من خلالها قياس سرعة تحميل قالب بلوجر. وفي الاسفل بعض اهم معايير الاداة وشرحهم.

1. 1. • معيار الـ First Contentful Paint :

وهو يقيس سرعة أول شئ يظهر في موقعك، أي أنه يقيس أول شئ ملون كالـ Header مثلاً في موقعك .

1. 1. • معيار الـ First Meaningful Paint :

وهو يقيس سرعة أول شئ له معني يظهر في موقعك، أي أنه يقيس سرعة ظهور الـ Header كاملاً في موقعك .

1. 1. • معيار الـ Speed Index :

وهو يقيس سرعة إكتمال تحميل الموقع من حيث الشكل.

1. 1. • معيار الـ First CPU Idle :

وهو يقيس المدة التي يأخذها المعالج حتي يتوقف وينتهي من تحميل كامل الموقع.

1. 1. • معيار Time to Interactive :

وهو يقيس الوقت الذي بعده يمكن للمستخدم التفاعل مع موقعك كالبحث عن تدونية أو كتابة تعليق وهكذا.

وينبغي عليك تحليل هذه المعايير والتعرف علي المشاكل التي تُعيق تحميل موقعك؛ ولننتقل الي الموقع الثاني لقياس سرعة تحميل موقعك:

1. 1. قياس سرعة تحميل المدونة بإستخدام موقع Gt Metrics :

وموقع GT Metrics شبيه أيضاً بأداة جوجل والميزة هنا أنه يعطيك تقرير مُفصل عن المشاكل الموجودة في موقعك وأيضاً يعطيك حلول لهذه المشاكل .

وبعد أن ناقشنا طرق قياس سرعة تحميل الموقع، دعونا ننتقل الي طرق زيادة سرعة تحميل الموقع؛ وسوف أعرض طرق زيادة السرعة عن طريق حل المشاكل التي من الممكن أن تبطئ الموقع الخاص بك .

* لكل موقع مشاكل وبالتالي طرق مختلفة لزيادة السرعة ولكي تحل هذه المشاكل عليك أن تعرف ما الذي يبطئ موقعك، وسأعرض هنا حل لمشاكل زيادة سرعة تحميل الموقع المشهورة :

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

1. 1. تسريع مدونة وقالب بلوجر عن طريق إزالة كل الاكواد التي ليس لها فائدة في المدونة وأيضاً إزالة الأدوات الغير مهمة والغير ضرورية من المدونة :

بعض الإضافات تكون غير ضرورية وحذفها لن يأثر علي المدونة، فقط احتفظ بالإضافات المهمة والتي بدونها لا تصلح المدونة للعمل. وأيضاً تكون هناك إضافات تستخدم الجافا سكريبت Java Script والتي تعيق المدونة بشكل كبير وذلك كبعض السلايدرز Sliders التي تجدونها في العديد من المدونات.

1. 1. ضغط الصور لتسريع بلوجر، عمل Optimize للصور التي تستخدمها في موقعك:

المشكلة :

الحل :

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

هناك مواقع عديدة تقوم بعمل Optimize للصور بدون التضحية بجودة الصور، ومن المواقع التي أرشحها لكم؛ موقع Short Pixel  وأنا شخصياً أستخدم هذا الموقع. يمكنك أيضاً إستخدام الفوتوشوب لضغط وتقليل حجم الصور.

تعرف من هنا علي كيفية كتابة مقال احترافي متوافق مع السيو

1. 1. تسريع مدونة بلوجر عن طريق تحميل اسكريبتات الموقع بطريقة متوازية مع تحميل تنسيق المدونة :

المشكلة :

الحل : تحميل الـ Script الخاصة بموقعك بشكل Asynchronously يجعل موقعك يحمل بسرعة ويحسن من سرعة موقعك . وللقيام بهذا إنتقل إلي صفحة تعديل الـ HTML الخاصة ببلوجر وقم بالبحث عن Script وفعل هذه الميزة بوضع كلمة

async=”async”

1. 1. تسريع مدونة بلوجر عن طريق تقليل الوقت اللازم لتحميل خطوط الويب المستخدمة في المدونة:

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

 <script async="async">
    //<![CDATA[ 
    WebFontConfig = {google: { families: ['Font Name 1','Font Name 2'] }};(function(d) {var wf = d.createElement('script'),
 s = d.scripts[0];wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';wf.async = true;s.parentNode.insertBefore(wf, s);})(document);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://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css");


//]]>
</script>   

هذا الكود يتضمن تحميل خط الفونت Font awesome وتأكد من تغيير كلمة “Font Name ” بإسم الخط الذي تريد إستخدامه كما هو موجود في موجود في موقع Google Web Fonts ؛ هذا الكود أيضاً لا يعمل إلا مع الخطوط التي تقدمها جوجل . ضع هذا الكود فوق وسم الـ </head>.

1. 1. تسريع مدونة بلوجر عن طريق إستخدام كود الـ Lazy Loading لتأخير تحميل الصور:

كود الـ Lazy Load يؤخر تحميل الصور حتي إكتمال تحميل الصفحة، وهو كود هام في علاج بطئ مواقع الانترنت ولتقوم بإضافة هذا الكود قم بنسخ الكود أسفل ووضعه فوق وسم الـ </head>. هذا الكود مدمج به إضافة الـ JQuery حتي يعمل بشكل صحيح  :

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script>
// Jquery LazyLoad Script by www.Bloggersstand.com
//<![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:"https://4.bp.blogspot.com/-oA8G9t61JXk/VtLrtkAzObI/AAAAAAAAFTY/EjT6jl2MEFM/s1600/bloggersstand.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>  

1. 1. تسريع مدونة بلوجر عن طريق عمل Minify للقالب أو لكود الـ HTML :

تصغير حجم الكود الخاص بالقالب الذي تستخدمه يساعد في زيادة سرعة مدونة بلوجر، ولعمل Minify لقالب بلوجر إذهب لموقع Html Compressor، وقم بنسخ كود القالب ولصقه هناك وإختار Blogger وإضغط علي Compress.

1. 1. الاشتراك في شبكة توصيل للمحتوي CDN:

في بعض الاحيان يكون الاشتراك في شبكة لتوصيل المحتوي هو أمر رائع حيث تقوم هذه الشبكات المعروفة بال CDNS أو بالـ Content Delivery Network، وتقوم هذه الشبكات بتوزيع المحتوي الخاص بمدونتك الي سيرفرات منتشرة في جميع انحاء العالم .

وتقوم بتوصيل محتوي موقعك الي المستخدم من اقرب سيرفر له، مما يقلل من سرعة تحميل الموقع ويقلل وقت التحميل، كما ان بعض خدمات وشركات توصيل المحتوي بتقديم خدمات اخري حيث يمكنها:

مزايا الـ CDN، وكيف يمكن للـ CDN زيادة سرعة تحميل موقعك؟

1. 1. • تقوم بزيادة سرعة تصفح موقعك، وبالتالي تساعد علي تعزيز آداء الموقع.
      • تقوم بعمل تقسيم وتوزيع لل Traffic الخاص بموقعك Load balancing.
      • بعض ال CDNs تحمي المواقع المشتركة بها من هجمات ال ddos وغيره، فيما يوفر حماية اكبر لموقعك، كما انها تحمي مدونتك من الزيارات الوهمية.
      • تقوم بعمل Cashing لموقعك؛ وال Cashing هي خاصية تقوم بتحميل ملفات ال CSS وبعض الصور وبعض ملفات الموقع الاخري في متصفحات المستخدمين مما يزيد من سرعة تحميل الموقع عند زياتهم للموقع مجدداً.
      • بعض ال CDNs توفر خدمة تقليل حجم الصور الموجودة بموقعك كما تجعل هذا الحجم ملائم لحجم ال div الموجودة به الصورة أي انها تقوم بعمل Resize للصور.

   2. عمل Cashing لملفات الـ CSS والصور في موقعك.

يمكنك تسريع مدونة بلوجر عن طريقة عمل Cashing لملفات التنسيق CSS والصور واكواد الجافا سكريبت Js في مدونتك، وبالتالي يتم تخزين هذه الملفات داخل متصفح الزائر وعند زيارته لموقعك مرة أخري يتم تحميل هذه الملفات من جهازه. يمكنك تفعيل خاصية الـ Cashing في مدونة بلوجر عن طريق وضع هذا الكود اعلي الـ <head> .

كود لعمل Cashing مدونة بلوجر Blogger

<meta content='7 days' name='revisit-after'/>
<meta content='7 days' name='revisit'/>
<include expiration='30d' path='*.css'/>
<include expiration='30d' path='*.js'/>
<include expiration='15d' path='*.jpeg'/>
<include expiration='15d' path='*.gif'/>
<include expiration='15d' path='*.png'/>
<include expiration='15d' path='*.jpg'/>

وتقديراً للمجهود المبذول في كتابة هذا المقال، يمكنك مشاركته مع المهتمين بهذا الموضوع وشكراً….