Add Lazy Loading Images In Blogger

Lazy Loading Images

Defer Offscreen Images Problem Can Be Solved By Adding Lazy Loading Images In Blogger And HTML Page.

Page Speed Is One Of The Factors That Affects Page Ranking. You Might Find It Weird That Delays In Seconds Result In A Loss Of Number Of Visitors. Consider You Page Has 2nd Position In The Google Search If Your Page Speed Is Very Low, Visitors Might Wait For Some Time Then Bounce Back. Bouncing Back Can Decrease Your Page Rank In Search Result.

In A Page There Are Numbers Of CSS, JavaScript, Images, Videos, Etc. CSS And JavaScript Can Be Eliminated By Changing The Head And Body Tags But For Images There Is No Option. When A Page Loads All The Images Gets Loaded At The Same Time Even Though The Visitor Scroll Down or Not !!!. You Might Compress The Images Using Tinypng Or Tinyjpg But Sometimes Compressing The Images Cannot Solve Our Problem.

To Overcome This Problem In Blogger And A HTML Page You Can Use A JavaScript To Defer Offscreen Images. This Script Will Load The Images Only When You Scroll Towards The Image. The Video At The End Of Post, Demonstrate The Use And Implementation Of Lazy Load JavaScript. The Script Is Available Below.

<script type='text/javascript'>
//<![CDATA[
const _0xce27=['forEach','querySelectorAll','IntersectionObserver','target','remove','DOMContentLoaded','observe','slice','dataset','unobserve','src','call'];(function(_0x45695d,_0xce273f){const _0x2d1373=function(_0x5639fc){while(--_0x5639fc){_0x45695d['push'](_0x45695d['shift']());}};_0x2d1373(++_0xce273f);}(_0xce27,0x187));const _0x2d13=function(_0x45695d,_0xce273f){_0x45695d=_0x45695d-0x0;let _0x2d1373=_0xce27[_0x45695d];return _0x2d1373;};document['addEventListener'](_0x2d13('0xa'),function(){var _0x4fa9ec=[][_0x2d13('0x0')][_0x2d13('0x4')](document[_0x2d13('0x6')]('img.lazy'));if(_0x2d13('0x7')in window){let _0x4c83f3=new IntersectionObserver(function(_0x3ad8d9,_0x2f0c28){_0x3ad8d9[_0x2d13('0x5')](function(_0x1ef53b){if(_0x1ef53b['isIntersecting']){let _0x85cc0b=_0x1ef53b[_0x2d13('0x8')];_0x85cc0b[_0x2d13('0x3')]=_0x85cc0b[_0x2d13('0x1')][_0x2d13('0x3')],_0x85cc0b['classList'][_0x2d13('0x9')]('lazy'),_0x4c83f3[_0x2d13('0x2')](_0x85cc0b);}});});_0x4fa9ec[_0x2d13('0x5')](function(_0x2e1205){_0x4c83f3[_0x2d13('0xb')](_0x2e1205);});}});
//]]>
</script>

Copy

Copy The Above Script, Paste It In A HTML Gadget Or Paste It Above </body> Tag. Make Sure You Add class="lazy" To Each Image Tags And Change "scr" To "data-scr". Watch The Youtube Video At The End Of This Post For Better Understanding.

Here Are Some Images And Videos That Depicts The Working Of This Script. Gradually By Using This Script My Homepage And Post Page Speed Also Increased. Although It Is Already 96% But Changed To 99% After Using Lazy Load JavaScript For Images.



1] In The Below Image, You Can See Only One Image Is Loaded i.e Image Below Default.jpg.



2] When I Further Scroll Down The Second Image Got Loaded.



3] At Last, The Third Image Got Loaded. You Can See The Waterfall For More Clarity.