Skip to main content

follow us


www.azid.web.id - Cara Optimasi Kecepatan Blog Dengan Lazy Load Image Terbukti Berhasil 100%. Kecepatan blog adalah salah satu hal penting yang perlu sobat perhatikan selain mengisi konten blog dengan teknik SEO agar blog sobat muncul pada page one. Biasanya untuk menghasilkan kecepatan blog sobat harus optimasi java script eksternal dan image. Kedua hal tersebut merupakan faktor utama yang menjadikan blog sobat lemot lantaran harus meload dan memanggil terlebih dahulu java script atau image tersebut. Untuk java script sendiri ada beberapa yang sering digunakan seperti java script milik google analytics, java script google adsense, java script disqus, css font awesome, dan Jquery. Untuk mengatasi hal tersebut diperlukan trik agar meskipun blog sobat terdapat script tersebut kecepatan blog sobat tetap tidak berkurang. Dalam tutorial blog ini sudah terdapat lazy load adsense untuk menunda reload adsense dan terbukti berhasil, lazy load google analytics untuk menunda reload script google analytics dan terbukti berhasil, serta sudah terdapat script JQuery internal namun dalam tutorial dan tidak tersendiri.

Baca juga: optimasi kecepatan blog dengan lazy load google analytics

Untuk kesempatan kali ini saya akan membahas cara mengatasi gambar agar kecepatan blog semakin cepat. Untuk mengatasi gambar atau image blog yang memiliki ukuran agak besar sehingga blog sobat menjadi berat biasanya dengan mengcompress ukuran gambar akan tetapi hal tersebut kadang kala tidak berhasil dan membuang waktu. Untuk itu, ada sebuah solusi dan trik yang jitu yaitu menggunakan lazy load image. Lazy load image ini berupa script internal yang memiliki kode khusus dan sedikit cara agar blog sobat semakin cepat dengan mengoptimasi gambar saat discroll baru muncul gambar. Lazy load image ini saya peroleh dari kak igniel yang lagi tren dengan templatenya igniplex. Pada tutorial tersebut terdapat script yang sudah di enyscript oleh kak igniel dengan enyscript ganda bahkan multy enyscript menurut saya, jadi sobat tidak akan mengetahui script asli dari script tersebut. Tentunya hal tersebut akan membuat blog sobat kurang profesional bukan?, menurut saya seperti itu.

Baca juga: optimasi kecepatan blog dengan lazy load adsense

Disisi lain, dalam script tersebut juga terdapat embel kata "igniel" yang tentunya menjadikan juga blog sobat kurang profesional. Namun itu semua merupakan copy right atau ciri khas atau juga bisa sebagai label bahwa script lazy load image tersebut buatan kak igniel. Ditambah lagi, menurut saya memang lazy load image milik kak Igniel merupakan lazy load image yang work 100% baik itu digunakan di page speed insight maupun di Gtmetrix. Oleh karena itulah saya sangat merekomendasikan untuk menggunakan lazy load tersebut pada blog sobat. Lantas dengan kata "igniel" bagaimana?, jika sobat ingin menggunakan script tersebut dengan label igniel sobat bisa langsung saja mengunjungi tutorialnya dengan judul "mempercepat blog #3 - pasang script lazy load untuk gambar", akan tetapi jika sobat ingin menghilangkan label "igniel" sobat bisa menyimak triknya disini. Pada script tersebut meskipun sudah dienyscript, akan tetapi ada yang bisa diubah nama scriptnya dan menghilangkan nama kode scriptnya salah satunya adalah yang awalnya igniellazyload bisa diubah dengan lazyload saja. Tentunya hal itu bisa menambah profesionalitas blog kita.

Baik, jika sobat tertarik untuk menjadikan blog sobat lebih cepat atau fast loading dengan script lazy load image, sobat bisa mengikuti tutorialnya dibawah ini:

Pertama, masuklah pada blogger kemudian klik theme dan klik edit HTML.

Kedua, copas kode script berikut dan letakkan tersebut daiatas kode </body>


<script type='text/javascript'>//<![CDATA[
function LazyLoad(){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|LazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{}));
//]]></script>

Ketiga, jika sudah untuk menghindari kesalahan maka sobat bisa Save Template terelebih dahulu dan refresh blog sobat dengan klik F5 atau klik icon panah putar.

Keempat, tetap pada menu edit HTML. Carilah tag <img dan tambahkan kode class='lazy' serta tambahkan pula kata src dengan data-scr kemudian tambahkan pula src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='. Kurang lebih contohnya seperti ini

<img alt='Cara Membuat Lazy Load Image Agar Mempercepat Loading Blog' src='https://4.bp.blogspot.com/-SqW6b0PQcCI/W6f82PaurLI/AAAAAAAAAzU/lj5D6im13D0g7xryz-SkQRLKXUzSlPNpQCLcBGAs/s640/lazy-load.png' height='auto'  title='Cara Membuat Lazy Load Image Agar Mempercepat Loading Blog' width='100%'/>

menjadi

<img alt='Cara Membuat Lazy Load Image Agar Mempercepat Loading Blog' class='lazy' data-src='https://4.bp.blogspot.com/-SqW6b0PQcCI/W6f82PaurLI/AAAAAAAAAzU/lj5D6im13D0g7xryz-SkQRLKXUzSlPNpQCLcBGAs/s640/lazy-load.png' height='auto' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' title='Cara Membuat Lazy Load Image Agar Mempercepat Loading Blog' width='100%'/>

atau seperti dibawah ini

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

Menjadi

<img class='tumbhnail 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,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' />

Lantas bagaimana jika pada tag img sudah terdapat kode class?, sebagaimana pada contoh yang kedua jika sobat menemukan tag img sudah terdapat kode class maka cukup sobat didalam class tekan spasi dan tambahkan kata "lazy" didalamnya seperti class='thumbnail' maka menjadi class='thumbnail lazy'.

Gunakan langkah tersebut hingga semua tag img terdapat kode tersebut.

Terakhir, langkah terakhir adalah  save template sobat.

Apakah langkah membuat lazy load img bisa digunakan pada blog AMP?, dari peraturan AMP menunjukkan bahwa blog AMP tidak bisa menerima java script jadi tidak script lazy load img ini tidak bisa digunakan pada blog AMP harus pada blog NON AMP. Selain itu dikarenakan blog AMP udah teroptimasi kecepatan blognya terutama pada versi mobile.

Demikianlah artikel saya tentang Cara Optimasi Kecepatan Blog Dengan Lazy Load Image Terbukti Berhasil 100%. Semoga bermanfaat, amin.
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar