اداة سهلة لتسريع اقلاع موقعك

| | | 0 تعليقات

السلام عليكم في درس جديد من دروس الحمابة  ; 

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

 
 
حسناً الإضافة التى سنقدمها اليوم هى كود يضاف داخل المدونة يقوم بتأخير عرض الصور حتى يتم عرض النص أولاً مما يقلل عملية طلبات الـ HTTP Requests مما يؤدى إلى تحسن واضح فى سرعة التصفح الخاص بالمدونة .

مثال حى لموقع مدونة الحماية بعد إضافة الكود 


خطوات إضافة الكود
إفتح قالب ---> تحرير html ---> إكتب Ctrl+F ---> ابحث عن <head/>
قم بإضافة الكود التالى أعلى كلمة <head/> مباشرة 
<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>

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


هل أعجبك الموضوع ؟

مواضيع مشابهة :

ضع تعليقا

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

إرسال تعليق

شاركونا بارائكم الهامة لنا :D

جميع الحقوق محفوظة 2014/2012