Mempercepat Loading Blog Dengan Menambahkan Lazy Load Youtube

Mempercepat Loading  Blog Dengan Menambahkan Lazy Load Youtube - Pernahkah anda memasukkan video YouTube kedalam Blog atau meng-embed kode YouTube tersebut ke dalam halaman Blog. Jika, pernah pasti akan menemukan beberapa hal seperti tampilan atau ukuran tidak responsive, serta membuat loading Blog menjadi berat. Pastinya itu akan membuat visitor atau pengunjung tidak betah dan akan kabur. Terus bagaimana cara mengatasinya ?

Bagi kalian yang menemui masalah seperti diatas, maka anda datang pada halaman yang tepat. Karena admin akan memberikan solusi terhadap permasalahan tersebut, namanya adalah script kode Lazy Load. Script ini akan membuat video yang anda masukkan kedalam blog akan menjadi ringan, responsive mengikuti ukuran halaman serta video akan muncul setelah pengunjung anda meng-klik video tersebut.

Oiya, kode scipt ini tidak hanya berlaku bagi Blog tetapi daat juga di terapkan ke Wordpress, Opencart dan lain-lain. Jadi Lazy Load YouTube ini akan mempermudah anda dalam measukkan video Youtube ke dalam blog, karena hanya mengambil kode alamatnya saja. Oiya, saya mendapatkan kode script ini di website mbak Igniel dan kali ini saya akan membagikannya kepada kalian.

Bagi kalian yang penasaran dan tertarik untuk menerapkan script Lazy Load YouTube pada blog atau website anda, maka ada baiknya mengikuti langkah-langkah dari admin di bawah ini :

• Tentunya anda harus login aatau masuk pada dashboard blogger
• Pilih menu tema
• Kemudian cari dan klik tombol Edit HTML
• Setelah itu, pada halaman HTML cari kode ]]></b:skin>
• Copy kode CSS dibawah ini untuk membuat tampilan responsive :

/* Youtube Lazy Load by igniel.com */
.ignielYTlazy {
  background-color: #000;
  margin-bottom: 30px;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}
.ignielYTlazy img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 0.7;
}
.ignielYTlazy .button {
  width: 68px;
  height: 48px;
  background-color: #333;
  opacity: .8;
  box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
  z-index: 1;
  border-radius: 12px;
}
.ignielYTlazy .button:before {
  content: "";
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent #fff;
}
.ignielYTlazy img,
.ignielYTlazy .button {
  cursor: pointer;
}
.ignielYTlazy img,
.ignielYTlazy iframe,
.ignielYTlazy .button,
.ignielYTlazy .button:before {
  position: absolute;
}
.ignielYTlazy .button,
.ignielYTlazy .button:before {
  top: 50%;
  left: 50%;
  transform: translate3d( -50%, -50%, 0 );
}
.ignielYTlazy iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

• Tempel atau pastekan tepat diatas kode ]]></b:skin>
• Setelah itu cari kode </body> biasanya ada di bagian paling bawah
• Kemudian copy script dibawah ini :

<script> //<![CDATA[
/* Youtube Lazy Load by igniel.com */
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}('H b=["\\w\\c\\c\\e\\u\\B\\k\\k\\g\\l\\t\\p\\r\\h\\j\\c\\j\\s\\a\\p\\f\\h\\l\\k\\P\\g\\k","\\a\\l\\s\\a\\m","\\m\\d\\c\\d","\\k","\\p\\Q\\e\\t","\\G\\d\\m\\a\\O\\o","\\u\\i\\f","\\d\\c\\c\\i","\\d\\e\\e\\a\\o\\m","","\\w\\c\\l\\n","\\d\\e\\e\\a\\o\\m\\E\\h","\\V\\g\\G\\i\\d\\l\\a\\U","\\g\\t\\o\\g\\a\\n\\C\\h\\j\\c\\j\\s\\a","\\w\\c\\c\\e\\u\\B\\k\\k\\z\\z\\z\\p\\r\\h\\j\\c\\j\\s\\a\\p\\f\\h\\l\\k\\a\\l\\s\\a\\m\\k","\\d\\f\\f\\a\\n\\a\\i\\h\\l\\a\\c\\a\\i\\x\\v\\d\\j\\c\\h\\e\\n\\d\\r\\x\\v\\a\\o\\f\\i\\r\\e\\c\\a\\m\\y\\l\\a\\m\\g\\d\\x\\v\\t\\r\\i\\h\\u\\f\\h\\e\\a\\x\\v\\e\\g\\f\\c\\j\\i\\a\\y\\g\\o\\y\\e\\g\\f\\c\\j\\i\\a","\\f\\n\\g\\f\\J","\\a\\d\\f\\w","\\p\\g\\t\\o\\g\\a\\n\\C\\E\\n\\d\\Z\\r"];A X(F){$(b[S])[b[W]](A(){H D=b[0]+$(q)[b[2]](b[1])+b[3]+F+b[4];$(q)[b[8]]($(K N())[b[7]](b[6],D)[b[5]]());$(q)[b[R]](A(){$(q)[b[10]](b[9]);$(b[12],{T:b[13],Y:b[14]+$(q)[b[2]](b[1]),I:0,L:b[15],M:b[9]})[b[11]]($(q))})})}',62,68,'||||||||||x65|_0x429b|x74|x61|x70|x63|x69|x6F|x72|x75|x2F|x6D|x64|x6C|x6E|x2E|this|x79|x62|x67|x73|x20|x68|x3B|x2D|x77|function|x3A|x59|_0xc7dex3|x54|_0xc7dex2|x66|var|frameborder|x6B|new|allow|allowfullscreen|Image|x49|x76|x6A|16|18|id|x3E|x3C|17|ignielYTlazy|src|x7A||||||'.split('|'),0,{}));
!function() {
  ignielYTlazy('sddefault');
}(jQuery);
//]]> </script>

• Lalu pastekan tepat diatas kode </body> 
• Setelah itu klik tombol simpan.

Sampai disini script kodenya sudah dapat digunakan, lantas bagaimana cara memanggil atau menerapkannya pada halaman artikel ? berikut tata cara atau langkah-langkahnya.

• Buat entri post baru layaknya membuat sebuah artikel
• Masukkan judul artikel
• Ubah tipe halaman dari Compose menjdai HTML
• Kemudian copy script kode HTML berikut :

<div class="ignielYTlazy" data-embed="Jo-f_cl8x1s">
  <span class="button"></span>
</div>

• Pastekan kode tersebut padal laman HTML tadi

Ingat !!, kode yang saya tandai warna kuning tersebut merupakan kode alamat dari video YouTube saya. Jadi, ganti dengan alamat kode video YouTube kalian misalnya kode channel kalian seperti di bawah ini :

https://www.youtube.com/watch?v=Jo-f_cl8x1s atau https://youtu.be/Jo-f_cl8x1s

Maka kalian hanya perlu mengambil seperti kode yang saya tandai dengan warna biru cerah.

• Setelah itu silahkan publikasikan, dan lihat vasilnya dengan membuka view artikel anda.

Cukup sekian dari pembahasan admin mengenai mempercepat loading blog dengan menambahkan kode script lazy load youtube. Kurang dan lebihnya mohon dimaafkan dan apabila ada yang kurang jelas, maka anda dapat menuliskan di kolom komentar atau melihat video berikut.

Berbagi :