Cara Mempercepat Blog Dengan Lazy Load dan Image Slash

Jagoandzgn.com - Dalam mengatur kecepatan suatu blog pastinya kamu harus mengatur expires header atau leverage browser chaching, dalam masalah ini sudah menjadi masalah umum untuk para publisher. Dalam mengatasinya pun sangat sulit, tapi itu memang tidak bisa untuk diatasi. Karena blogger merupakan produk pihak Google, maka status kita cuman bisa turut dan tentu kita tidak bisa mengatasinya dengan sendiri.

Apa Itu Cache ?

Cache adalah sebuah jejak pertama pengunjung kali membuka blog kamu, browser akan melakukan beberapa permintaan untuk mendownload dan mencrawl seluruh isi konten dari blog kamu. Bisa dibilang sebuah file simpanan dalam cache yang nantinya akan dipanggil oleh cache browser.

Cache ini bisa dijelaskan untuk meringankan blog kalian, dikarenakan browser tidak terus-terusan request file keserver asli. apabila kamu tidak menggunakan lazy load ini maka visitor akan mendownload ulang semua data file langsung dari server, itu tentunya akan membuat loading blog menjadi lambat. di artikel sebelumnya saya telah memberitahukan Apa Itu Lazyload ?.

Cara Mempercepat Blog Dengan Lazy Load Image Slash di Blogger

1. Silahkan kamu login ke Blogger.com dan silahkan kamu masuk ke dashboard blogger.
2. Masuk ke menu TEMA > klik Edit HTML.
3. Cari Kode Tag HTML image <img yang merupakan kode dari thumbnail blog. di setiap blog pasti berbeda – beda, sekiranya codenya seperti ini, dan pasti sedikit mirip.

<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 225, "225:170")'/>

4. Jika sudah, silahkan simak baik-baik cara berikut ini.

• Tambahkan class='lazy' pada tag imagenya.
• Ubah expr:src jadi expr:data-src.
• Tambahkan src dan value nya disi dengan data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII= (value src ini, berbeda dengan tutorial lain, jadi jika animasi loadingnya ingin berjalan silakan ganti dengan value yang ini)
• Dan hasilnya seperti ini.

<img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 225, "225:170")' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII='/>

5. Selanjutnya, silahkan tambah kode Script Lazy Load Gambar dibawah ini tepat DIATAS kode </body>

<script type='text/javascript'>//<![CDATA[
function ignielLazyLoad(){eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u B(){Y(v e=o.1r("B"),t=0;t<e.1q;t++)Q(e[t])&&(e[t].N=e[t].1p("1n-N"))}u Q(e){v t=e.1t();Z t.1x>=0&&t.1w>=0&&t.1v<=(y.1u||o.T.1m)&&t.1k<=(y.1c||o.T.1b)}v b=["\\r\\m\\m\\D\\G\\a\\f\\c\\M\\n\\p\\c\\a\\f\\a\\k","\\h\\f","\\r\\c\\c\\r\\l\\A\\D\\G\\a\\f\\c","\\g\\h\\r\\m","\\p\\l\\k\\h\\g\\g","\\V\\1a\\1e\\R\\h\\f\\c\\a\\f\\c\\M\\h\\r\\m\\a\\m","\\w\\p\\a\\1l\\p\\c\\k\\n\\l\\c","\\r","\\1f\\w\\a\\k\\L\\1j\\a\\g\\a\\l\\c\\h\\k\\W\\g\\g","\\g\\a\\f\\q\\c\\A","\\w\\p\\a\\k\\W\\q\\a\\f\\c","\\c\\a\\p\\c","\\m\\h\\l\\w\\F\\a\\f\\c\\D\\g\\a\\F\\a\\f\\c","\\1i\\h\\m\\L","\\l\\g\\n\\l\\1g","\\p\\l\\k\\h\\g\\g\\1h\\h\\J","\\c\\h\\J","\\q\\a\\c\\S\\h\\w\\f\\m\\n\\f\\q\\R\\g\\n\\a\\f\\c\\1z\\a\\l\\c","\\A\\k\\a\\X","\\a\\1y\\a\\l","\\q\\a\\c\\D\\g\\a\\F\\a\\f\\c\\S\\L\\1F\\m","\\p\\l\\k\\h\\g\\g\\U\\a\\n\\q\\A\\c","\\n\\f\\f\\a\\k\\U\\a\\n\\q\\A\\c","\\J\\k\\a\\G\\a\\f\\c\\V\\a\\X\\r\\w\\g\\c","\\n\\c\\a\\F"];u I(d,j){y[b[0]]?y[b[0]](d,j):y[b[2]](b[1]+d,j)}I(b[3],B),I(b[4],B),o[b[0]](b[5],u(){b[6];Y(v d=o[b[8]](b[7]),j=d[b[9]],s=/1D|1B/i[b[11]](1G[b[10]])?o[b[12]]:o[b[13]],C=u(d,j,s,C){Z(d/=C/2)<1?s/2*d*d*d+j:s/2*((d-=2)*d*d+2)+j};j--;){d[b[1C]](j)[b[0]](b[14],u(d){v j,E=s[b[15]],x=o[b[1A]](/[^#]+$/[b[19]](1H[b[18]])[0])[b[17]]()[b[16]],z=s[b[1d]]-y[b[1s]],O=z>E+x?x:z-E,K=1o,H=u(d){j=j||d;v x=d-j,z=C(x,E,O,K);s[b[15]]=z,K>x&&P(H)};P(H),d[b[1E]]()})}});',62,106,'||||||||||x65|_0x1b5d|x74|_0xdd48x2||x6E|x6C|x6F||_0xdd48x3|x72|x63|x64|x69|document|x73|x67|x61|_0xdd48x4||function|var|x75|_0xdd48x7|window|_0xdd48x8|x68|lazy|_0xdd48x5|x45|_0xdd48x6|x6D|x76|_0xdd48xb|registerListener|x70|_0xdd48xa|x79|x4C|src|_0xdd48x9|requestAnimationFrame|isInViewport|x43|x42|documentElement|x48|x44|x41|x66|for|return|||||||||||x4F|clientWidth|innerWidth|21|x4D|x71|x6B|x54|x62|x53|left|x20|clientHeight|data|900|getAttribute|length|getElementsByClassName|22|getBoundingClientRect|innerHeight|top|right|bottom|x78|x52|20|trident|24|firefox|23|x49|navigator|this'.split('|'),0,{}));} eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('j 4=["\\7\\9\\9\\e\\d\\a\\b\\8\\i\\g\\h\\8\\a\\b\\a\\k","\\f\\c\\7\\9","\\7\\8\\8\\7\\m\\l\\e\\d\\a\\b\\8","\\c\\b\\f\\c\\7\\9"];5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;',23,23,'||||_0xdfb4|window|ignielLazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{}));
//]]></script>

6. Kemudian tambahkan animasi loadingnya. tambahkan kode dibawah ini tepat DIATAS kode ]]></b:skin> atau </style>

.lazy {animation: ignielShine 1s linear infinite;-moz-animation: ignielShine 1s linear infinite;-webkit-animation: ignielShine 1s linear infinite;-o-animation: ignielShine 1s linear infinite;background: #f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.78) 20%,rgba(255,255,255,0) 30%);background-size: 800px 104px;}
.Night .lazy{background:#252931 linear-gradient(to right,rgba(255,255,255,0) 5%,rgb(49,54,64) 20%,rgba(255,255,255,0) 30%);background-size:800px 104px}
@keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-webkit-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-moz-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-webkit-keyframes ignielShine{from{width:0%}to{width:100%}}
@-moz-keyframes ignielShine{from{width:0%}to{width:100%}}
@keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-webkit-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@-moz-keyframes ignielShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes ignielZoom{from{width:0%}to{width:100%}}
@-webkit-keyframes ignielShine{from{width:0%}to{width:100%}}
@-moz-keyframes ignielShine{from{width:0%}to{width:100%}}

7. Kalau sudah silahkan SIMPAN dan Selesai.

Tidak harus gambar thumbnail saja. Selama ada tag image <img, itu bisa di tambahkan.

Gimana mudah bukan bagaimana Cara Mempercepat Blog Dengan Lazy Load Image Slash di Blogger, apabila kamu ada kendala atau error silahkan koment dikolom komentar dibawah ini.