Cara Mempercepat Loading Pada Blog

Foto: pixabay.com

Pada kesempatan kali ini saya akan berbagi pengetahuan tentang bagaimana cara mempercepat loading pada sebuah Blog. Kecepatan sebuah loading pada blog adalah salah satu faktor penentu lama tidaknya pengunjung berada di blog kamu. Bagi visitor (pengunjung) yang ingin mencari sesuatu yang ingin dia cari pada sebuah artikel, tentunya mereka menginginkan kecepatan berselancar dalam pencariannya. Mereka akan begitu sangat kesal jika harus menunggu lama hanya untuk membuka satu buah artikel saja.

Disini saya akan memberikan dua cara mempercepat loading pada blog ataupun website kamu.

1. Menggunakan Webp

Webp adalah format gambar yang sudah lama dikembangkan oleh Google. Webp sendiri dapat mengkompresi format gambar yang berekstensi jpeg ataupun png. Dengan menggunakan webp, ukuran file gambar pada sebuah web atau blog diklaim berukuran 25% hingga 34% lebih kecil dibandingkan jika kamu menggunakan file gambar dengan format jpeg ataupun png. Tapi walaupun dapat memperkecil ukuran file pada sebuah gambar, kualitas gambar dari format webp ini, tetap memiliki kualitas gambar yang baik. Karena webp menggunakan metode kompresi lossy dan lossless yang jauh lebih baik ketimbang gambar dengan format jpeg dan png.

Ada banyak aplikasi yang bisa kamu gunakan untuk mengkonversi format gambar menjadi webp. Salah satu contohnya adalah aplikasi Image Converter yang saya gunakan saat ini, karena selain mudah untuk digunakan, hasilnya pun sangat memuaskan, dan yang terpenting cara kerja aplikasi ini begitu cepat.

2. Menggunakan Lazy Load

Selain memperkecil ukuran gambar dengan cara mengubah format gambar seperti yang saya jelaskan diatas, ada juga cara yang bisa kamu pakai, bukan bisa, tapi WAJIB kamu pakai untuk mempercepat loading pada blogmu. Cara kedua itu adalah dengan memasangkan kode Lazy Load pada HTML blogmu.

Ada 3 jenis kode lazy load yang bisa kamu pasang pada blog atau websitemu, yaitu lazy load gambar, lazy load video, dan lazy load adsense. Tapi khusus untuk lazy load adsense, bisa kamu gunakan jika blogmu sudah menampilkan iklan. Dan untuk lazy load video pun bisa kamu pasang jika pada blog atau websitemu ada video yang kamu sematkan. Tapi kalau lazy load gambar, saya rasa semua blog memiliki gambar, jadi untuk lazy load gambar ini harus kamu pasang di blogmu.

Berikut akan saya berikan ketiga kode html/javascript lazy load yang bisa kamu gunakan pada blogmu.

Untuk cara pemasangannya, kamu harus meletakkannya tepat diatas kode </body> pada menu edit html yang ada di blogmu. Kode tersebut biasanya terdapat di tempat paling bawah kode html blog.

Kode HTML Lazy Load Gambar:

func ion downloadJSA Onload() {

var elemen = documen .crea eElemen ("scrip ");

elemen .src = "h ps://pagead2.googlesyndica ion.com/pagead/js/adsbygoogle.js";

documen .body.appendChild(elemen );

}

if (window.addEven Lis ener)

window.addEven Lis ener("load", downloadJSA Onload, false);

else if (window.a achEven )

window.a achEven ("onload", downloadJSA Onload);

else window.onload = downloadJSA Onload;

</scrip >

Atau kamu bisa juga menggunakan kode Lazy Load gambar dibawah ini ( pilih salah satu aja kode lazy load gambarnya ya..):

//<![CDATA[

(func ion(a){a.fn.lazyload=func ion(b){var c={ hreshold:0,failurelimi :0,even :"scroll",effec :"show",con ainer:window};if(b){a.ex end(c,b)}var d= his;if("scroll"==c.even ){a(c.con ainer).bind("scroll",func ion(b){var e=0;d.each(func ion(){if(a.above he op( his,c)||a.lef ofbegin( his,c)){}else if(!a.below hefold( his,c)&&!a.righ offold( his,c)){a( his). rigger("appear")}else{if(e++>c.failurelimi ){re urn false}}});var f=a.grep(d,func ion(a){re urn!a.loaded});d=a(f)})} his.each(func ion(){var b= his;if(undefined==a(b).a r("original")){a(b).a r("original",a(b).a r("src"))}if("scroll"!=c.even ||undefined==a(b).a r("src")||c.placeholder==a(b).a r("src")||a.above he op(b,c)||a.lef ofbegin(b,c)||a.below hefold(b,c)||a.righ offold(b,c)){if(c.placeholder){a(b).a r("src",c.placeholder)}else{a(b).removeA r("src")}b.loaded=false}else{b.loaded= rue}a(b).one("appear",func ion(){if(! his.loaded){a("<img />").bind("load",func ion(){a(b).hide().a r("src",a(b).a r("original"))[c.effec ](c.effec speed);b.loaded= rue}).a r("src",a(b).a r("original"))}});if("scroll"!=c.even ){a(b).bind(c.even ,func ion(c){if(!b.loaded){a(b). rigger("appear")}})}});a(c.con ainer). rigger(c.even );re urn his};a.below hefold=func ion(b,c){if(c.con ainer===undefined||c.con ainer===window){var d=a(window).heigh ()+a(window).scrollTop()}else{var d=a(c.con ainer).offse (). op+a(c.con ainer).heigh ()}re urn d<=a(b).offse (). op-c. hreshold};a.righ offold=func ion(b,c){if(c.con ainer===undefined||c.con ainer===window){var d=a(window).wid h()+a(window).scrollLef ()}else{var d=a(c.con ainer).offse ().lef +a(c.con ainer).wid h()}re urn d<=a(b).offse ().lef -c. hreshold};a.above he op=func ion(b,c){if(c.con ainer===undefined||c.con ainer===window){var d=a(window).scrollTop()}else{var d=a(c.con ainer).offse (). op}re urn d>=a(b).offse (). op+c. hreshold+a(b).heigh ()};a.lef ofbegin=func ion(b,c){if(c.con ainer===undefined||c.con ainer===window){var d=a(window).scrollLef ()}else{var d=a(c.con ainer).offse ().lef }re urn d>=a(b).offse ().lef +c. hreshold+a(b).wid h()};a.ex end(a.expr[":"],{"below- he-fold":"$.below hefold(a, { hreshold : 0, con ainer: window})","above- he-fold":"!$.below hefold(a, { hreshold : 0, con ainer: window})","righ -of-fold":"$.righ offold(a, { hreshold : 0, con ainer: window})","lef -of-fold":"!$.righ offold(a, { hreshold : 0, con ainer: window})"})})(jQuery);$(func ion(){$("img").lazyload({placeholder:"h ps://4.bp.blogspo .com/-oA8G9 61JXk/V Lr kAzObI/AAAAAAAAFTY/EjT6jl2MEFM/s1600/bloggerss and.gif",effec :"fadeIn", hreshold:"-50"})});//]]>

</scrip >

Kode HTML Lazy Load Video:

//<![CDATA[

/*! llyv.js v0.1.0 */

!func ion(){"use s ric ";for(var =documen .querySelec orAll(".llyv"),e=0;e< .leng h;e++){var i=documen .crea eElemen ("div");i.className="llyv-play-b n", [e].appendChild(i);var l=documen .crea eElemen ("img");l.src="h ps://img.you ube.com/vi/"+ [e].da ase .id+"/hqdefaul .jpg", [e].appendChild(l), [e].addEven Lis ener("click",func ion(){var =documen .crea eElemen ("iframe");for( .se A ribu e("src","h ps://www.you ube.com/embed/"+ his.da ase .id+"?rel=0&showinfo=0&au oplay=1"), .se A ribu e("frameborder","0"), .se A ribu e("allowfullscreen",""); his.firs Child;) his.removeChild( his.firs Child); his.appendChild( )})}}();

//]]>

</scrip >

Kode HTML Lazy Load Adsense:

//<![CDATA[

var lazyadsense = false;

window.addEven Lis ener("scroll", func ion(){

if ((documen .documen Elemen .scrollTop != 0 && lazyadsense === false) || (documen .body.scrollTop != 0 && lazyadsense === false)) {

(func ion() { var ad = documen .crea eElemen ('scrip '); ad. ype = ' ex /javascrip '; ad.async = rue; ad.src = 'h ps://pagead2.googlesyndica ion.com/pagead/js/adsbygoogle.js'; var sc = documen .ge Elemen sByTagName('scrip ')[0]; sc.paren Node.inser Before(ad, sc); })();

lazyadsense = rue;

}

}, rue)

//]]>

</scrip >

Itulah tadi kode-kode html lazy load yang bisa kamu sematkan pada blogmu.

Dengan kedua cara diatas, maka bisa dipastikan performa blogmu akan jauh lebih baik. Untuk melihat perbedaannya, sebelum dan sesudah menggunakan kedua cara diatas, kamu bisa melihatnya dengan menggunakan Tools GTmetrix atau tools lainnya yang biasa kamu gunakan.

Sekian dulu tutorial ini, apabila ada yang kurang jelas, silahkan tanyakan pada kolom komentar. Terima kasih

CEK JUGA VIDEO TUTORIALNYA DISINI