Оптимизация. Плавно зареждане на изображенията в блога

Поздравявам ви, приятели. Много се говори и пише за оптимизацията на блога. Включително и тук, в Блог за блогове. Днес ще говорим по една наболяла тема - бавното зареждане на блога. За това предупреждава търсачката Yandex тези, които я използват, а Google подава разочароващи индикатори.
Също така ще споделя как съм увеличила скоростта на зареждане на блога си, като използвам плавното зареждане на изображенията в него.
Наскоро ми дойде неприятно съобщение от Yandex.Webmaster  за това, че страниците на моя блог се зареждат за повече от 3 секунди. Започнах истерично да проверявам най-тежките страници на блога си. Не намерих такива „страшни“ цифри. Може би е имало временно претоварване на хостинга, поради което блогът ми се е зареждал дълго време, но няколко страници показват време за изтегляне от 1,5 секунди или повече. Това не е фатално, но бих искала да е по-бързо, особено след като открих, че блоговете на мои колеги се зареждат наполовина по-бързо. След това погледнах и чрез инструмента Google PageSpeed.

Картината също не беше приятна, особено за мобилни устройства. Но тук има един плюс, че Google дава препоръки за това, как да се поправи проблема. Идеалните показатели, разбира се, трудно се постигат, но могат да бъдат подобрени. И един от тези съвети ми се наби в очите.  Оказа се, че изображенията създават значително натоварване на блога ми. Да, имам много от тях, особено скрийншотите в инструкциите по инсталиране на кодовете. Въпреки че ги оптимизирам преди качването в блога - подрязвам ги в редактор и намалявам теглото им (свивам ги, компресирам ги), когато използвам  Imagecompressor.com. Понякога теглото им се намалява наполовина, или дори с 60 или 80%. Но това не решава напълно проблема. Така че, в съветите на Google научих за Lazy Load (плавно, мързеливо, зареждане) на скрити изображения.

Lazy Load е моментът, когато изображенията, вградени в публикацията, не се зареждат веднага и едновременно при отваряне на страницата на блога, а постепенно, едно след друго, чак когато курсора на потребителя стигне до тях. По този начин се оптимизира натоварването на страницата, намалява се броят на едновременните заявки към базата данни, а блогът като цяло се зарежда по-бързо.

За да инсталирате скрипта, копирайте го и следвайте тези инструкции:

➤Направете резервно копие на темата;

➤Отворете от редактора раздел Тема;

➤Отворете Редактиране на HTML кода;

➤Намерете затварящия таг </body>;

➤Точно пред него инсталирайте следния скрипт;

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

(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:"",effect:"fadeIn",threshold:"0"})});

//]]>

</script>

Вградих скрипта в темата на блога си и направих проверка за скоростта на зареждане с два инструмента.

Използвах gtmetrix.com и получих този резултат, който донякъде ме удовлетвори.

После използвах и Google PageSpeed, и ето резултатите.

За настолни компютри

За мобилни устройства

Съветът ми към вас е да направите същото. Колкото и малко да са изображенията във вашия блог.

За да проверите скоростта на зареждане на вашите блогове моля, използвайте моите Инструменти от главното меню. От страницата изберете Google PageSpeed или Gtmetrix, а може да пробвате и двата инструмента. 

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на: