طريقة تسريع مدونة بلوجر عن طريق إضافة lazy load – كود تسريع بلوجر

طريقة تسريع مدونة بلوجر عن طريق إضافة lazy load

حل مشكلة بطئ مدونة بلوجر

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

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

إذا ما العلاقة بين سرعة موقعك أو مدونتك و ترتيبك على محركات البحث ؟

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

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

سنتطرق الآن وفي هاذ المقال إلى إحدى طرق تسريع التصفح أو زيادة سرحة التحميل لصفحات الموقع أو المدونة وهي عبارة عن إضافة تدعى lazy load .

قد يعجبك أيضا : حل مشكلة عرض الصور بتنسيقات الجيل القادم في بلوجر

ما هو ال lazy load ؟؟

هو عبارة عن كود برمجي بصيغة html يعمل على تسريع تحميل الصفحة عبر تحميل مكوناتها بالتتابع وليس دفعة واحدة .. كيف ؟؟ لنفرض أنه لديك مقال او موضوع يحتوي على كثير من النصوص والصور فعندما تقوم بتصفح الموضوع نزولا إلى الأسفل يقوم الكود يتحميل النصوص أولا ومن ثم الصور حسب وصولك إلى موضعها من الصفحة
مما يكسب مدونتك أو موقعك مزيداً من السرعة والسلاسة في التصفح وهذا هو مرادنا .

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

كيف نضيف هاذ الكود إلى مدونة بلوجر ؟؟ 

لاضافة كود lazy load ولتسريع المدونة سنتبع الخطوات التالية :

أولاً : نقوم بأخذ نسخة إحتياطية للمظهر حتى يمكننا الرجوع إلى إليها متى حدث أي خطأ .

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

ثانياَ : من التبويب المظهر نختار تعديل html ونبحث عن الوسم <body/> و نضع الكود التالي أعلاه

<!-- lazy load  -->
<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>
<!-- lazy load -->

ثالثاً : نقوم بحفظ التغييرات عبر الضغط على حفظ المظهر
ومن ثم نقوم بفحص سرعة المدونة عبر أداة PageSpeed Insights  وسوف نلاحظ الفرق ..

ملاحظة : عليك التأكد من وجود إضافةjQuery في قالب مدونتك مع العلم أن أغلب القوالب الحديثة والمتجاوبة تستخدم هاذه الإضافة تلقائياً 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

إلى هنا نكون قد إنتهينا من شرحنا لطريقة تسريع مدونة بلوجر عبر كود lazy load وأتمنى أن تكونوا قد استفدتم ..
في أمان الله