InfoRmAsi SepuTaR OjEK OnlinE & TutoRiaL

⬜⬜ MOHON MAAF JIKA ADA KESALAHAN DALAM PENULISAN ⬜ BLOG INI BERISI INFORMASI SEPUTAR DRIVER OJEK ONLINE, INFORMASI TEKNOLOGI, TUTORIAL ANDROID, TUTORIAL BLOGGING, TIPS DAN TRIK 🟥🟥 TERIMA KASIH 🟥🟥

Cara Mempercepat Loading Pada Blog

Lazy load
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.

Menu edit html blogspot


Kode HTML Lazy Load Gambar:

&lt;scrip         ype="    ex    /javascrip    "&gt;
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;
&lt;/scrip    &gt;

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

&lt;scrip     async='async'&gt;
    //&lt;![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)&amp;&amp;!a.righ    offold(    his,c)){a(    his).    rigger("appear")}else{if(e++&gt;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("&lt;img /&gt;").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&lt;=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&lt;=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&gt;=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&gt;=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"})});//]]&gt;
&lt;/scrip    &gt;

Kode HTML Lazy Load Video:

&lt;scrip    &gt;
//&lt;![CDATA[
/*! llyv.js v0.1.0 */
!func    ion(){"use s    ric    ";for(var     =documen    .querySelec    orAll(".llyv"),e=0;e&lt;    .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&amp;showinfo=0&amp;au    oplay=1"),    .se    A        ribu    e("frameborder","0"),    .se    A        ribu    e("allowfullscreen","");    his.firs    Child;)    his.removeChild(    his.firs    Child);    his.appendChild(    )})}}();
//]]&gt;
&lt;/scrip    &gt;

Kode HTML Lazy Load Adsense:

&lt;scrip    &gt;
//&lt;![CDATA[
var lazyadsense = false;
window.addEven    Lis    ener("scroll", func    ion(){
if ((documen    .documen    Elemen    .scrollTop != 0 &amp;&amp; lazyadsense === false) || (documen    .body.scrollTop != 0 &amp;&amp; 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)
//]]&gt;
&lt;/scrip    &gt;

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

0 Response to "Cara Mempercepat Loading Pada Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close