تسريع مدونة بلوجر الى أقصى حد| شرح كود lazy Load و طريقة تركيبه

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

كود تسريع المدونة الى أقصى حد speed of Blogger Blog

كود تسريع المسجلة الى أقصى حاجز speed of Blogger Blog - في هذا الدرس اخواني اخواتي سنتطرق الى موضوع هام بشكل كبير فيما يتعلق للمدونين الذين يمتلكون مواقع على منصة بلوجر حيث سنرى كود سحري و قوي يقوم بتسريع مدونتك الى أقصى حاجز جائز و بالتالي اخواني الأفضلية التي يوفرها أيضاً هي أن عندما يكون موقعكم سريع سيرتاح الزائر نحو ملاحظة سرعة التصفح على مدونتك و هكذا تتحصل على زوار لموقعك و في الأخير اتمنى ان تستفيدوا من ذلك الدرس .

مع العلم ان سرعة وقت فتح صفحات موقعك Load time من الأسباب الأساسية التي تجعل الزائر لا يمل من تصفح مواضيع مدونتك الامر الذى يرجع عليك بـ باك لينك داخلى internal backlinks أعلى وكذالك حب الزائر لموقعك والرجوع اليه مرة اخرى الأمر الذي يخفف من نسبة bounce rate، اضف الى ذالك ان جوجل فى تقيمها لمكان ما pagerank تضع فى الحساب سرعة الموقع مضاهاة موقعك بالمواقع المسابقة.

دعونا اولا نتعرف على ماهو هذا الكود ووظيفته.

كود Lazy Load هو عباره عن كود برمجى بلغة html وظيفته العمل على تتابع تحميل محتويات الصفحه بمعنى أنه عندما يكون لديك صفحه بها كثير من الصور فهذا الكود يقوم أولا بتحميل الكلام الموجود بالصفحه ثم يقوم بعد ذلك بتحميل الصور وعرضها أمامك حسب الطلب, تيسير عملية الاسكرول بار أي عند تحريك الصفحه لأسفل تظهر لديك الصور بالتتابع ممايكسب مدونتك سرعه فى التصفح وهذا مانسعى اليه .

شرح تركيب كود lazy Load لتسريع مدونة بلوجر

هذا الكود مهم في تحميل الصور وعرضها وقت الطلب للزائر اثناء وصوله بالقراءه لها فتظهر فورا وهكذا ، وهذا الكود يعمل على أغلبيت المتصفحات:

IE 6-11, Chrome 1-31, Firefox 1.5-27.0, Safari 3-7, Opera 10.6-18.0, iOS 5-7,

Android 2.3-4.4, Amazon Kindle Fire 2 and HD 8.9, Opera Mini 7.

الكود الأول :

<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>

اضغط ثلات مرات داخل الصندوق لتحديد الكل

طريقة تركيب الكود الأول :
1-خذ نسخة من القالب للاحتياط فقط

2- نبحث عن الوسم /head

3- ونضع الكود فوقه على الفور.

4- ونقوم بحفظ القالب.

الكود الثاني:

<script type='text/javascript'>//<![CDATA[ /*! Lazy Load XT | (C)2014 RESS.io | MIT License * BLOGGER Implementation by khebranet //www.khebranet.tk/2019/03/how-to-speed-your-blog-part-1.html */(function($,window,document,undefined){var lazyLoadXT='lazyLoadXT',dataLazied='lazied',load_error='load error',classLazyHidden='lazy-hidden',docElement=document.documentElement||document.body,forceLoad=(window.onscroll===undefined||!!window.operamini||!docElement.getBoundingClientRect),options={autoInit:true,selector:'img[data-src]',blankImage:'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',throttle:99,forceLoad:forceLoad,loadEvent:'pageshow',updateEvent:'load orientationchange resize scroll touchmove focus',forceEvent:'',oninit:{removeClass:'lazy'},onshow:{addClass:classLazyHidden},onload:{removeClass:classLazyHidden,addClass:'lazy-loaded'},onerror:{removeClass:classLazyHidden},checkDuplicates:true},elementOptions={srcAttr:'data-src',edgeX:0,edgeY:0,visibleOnly:true},$window=$(window),$isFunction=$.isFunction,$extend=$.extend,$data=$.data||function(el,name){return $(el).data(name)},$contains=$.contains||function(parent,el){while(el=el.parentNode){if(el===parent){return true}}return false},elements=[],topLazy=0,waitingMode=0;$[lazyLoadXT]=$extend(options,elementOptions,$[lazyLoadXT]);function getOrDef(obj,prop){return obj[prop]===undefined?options[prop]:obj[prop]}function scrollTop(){var scroll=window.pageYOffset;return(scroll===undefined)?docElement.scrollTop:scroll}$.fn[lazyLoadXT]=function(overrides){overrides=overrides||{};var blankImage=getOrDef(overrides,'blankImage'),checkDuplicates=getOrDef(overrides,'checkDuplicates'),scrollContainer=getOrDef(overrides,'scrollContainer'),elementOptionsOverrides={},prop;$(scrollContainer).on('scroll',queueCheckLazyElements);for(prop in elementOptions){elementOptionsOverrides[prop]=getOrDef(overrides,prop)}return this.each(function(index,el){if(el===window){$(options.selector).lazyLoadXT(overrides)}else{if(checkDuplicates&&$data(el,dataLazied)){return}var $el=$(el).data(dataLazied,1);if(blankImage&&el.tagName==='IMG'&&!el.src){el.src=blankImage}$el[lazyLoadXT]=$extend({},elementOptionsOverrides);triggerEvent('init',$el);elements.push($el)}})};function triggerEvent(event,$el){var handler=options['on'+event];if(handler){if($isFunction(handler)){handler.call($el[0])}else{if(handler.addClass){$el.addClass(handler.addClass)}if(handler.removeClass){$el.removeClass(handler.removeClass)}}}$el.trigger('lazy'+event,[$el]);queueCheckLazyElements()}function triggerLoadOrError(e){triggerEvent(e.type,$(this).off(load_error,triggerLoadOrError))}function checkLazyElements(force){if(!elements.length){return}force=force||options.forceLoad;topLazy=Infinity;var viewportTop=scrollTop(),viewportHeight=window.innerHeight||docElement.clientHeight,viewportWidth=window.innerWidth||docElement.clientWidth,i,length;for(i=0,length=elements.length;i<length;i++){var $el=elements[i],el=$el[0],objData=$el[lazyLoadXT],removeNode=false,visible=force,topEdge;if(!$contains(docElement,el)){removeNode=true}else if(force||!objData.visibleOnly||el.offsetWidth||el.offsetHeight){if(!visible){var elPos=el.getBoundingClientRect(),edgeX=objData.edgeX,edgeY=objData.edgeY;topEdge=(elPos.top+viewportTop-edgeY)-viewportHeight;visible=(topEdge<=viewportTop&&elPos.bottom>-edgeY&&elPos.left<=viewportWidth+edgeX&&elPos.right>-edgeX)}if(visible){triggerEvent('show',$el);var srcAttr=objData.srcAttr,src=$isFunction(srcAttr)?srcAttr($el):el.getAttribute(srcAttr);if(src){$el.on(load_error,triggerLoadOrError);el.src=src}removeNode=true}else{if(topEdge<topLazy){topLazy=topEdge}}}if(removeNode){elements.splice(i--,1);length--}}if(!length){triggerEvent('complete',$(docElement))}}function timeoutLazyElements(){if(waitingMode>1){waitingMode=1;checkLazyElements();setTimeout(timeoutLazyElements,options.throttle)}else{waitingMode=0}}function queueCheckLazyElements(e){if(!elements.length){return}if(e&&e.type==='scroll'&&e.currentTarget===window){if(topLazy>=scrollTop()){return}}if(!waitingMode){setTimeout(timeoutLazyElements,0)}waitingMode=2}function initLazyElements(){$window.lazyLoadXT()}function forceLoadAll(){checkLazyElements(true)}$(document).ready(function(){triggerEvent('start',$window);$window.on(options.loadEvent,initLazyElements).on(options.updateEvent,queueCheckLazyElements).on(options.forceEvent,forceLoadAll);$(document).on(options.updateEvent,queueCheckLazyElements);if(options.autoInit){initLazyElements()}})})(window.jQuery||window.Zepto||window.$,window,document);(function($){var options=$.lazyLoadXT;options.selector+=',video,iframe[data-src]';options.videoPoster='data-poster';$(document).on('lazyshow','video',function(e,$el){var srcAttr=$el.lazyLoadXT.srcAttr,isFuncSrcAttr=$.isFunction(srcAttr);$el.attr('poster',$el.attr(options.videoPoster)).children('source,track').each(function(index,el){var $child=$(el);$child.attr('src',isFuncSrcAttr?srcAttr($child):$child.attr(srcAttr))});this.load()})})(window.jQuery||window.Zepto||window.$); //]]></script>

اضغط ثلات مرات داخل الصندوق لتحديد الكل

طريقة تركيب الكود الثاني :
1-خذ نسخة من القالب للاحتياط فقط
2- نبحث عن الوسم </body>
3- ونضع الكود فوقه على الفور.
4- ونقوم بحفظ القالب.

اتمنى أن اكون وفقت في ايصال المعلومة اليكم, مع وافر تحياتي.

أنصحك بقراءة هذا الموضوع حول تسريع مدونة بلوجر بالكامل