Cara Mempercepat Blog Dengan Lazy Load dan Image Slash di Blogger - noerway.my.id

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 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 yang lainnya saya telah memberitahukan Apa Itu Lazyload ?.

Bagaimana Cara Mempercepat Blog Dengan Lazy Load Image Slash di Blogger

1. Silahkan anda login ke Blogger.com dan silahkan kamu masuk ke dashboard blogger.

2. Masuk ke menu TEMA kemudian klik Edit HTML.

3. Cari Kode Tag HTML image <img yang merupakan kode dari thumbnail blog. di setiap blog pasti berbeda – beda, kira kira 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.

Ubahexpr: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(newRegExp('\\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. dengan cara menambahkan 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.