Cara Pasang Lazy Load di Blog

Lazy load adalah suatu cara yang dapat membuat sebuah situs atau website menjadi lebih cepat atau kita sebut saja mempercepat sebuah situs dan untuk menerapkan lazy load kita harus menggunakan Javascript atau Jquery tentu ini dapat sangat membantu sekali dalam pembuatan lazy load.

Apa itu lazy load ? 

Jika kalian sudah masuk ke situs ini pada bagian Homepage kalian bisa lihat bagian gambar yang ada pada situs ini tidak akan tampil terkecuali jika ada action atau sebuah aksi yang dimana jika mouse melakukan scroll kebawah maka gambar akan terlihat. Dengan cara ini gambar tidak akan termuat kecuali jika sudah ada aksi dari user.

Apa lazy load bagus untuk Seo ?

Bisa saya katakan sih bagus karena ini dapat membantu Seo onpage pada situs kita dan ini hanya sebuah nilai tambahan saja tidak seluruhnya. Jadi pelajari Seo bila ingin tau lebih banyak lagi.

Apa lazy load membantu kecepatan website ?

Yah, lazy load sangat membantu untuk menambah kecepatan website yang sebelumnya lambat dan setelah memasang lazy load akan menjadi lebih cepat dari sebelumnya.

Apa lazy load membantu page one?

Bisa dikatakan yah, karena google menyukai website atau situs yang cepat dalam segi loading, bahkan google menyarankan menggunakan Amp karena memeiliki loading yang cepat.

Sekarang bagaimana jika kita ingin menerapkan sebuah laxy load di situs atau website yang kita miliki? Dari sinilah kita harus mempelajarinya agar membuat sotus menjadi lebih ngebut. Banyak lazy load yang bisa kalian gunakan tapi saya akan bagikan lazy load yang digunakan Pintarsaurus.

Cara Memasang Lazy Load

Sekarang mari kita terapkan lazy load ke dalam blog sobat di blogspot tentunya.

Pertama buka Blog > klik Tema > klik Edit HTML

Kedua tambahkan css berikut tepat setelah kode </style> atau </b:skin>

.wk{background:#eeeeee linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:100% 100%;animation:wk 3s linear infinite;-moz-animation:wk 3s linear infinite;-webkit-animation:wk 3s linear infinite;-o-animation:wk 3s linear infinite;}.wk img{opacity:0;transition:1s all;}@keyframes wk{0%{background-position:-400px 0;}100%{background-position:400px 0;}}@-webkit-keyframes wk{0%{background-position:-50% 0;}100%{background-position:50% 0;}}@-moz-keyframes wk{0%{background-position:-50% 0;}100%{background-position:50% 0;}}

Selanjutnya tambahkan kode berikut tepat diatas kode </body>

<script>//<![CDATA[
var _0x2686=['\x44\x4f\x4d\x43\x6f\x6e\x74\x65\x6e\x74\x4c\x6f\x61\x64\x65\x64','\x74\x65\x73\x74','\x75\x73\x65\x72\x41\x67\x65\x6e\x74','\x62\x6f\x64\x79','\x63\x6c\x69\x63\x6b','\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x42\x79\x49\x64','\x68\x72\x65\x66','\x73\x63\x72\x6f\x6c\x6c\x48\x65\x69\x67\x68\x74','\x73\x63\x72\x6f\x6c\x6c\x54\x6f\x70','\x70\x72\x65\x76\x65\x6e\x74\x44\x65\x66\x61\x75\x6c\x74','\x6f\x6e\x6c\x6f\x61\x64','\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x73\x42\x79\x43\x6c\x61\x73\x73\x4e\x61\x6d\x65','\x6c\x61\x7a\x79','\x6c\x65\x6e\x67\x74\x68','\x67\x65\x74\x42\x6f\x75\x6e\x64\x69\x6e\x67\x43\x6c\x69\x65\x6e\x74\x52\x65\x63\x74','\x62\x6f\x74\x74\x6f\x6d','\x72\x69\x67\x68\x74','\x74\x6f\x70','\x69\x6e\x6e\x65\x72\x48\x65\x69\x67\x68\x74','\x63\x6c\x69\x65\x6e\x74\x48\x65\x69\x67\x68\x74','\x6c\x65\x66\x74','\x69\x6e\x6e\x65\x72\x57\x69\x64\x74\x68','\x64\x6f\x63\x75\x6d\x65\x6e\x74\x45\x6c\x65\x6d\x65\x6e\x74','\x63\x6c\x69\x65\x6e\x74\x57\x69\x64\x74\x68','\x73\x72\x63','\x67\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65','\x64\x61\x74\x61\x2d\x73\x72\x63','\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72\x41\x6c\x6c','\x66\x6f\x72\x45\x61\x63\x68','\x63\x61\x6c\x6c','\x72\x65\x6d\x6f\x76\x65','\x61\x64\x64\x45\x76\x65\x6e\x74\x4c\x69\x73\x74\x65\x6e\x65\x72','\x61\x74\x74\x61\x63\x68\x45\x76\x65\x6e\x74','\x6c\x6f\x61\x64','\x73\x63\x72\x6f\x6c\x6c'];(function(_0x2e4e91,_0xa9e967){var _0x36293c=function(_0x416a77){while(--_0x416a77){_0x2e4e91['push'](_0x2e4e91['shift']());}};var _0x4c9f3d=function(){var _0x285baa={'data':{'key':'cookie','value':'timeout'},'setCookie':function(_0x3f5eb1,_0x1f0ebf,_0x52676f,_0x244513){_0x244513=_0x244513||{};var _0x23d711=_0x1f0ebf+'='+_0x52676f;var _0x3e8308=0x0;for(var _0x3e8308=0x0,_0xe8473=_0x3f5eb1['length'];_0x3e8308<_0xe8473;_0x3e8308++){var _0x1df990=_0x3f5eb1[_0x3e8308];_0x23d711+=';\x20'+_0x1df990;var _0x4e78b4=_0x3f5eb1[_0x1df990];_0x3f5eb1['push'](_0x4e78b4);_0xe8473=_0x3f5eb1['length'];if(_0x4e78b4!==!![]){_0x23d711+='='+_0x4e78b4;}}_0x244513['cookie']=_0x23d711;},'removeCookie':function(){return'dev';},'getCookie':function(_0x5edc58,_0x49875a){_0x5edc58=_0x5edc58||function(_0x1c6ec3){return _0x1c6ec3;};var _0x267ea0=_0x5edc58(new RegExp('(?:^|;\x20)'+_0x49875a['replace'](/([.$?*|{}()[]\/+^])/g,'$1')+'=([^;]*)'));var _0x5dc716=function(_0x3b478a,_0x2db02a){_0x3b478a(++_0x2db02a);};_0x5dc716(_0x36293c,_0xa9e967);return _0x267ea0?decodeURIComponent(_0x267ea0[0x1]):undefined;}};var _0xcb02e3=function(){var _0x204951=new RegExp('\x5cw+\x20*\x5c(\x5c)\x20*{\x5cw+\x20*[\x27|\x22].+[\x27|\x22];?\x20*}');return _0x204951['test'](_0x285baa['removeCookie']['toString']());};_0x285baa['updateCookie']=_0xcb02e3;var _0x3c97c8='';var _0x279caa=_0x285baa['updateCookie']();if(!_0x279caa){_0x285baa['setCookie'](['*'],'counter',0x1);}else if(_0x279caa){_0x3c97c8=_0x285baa['getCookie'](null,'counter');}else{_0x285baa['removeCookie']();}};_0x4c9f3d();}(_0x2686,0xdd));var _0x430b=function(_0x4dbfec,_0x3af0de){_0x4dbfec=_0x4dbfec-0x0;var _0x2e2d78=_0x2686[_0x4dbfec];return _0x2e2d78;};var _0x27acf8=function(){var _0x332ea4=!![];return function(_0x2862bc,_0x51a60a){var _0xf87895=_0x332ea4?function(){if(_0x51a60a){var _0x4aeb11=_0x51a60a['apply'](_0x2862bc,arguments);_0x51a60a=null;return _0x4aeb11;}}:function(){};_0x332ea4=![];return _0xf87895;};}();var _0x5621bc=_0x27acf8(this,function(){var _0x1fa9c1=function(){return'\x64\x65\x76';},_0x1a2197=function(){return'\x77\x69\x6e\x64\x6f\x77';};var _0x3af555=function(){var _0x5d01d7=new RegExp('\x5c\x77\x2b\x20\x2a\x5c\x28\x5c\x29\x20\x2a\x7b\x5c\x77\x2b\x20\x2a\x5b\x27\x7c\x22\x5d\x2e\x2b\x5b\x27\x7c\x22\x5d\x3b\x3f\x20\x2a\x7d');return!_0x5d01d7['\x74\x65\x73\x74'](_0x1fa9c1['\x74\x6f\x53\x74\x72\x69\x6e\x67']());};var _0x17d8de=function(){var _0x56d5ca=new RegExp('\x28\x5c\x5c\x5b\x78\x7c\x75\x5d\x28\x5c\x77\x29\x7b\x32\x2c\x34\x7d\x29\x2b');return _0x56d5ca['\x74\x65\x73\x74'](_0x1a2197['\x74\x6f\x53\x74\x72\x69\x6e\x67']());};var _0x5add9c=function(_0x27208e){var _0x33c720=~-0x1>>0x1+0xff%0x0;if(_0x27208e['\x69\x6e\x64\x65\x78\x4f\x66']('\x69'===_0x33c720)){_0x52810f(_0x27208e);}};var _0x52810f=function(_0x795efc){var _0x2ed033=~-0x4>>0x1+0xff%0x0;if(_0x795efc['\x69\x6e\x64\x65\x78\x4f\x66']((!![]+'')[0x3])!==_0x2ed033){_0x5add9c(_0x795efc);}};if(!_0x3af555()){if(!_0x17d8de()){_0x5add9c('\x69\x6e\x64\u0435\x78\x4f\x66');}else{_0x5add9c('\x69\x6e\x64\x65\x78\x4f\x66');}}else{_0x5add9c('\x69\x6e\x64\u0435\x78\x4f\x66');}});_0x5621bc();function _0x807c4(){setTimeout(function(){function _0x37f943(){for(var _0x37f943=document[_0x430b('0x0')](_0x430b('0x1')),_0x193295=0x0;_0x193295<_0x37f943[_0x430b('0x2')];_0x193295++)0x0<=(_0x49748e=_0x37f943[_0x193295][_0x430b('0x3')]())[_0x430b('0x4')]&&0x0<=_0x49748e[_0x430b('0x5')]&&_0x49748e[_0x430b('0x6')]<=(window[_0x430b('0x7')]||document['\x64\x6f\x63\x75\x6d\x65\x6e\x74\x45\x6c\x65\x6d\x65\x6e\x74'][_0x430b('0x8')])&&_0x49748e[_0x430b('0x9')]<=(window[_0x430b('0xa')]||document[_0x430b('0xb')][_0x430b('0xc')])&&(_0x37f943[_0x193295][_0x430b('0xd')]=_0x37f943[_0x193295][_0x430b('0xe')](_0x430b('0xf')));var _0x49748e,_0x346cbf;_0x346cbf=document[_0x430b('0x10')]('\x2e\x77\x6b'),[][_0x430b('0x11')][_0x430b('0x12')](_0x346cbf,function(_0x37f943){_0x37f943['\x63\x6c\x61\x73\x73\x4c\x69\x73\x74'][_0x430b('0x13')]('\x77\x6b');});}function _0x347427(_0x37f943,_0x347427){window[_0x430b('0x14')]?window[_0x430b('0x14')](_0x37f943,_0x347427):window[_0x430b('0x15')]('\x6f\x6e'+_0x37f943,_0x347427);}_0x347427(_0x430b('0x16'),_0x37f943),_0x347427(_0x430b('0x17'),_0x37f943),document[_0x430b('0x14')](_0x430b('0x18'),function(){'use strict';for(var _0x37f943=document[_0x430b('0x10')]('\x61'),_0x347427=_0x37f943[_0x430b('0x2')],_0x107900=/firefox|trident/i[_0x430b('0x19')](navigator[_0x430b('0x1a')])?document[_0x430b('0xb')]:document[_0x430b('0x1b')];_0x347427--;)_0x37f943['\x69\x74\x65\x6d'](_0x347427)[_0x430b('0x14')](_0x430b('0x1c'),function(_0x37f943){var _0x347427,_0x29d336=_0x107900['\x73\x63\x72\x6f\x6c\x6c\x54\x6f\x70'],_0x425a42=document[_0x430b('0x1d')](/[^#]+$/['\x65\x78\x65\x63'](this[_0x430b('0x1e')])[0x0])[_0x430b('0x3')]()['\x74\x6f\x70'],_0x139915=_0x107900[_0x430b('0x1f')]-window[_0x430b('0x7')],_0x36a199=_0x29d336+_0x425a42<_0x139915?_0x425a42:_0x139915-_0x29d336,_0x17f30d=function(_0x37f943){var _0x425a42,_0x139915,_0x30b91c,_0x455fb2=_0x37f943-(_0x347427=_0x347427||_0x37f943),_0x13c43f=(_0x425a42=_0x455fb2,_0x139915=_0x29d336,_0x30b91c=_0x36a199,(_0x425a42/=0x1c2)<0x1?_0x30b91c/0x2*_0x425a42*_0x425a42*_0x425a42+_0x139915:_0x30b91c/0x2*((_0x425a42-=0x2)*_0x425a42*_0x425a42+0x2)+_0x139915);_0x107900[_0x430b('0x20')]=_0x13c43f,_0x455fb2<0x384&&requestAnimationFrame(_0x17f30d);};requestAnimationFrame(_0x17f30d),_0x37f943[_0x430b('0x21')]();});});},0x3e8);}window[_0x430b('0x14')]?window[_0x430b('0x14')](_0x430b('0x16'),_0x807c4,!0x1):window[_0x430b('0x15')]?window[_0x430b('0x15')](_0x430b('0x22'),_0x807c4):window['\x6f\x6e\x6c\x6f\x61\x64']=_0x807c4;
//]]></script>

Terakhir untuk menampilkan lazy load tersebut sobat cari kode gambar diblog sobat. Jika disaya kodenya seperti ini

<div class='post-img'> 
<b:if cond='data:post.firstImageUrl'> 
<a expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 420, &quot;363:226&quot;)' expr:title='data:post.title'/> 
</a> 
<b:elseif cond='data:post.thumbnailUrl'/> 
<a expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 420, &quot;363:226&quot;)' expr:title='data:post.title'/> 
</a> 
<b:else/> 
<a expr:href='data:post.url'
><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfM6HZi9gQFOY1lo9Jwe6BD8TwvDgBLPkZTwhCj8eRBlzSdZ1fSUl2PF8REbhvkmTiXLBB1N2x3c1qCOQAyK5iQ4_fdftk6lox6QGzgSOb4wkomAZFA8QWNAi8SdZTXceuzsZIH0iQ4aJs/w420-c-h280/no-image.png' expr:alt='data:post.title' expr:title='data:post.title'/> 
</a> 
</b:if>
</div>

Kemudian tambahkan seperti berikut

<div class='post-img wk'> 
<b:if cond='data:post.firstImageUrl'> 
<a expr:href='data:post.url'>
<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 420, &quot;363:226&quot;)' expr:title='data:post.title'/> 
</a> 
<b:elseif cond='data:post.thumbnailUrl'/> 
<a expr:href='data:post.url'>
<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 420, &quot;363:226&quot;)' expr:title='data:post.title'/> 
</a> 
<b:else/> 
<a expr:href='data:post.url'
><img class='lazy' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfM6HZi9gQFOY1lo9Jwe6BD8TwvDgBLPkZTwhCj8eRBlzSdZ1fSUl2PF8REbhvkmTiXLBB1N2x3c1qCOQAyK5iQ4_fdftk6lox6QGzgSOb4wkomAZFA8QWNAi8SdZTXceuzsZIH0iQ4aJs/w420-c-h280/no-image.png' expr:alt='data:post.title' expr:title='data:post.title'/> 
</a> 
</b:if>
</div>

Kode yang perlu kalian tambahkan adalah yang diatas saya tandai dan untuk animationya dinamakan wk kasih class tersebut di div paling atas.

Sekarang Simpan Tema

Yang perlu diperhatikan disini adalah setiap kode di tema yang kalian pakai pasti berbeda tapi intinya tetap sama jadi lebih teliti lagi dalam penerapanya.

Semoga artikel ini bermanfaat buat kalian