cara menggunakan deferjs Lazyload Library viomagz
Blog kak Ryan • Putri Writter - Pertumbuhan pengguna internet makin hari makin meningkat ya kak, banyak banget yang berinternetan menggunakan HP android. Melihat pasar pengguna android yang berambah banyak, googlepun nggak tinggal diam, google juga fokus ingin kembangin website yang ramah seluler dalam arti katanya mobile friendly. Serta memberikan user experience yang lebih baik, maksudnya lebih mudah diakses gitu.
Google juga mengeluarkan Amp Page sudah lama sih, halaman amp adalah project besutan google yang membuat halaman lebih cepat diakses pada perangkat seluler. Konsepnya cukup sederhana, yaitu dengan membuat website dengan format bahasa standard amp serta mengurangi penggunaan elemen yang tidak penting.
Akhir-akhir ini, google juga memaksa para web developer agar menyediakan halaman web yang bisa diakses mengggunakan ponsel seluler. Caranya google menggunakan search console yang bisa mengidentifikasi kecepatan muat halaman berdasarkan waktu pengunjung, bila ada halaman yang dimuat cukup lambat maka search console akan mencatat error. Kalau kamu tau, mesinya sama seperti page speed insight milik google tuh..
Error yang ada pada dashboard search console tentu bakalan jadi perhatian para web developer dan kalangan-kalangan blogger lainya termasuk aku sendiri. Alasanya simple, mereka tidak ingin website mereka hilang dari penelusuran google. Makanya mereka nurut sama si mbah google yang penuh akan peraturan.😂
Baca juga :
Dalam kesempatan kali ini aku mau bagi-bagi skrip payload yang bisa merangkai penundaan skrip maupun inframe disaat halaman sedang dimuat. Skrip ini sangat direkomendasikan oleh google, karena bisa membuat halaman web kita dimuat dalam waktu yang cepat.
Loh kok bisa? Jadi gini kak. Ketika halaman sedang dimuat, browser akan merender dan memuat semua konten secara bersamaan dimulai dari bagian atas halaman. Nah tayangan gambar, link javascript, link css, dan iframe akan membuat penundaan yang cukup signifikan karena browser harus mengunduhnya juga. Akibatnya proses loading halaman bisa memakan waktu yang cukup lama, udah lama ditambah lagi browser harus menjalankan javascript wah kalau HPnya kentang bisa mogok si browser tuh. 😅
Nah kira-kira seperti itulah masalahnya. Dengan mengatasi masalah spele mengenai loading halaman bisa membuat orang yang berkunjung ke situs kita lebih nyaman, mereka tidak perlu menunggu lebih lama. Dan juga tidak kabur, biasanya visitor itu kalau halamanya lambat dimuat dia bakalan kabur beralih ke situs web lainya. Sehingga performa website kita jadi buruk dimata google, jadi gagal deh naik ke pageone.
Sekarang gimana? Sudah paham kan. Oke deh sekarang kita lanjut ke pembagian skrip dan cara penggunaanya. Skrip yang aku bagikan kali ini adalah skrip deferjs yang sudah disusun rapih, skrip lengkap dan dokumentasinya ada di github. Ketikan saja di google "Deferjs" dan download versi lengkapnya, dan seperti inilah skrip lazyload deferjsnya. Biar bekerja lebih sempurna tempatkan diantara tag <head> </head>
CSS (source: template LinkMagz mas sugeng)
Cara pasang gambar : HTML
Menjalankan skrip deferjs
Tambahin tag skrip dan letakan dibawah halaman sebelum penutup tag </body>, skrip deferjs bisa juga digunkan untuk menunda pemuatan iframe javascript dan css. Berikut contohnya:
Pada penerapan diatas pada dasarnya kita mengisi atribut (src) dengan gambar mini latar putih yang akan tampil terlebih dahulu. Setelah halaman dimuat barulah browser akan menjalankam skrip deferjs, dimana skrip ini akan mengganti nilai atribut (src) dengan URL gambar asli yang berada pada atribut (data-src), penggantian diikuti dengan menambahkan kelas lazyload dan blur up. Kelas ini akan membuat gambar seperti beranimasi saat muncul.
Penggunaan lain bisa digunakan untuk mendefer skrip eksternal, css, dan iframe. Khusus iframe sama seperti diatas, agar saat iframenya dimuat bisa tampil lebih menarik (tidak kakul) kita tambahkan style animasi dalam kelas shown. Contoh penggunaan bisa kamu lihat pada gambar dibawah:
Penggunaan untuk css, javascript, dan iframe
Hmmm, tapi kali ini aku gak bakalan kasih demonya. Karena emang malas bikin, sebagai gantinya aku bakalan kasih file asli skrip beserta dokumentasinya. Sebenarnya skrip ini sudah banyak tersebar di github, tapi kalau dicari sudah banyak versi cloninganya. Yah banyak yang pake khusus penggunaan sendiri dengan memanfaatkan hosting github. Padahal skrip bisa disematkan secara langsung dalam halaman, walapun tidak efisienn sih.
Unduh Skrip Deferjs.zip
Terimakasih sudah baca dan belajar koding bersama aku, kalau ada waktu nanti aku bakalan bagi-bagi lagi tips seputar koding HTML, Javascript. Tapi kalau mod bagus ya, soalnya aku juga males bikin gituan. Buat bikin artikel ini aja aku belajar menyusun kodenya butuh waktu yang lama, kalau nggk salah satu mingguan. Tapi gapapalah, yang penting sama-sama belajar, byeee byee..
Google juga mengeluarkan Amp Page sudah lama sih, halaman amp adalah project besutan google yang membuat halaman lebih cepat diakses pada perangkat seluler. Konsepnya cukup sederhana, yaitu dengan membuat website dengan format bahasa standard amp serta mengurangi penggunaan elemen yang tidak penting.
Akhir-akhir ini, google juga memaksa para web developer agar menyediakan halaman web yang bisa diakses mengggunakan ponsel seluler. Caranya google menggunakan search console yang bisa mengidentifikasi kecepatan muat halaman berdasarkan waktu pengunjung, bila ada halaman yang dimuat cukup lambat maka search console akan mencatat error. Kalau kamu tau, mesinya sama seperti page speed insight milik google tuh..
Error yang ada pada dashboard search console tentu bakalan jadi perhatian para web developer dan kalangan-kalangan blogger lainya termasuk aku sendiri. Alasanya simple, mereka tidak ingin website mereka hilang dari penelusuran google. Makanya mereka nurut sama si mbah google yang penuh akan peraturan.😂
Baca juga :
- Cara membuat iklan melayang Mgid Popup Ads
- Kode Lazyload MGid versi terbaru
- Cara tombol membuat invisible content
Dalam kesempatan kali ini aku mau bagi-bagi skrip payload yang bisa merangkai penundaan skrip maupun inframe disaat halaman sedang dimuat. Skrip ini sangat direkomendasikan oleh google, karena bisa membuat halaman web kita dimuat dalam waktu yang cepat.
Loh kok bisa? Jadi gini kak. Ketika halaman sedang dimuat, browser akan merender dan memuat semua konten secara bersamaan dimulai dari bagian atas halaman. Nah tayangan gambar, link javascript, link css, dan iframe akan membuat penundaan yang cukup signifikan karena browser harus mengunduhnya juga. Akibatnya proses loading halaman bisa memakan waktu yang cukup lama, udah lama ditambah lagi browser harus menjalankan javascript wah kalau HPnya kentang bisa mogok si browser tuh. 😅
Nah kira-kira seperti itulah masalahnya. Dengan mengatasi masalah spele mengenai loading halaman bisa membuat orang yang berkunjung ke situs kita lebih nyaman, mereka tidak perlu menunggu lebih lama. Dan juga tidak kabur, biasanya visitor itu kalau halamanya lambat dimuat dia bakalan kabur beralih ke situs web lainya. Sehingga performa website kita jadi buruk dimata google, jadi gagal deh naik ke pageone.
Sekarang gimana? Sudah paham kan. Oke deh sekarang kita lanjut ke pembagian skrip dan cara penggunaanya. Skrip yang aku bagikan kali ini adalah skrip deferjs yang sudah disusun rapih, skrip lengkap dan dokumentasinya ada di github. Ketikan saja di google "Deferjs" dan download versi lengkapnya, dan seperti inilah skrip lazyload deferjsnya. Biar bekerja lebih sempurna tempatkan diantara tag <head> </head>
<script>
//<![CDATA[
/* shinsenter/defer.js */
!function(e,o,t,n,i,r){function c(e,t){r?n(e,t||32):i.push(e,t)}function f(e,t,n,i){return t&&o.getElementById(t)||(i=o.createElement(e||"SCRIPT"),t&&(i.id=t),n&&(i.onload=n),o.head.appendChild(i)),i||{}}r=/p/.test(o.readyState),e.addEventListener("on"+t in e?t:"load",function(){for(r=1;i[0];)c(i.shift(),i.shift())}),c._=f,e.defer=c,e.deferscript=function(e,t,n,i){c(function(){f("",t,i).src=e},n)}}(this,document,"pageshow",setTimeout,[]),function(s,n){var a="IntersectionObserver",d="src",l="lazied",h="data-",m=h+l,y="load",p="forEach",b="getAttribute",g="setAttribute",v=Function(),I=s.defer||v,c=I._||v;function A(e,t){return[].slice.call((t||n).querySelectorAll(e))}function e(u){return function(e,t,o,r,c,f){I(function(n,t){function i(n){!1!==(r||v).call(n,n)&&((f||["srcset",d,"style"])[p](function(e,t){(t=n[b](h+e))&&n[g](e,t)}),A("SOURCE",n)[p](i),y in n&&n[y]()),n.className+=" "+(o||l)}t=a in s?(n=new s[a](function(e){e[p](function(e,t){e.isIntersecting&&(t=e.target)&&(n.unobserve(t),i(t))})},c)).observe.bind(n):i,A(e||u+"["+h+d+"]:not(["+m+"])")[p](function(e){e[b](m)||(e[g](m,u),t(e))})},t)}}function t(){I(function(t,n,i,o,r){t=A((i="[type=deferjs]")+":not("+(o="[async]")+")").concat(A(i+o)),function e(){if(0!=t){for(o in(i=t.shift()).parentNode.removeChild(i),i.removeAttribute("type"),n=c(i.nodeName),i)"string"==typeof(r=i[o])&&n[o]!=r&&(n[o]=r);n[d]&&!n.hasAttribute("async")?n.onload=n.onerror=e:I(e,.1)}}()},4)}t(),s.deferstyle=function(t,n,e,i){I(function(e){(e=c("LINK",n,i)).rel="stylesheet",e.href=t},e)},s.deferimg=e("IMG"),s.deferiframe=e("IFRAME"),I.all=t}(this,document);
//]]>
</script>Cara menggunakan deferjs
Untuk menggunakan skrip deferjs sangat mudah sekali, misalkan kita mau membuat lazyload gambar. skripnya akan menunda pemuatan gambar beberapa milidetik setelah halaman dimuat sempurna, tapi pada saat gambarnya tidak dimuat kita sembunykan terlebih dahulu menggunakan css, lalu perlahan-lahan kita tampilkan menggunakan atribut animation. Biar gambarnya ada efeknya gitu, tidak kaku langsung muncul hehehe. Kalau ada yang tanya kenapa disembunyikan dulu gambarnya, karena link gambarnya dihapus (src="") jadi gak ada gambar yang akan dimuat.CSS (source: template LinkMagz mas sugeng)
.lazyload,.blur-up{opacity:.3;-webkit-transition:opacity 300ms;transition:opacity 300ms}
.lazyload.shown,.blur-up.lazyloaded{opacity:1}
#header-inner img.lazyload {min-width:160px}
#header-inner img.lazyload.shown {min-width:unset}
Cara pasang gambar : HTML
<img class='lazyload blur-up' alt='Judul Gambar' data-src='https://url-gambar.com/gambarku.jp'' title='Nama Gambar' height='(Angka tinggi pixsel)' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAYSURBVCiRY0xISOBgoAAwUaJ51IBhYwAAuQABOsYCprwAAAAASUVORK5CYII=' width='(Angka Lebar pixsel)'/>Menjalankan skrip deferjs
var media_loaded = function (media) {
media.className += ' shown';
}
deferimg('img.lazyload', 300, 'lazied', media_loaded);
Tambahin tag skrip dan letakan dibawah halaman sebelum penutup tag </body>, skrip deferjs bisa juga digunkan untuk menunda pemuatan iframe javascript dan css. Berikut contohnya:
Pada penerapan diatas pada dasarnya kita mengisi atribut (src) dengan gambar mini latar putih yang akan tampil terlebih dahulu. Setelah halaman dimuat barulah browser akan menjalankam skrip deferjs, dimana skrip ini akan mengganti nilai atribut (src) dengan URL gambar asli yang berada pada atribut (data-src), penggantian diikuti dengan menambahkan kelas lazyload dan blur up. Kelas ini akan membuat gambar seperti beranimasi saat muncul.
Penggunaan lain bisa digunakan untuk mendefer skrip eksternal, css, dan iframe. Khusus iframe sama seperti diatas, agar saat iframenya dimuat bisa tampil lebih menarik (tidak kakul) kita tambahkan style animasi dalam kelas shown. Contoh penggunaan bisa kamu lihat pada gambar dibawah:
Penggunaan untuk css, javascript, dan iframe
<style>
/* Buat animasiin kemunculan iframe */
.lazyiframe {
transition: opacity 600ms ease;
opacity: 0;
}
.lazyiframe.show {
opacity: 1;
}
</style>
<iframe class="video fade"
data-src="https://www.youtube.com/embed/Uz970DggW7E"
width="560" height="315" allowfullscreen
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
<script>
// Menjalankan skrip deferjs
deferscript('https://www.googletagmanager.com/gtag/js?id=UA-148089672-3', 'google-tag', 900);
deferstyle('https://highlightjs.org/static/demo/styles/tomorrow.css', 'highlightjs-css', 1000);
deferscript('https://highlightjs.org/static/highlight.site.pack.js', 'highlightjs-api', 1000, function() {
var code_blocks = [].slice.call(document.querySelectorAll('pre code'));
code_blocks.forEach(function(block) {
hljs.highlightBlock(block);
});
});
// Menunda pemuatan iframe
deferiframe('iframe.video', 100, 'lazied', function(frame) {
frame.onload = function() {
frame.className+=' show';
}
});
</scriptHmmm, tapi kali ini aku gak bakalan kasih demonya. Karena emang malas bikin, sebagai gantinya aku bakalan kasih file asli skrip beserta dokumentasinya. Sebenarnya skrip ini sudah banyak tersebar di github, tapi kalau dicari sudah banyak versi cloninganya. Yah banyak yang pake khusus penggunaan sendiri dengan memanfaatkan hosting github. Padahal skrip bisa disematkan secara langsung dalam halaman, walapun tidak efisienn sih.
Terimakasih sudah baca dan belajar koding bersama aku, kalau ada waktu nanti aku bakalan bagi-bagi lagi tips seputar koding HTML, Javascript. Tapi kalau mod bagus ya, soalnya aku juga males bikin gituan. Buat bikin artikel ini aja aku belajar menyusun kodenya butuh waktu yang lama, kalau nggk salah satu mingguan. Tapi gapapalah, yang penting sama-sama belajar, byeee byee..