Widget HTML Atas

Cara Memasang Lazy Load File Javascript

Cara Memasang Lazy Load Javascript

Halo sobat, kali ini kamu sedang membaca sebuah tutorial bagaimana cara untuk memuat file JavaScript eksternal secara tidak sinkron - yang membahas tentang lazy loads pada JavaScript, jQuery, dan HTML5 untuk mempercepat load situs web.

Seperti yang sudah kita ketahui, penggunaan JavaScript sudah hampir sangat umum dan wajib untuk sebuah web. Mulai dari fungsionalitas halaman, melacak visitor, kegunaan iklan hingga untuk aset sosial media , dan yah.. JavaScript ada di mana-mana.

JavaScript bisa menurunkan konsumsi resources di server dengan melakukan fungsionalitasnya di sisi klien. Tetapi dari sisi lain, jika pengoptimasiannya kurang tepat, Javascript justru dapat memperlambat situs web juga.

Sebenarnya bukan hanya file JavaScript yang dapat memperlambat sebuah situs web, tetapi ada banyak faktor lain. Dengan kata lain, kita harus menghindari penggunaan JavaScript yang tidak perlu seperti widget yang berat, analytics dari pihak ketiga dan lainnya, serta jika javascript memang dibutuhkan untuk digunakan, seharusnya itu tidak akan terlalu mempengaruhi waktu buka halaman web.

Bagaimana JavaScript bisa memperlambat load sebuah halaman web?

Web browser merender sebuah halaman web dengan membaca markup (pada kasus ini adalah HTML). Jika markup berisi file aset JavaScript eksternal, browser berhenti memuat markup dan lebih mendahulukan untuk pemuatan JavaScript yang dari luar itu terlebih dahulu - inilah yang menyebabkan block dalam proses rendering halaman web (dikenal sebagai render blocking atau parser blocking).

Proses ini terus berulang pada semua file JavaScript yang ada pada sebuah halaman web, dan itu sebabnya kenapa javascript bisa memperlambat load halaman menjadi sangat berat.

Block render juga bisa menyebabkan pemblokiran resources sementara, seperti markup, media (gambar/image, video, dokumen), dan lainnya tidak akan diunduh terlebih dahulu sebelum resource eksternal dapat terunduh semua.

Untuk menghindari block tersebut, block berukuran kecil JavaScript harus ditulis bersamaan didalam markup, dan block yang berukuran besar disimpan dalam file terpisah yang harus dimuat secara asynchronous.

JavaScript asynchronous atau Lazy Load

Situs web yang memiliki waktu load cepat selalu menjadi baik dimata dua pihak: pengguna situs dan mesin pencari. Dan fungsi dari asinkron JavaScript sendiri adalah sebuah cara atau pendekatan untuk dapat membantu loading web yang lebih cepat.

Bagaimana cara kerja lazy load?

Lazy load dapat mempercepat loading sebuah situs web, cara kerjanya adalah asynchronous JavaScript menghindari pemanggilan secara langsung resource file .js dari eksternal dengan menambahkan beberapa baris kode javascript itu sendiri didalam markup ketika web pertama kali dimuat. Script dimuat dengan fungsi JavaScript secara dinamis yaitu dengan membuat elemen <script>, dan menyediakannya src dan atribut lainnya, atau bahasa mudahnya, semua resource javascript yang berasal dari luar yang tidak terlalu urgent untuk ditampilkan ditunda dulu pemuatannya.

Cara memuat file .js secara asynchron

Atribut async berfungsi dengan baik pada browser modern yang ada sekarang ini - contoh browser didukung antara lain :
  • Safari 5+
  • Android 3+
  • Firefox 3.6+
  • Chrome 2+
  • IE 10+
  • iOS 5+
Lalu, bagaimana caranya? Langsung saja simak kode berikut ini :
<script>
  var resource = document.createElement('script'); 
  resource.async = "true";
  resource.src = "http://example.com/script.js";
  var script = document.getElementsByTagName('script')[0];
  script.parentNode.insertBefore(resource, script);
</script>
script di atas berfungsi disemua browser, untuk itu jangan khawatir soal browser apa yang harus dipakai lagi.

Jika ingin kode fungsi async yang lebih baik, lebih rapi, dan efisien kalian bisa menggunakan baris kode dibawah ini:
<script>
window.onload = function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://yourdomain.com/script.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
}
</script>
silahkan dicoba dulu.. semoga berhasil

Cara memuat multi file javascript secara asynchron

Kode diatas merupakan sebuah contoh pemuatan file js yang hanya berguna untuk 1 jenis file saja, jika ingin memuat banyak file, maka kode diatas tidak direkomendasikan untuk dipakai, karena pasti kode akan lebih panjang dan menjadikan kodingan kita kurang rapi. Untuk itu, ada sedikit perubahan kode jika kalian ingin memuat file js lebih dari satu, begini caranya :
<script type="text/javascript">
function script(url) {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = url;
    var x = document.getElementsByTagName('head')[0];
    x.appendChild(s);
}
</script>
Penjelasan: disitu kita buat s.src sebagai sebuah variable untuk menampung url, dan jangan lupa gunakan url sebagai parameter dari functionnya,

Sekarang dengan kode diatas, kita hanya perlu memanggil beberapa baris script saja untuk memanggil functionnya. Contohnya:
<script>script('https://cdn.situs.com/script.js');</script>

Kode diatas juga bisa berlaku untuk pemanggilan file js lebih dari satu, seperti ini:
<script>
script('https://cdn.contohnya.com/app.js');
script('https://cdn.contohnya.com/analytics.js');
script('https://cdn.contohnya.com/raw.js');
</script>

Memasang Lazy Load Menggunakan jQuery

Jika kamu menggunakan library jQuery, dibawah ini adalah kode lazy load yang bisa kamu gunakan untuk memuat file javascript eksternal secara async:
<script>
$.ajax({
  url: 'https://cdn.aws.amazon.com/script.js',
  dataType: 'script',
  cache: true, // or get new, fresh copy on every page load
  success: function() {
    // Callback
  }
});</script>

Okee, cukup itu saja yang bisa saya sampaikan untuk tutorial kali ini, semoga kalian menjadi lebih paham bagaimana cara memasang lazy load javascript secara baik dan benar. Semoga bermanfaat ya!

Oh iya, jika kamu seorang blogger, cara ini bisa kalian juga untuk lazy load pada unit iklan Google Adsense, pemuatan untuk beberapa js bisa ditunda dulu dan sudah saya coba hasilnya memuaskan. Silahkan bereksperimen!

1 komentar untuk "Cara Memasang Lazy Load File Javascript"

  1. wah Terimakasih code lazyloadnya sangat bermanfaat kunjungi kembali site kami ya
    https://www.karawangportal.com/

    BalasHapus

Posting Komentar

Berkomentarlah Dengan Sopan

Adblock Terdeteksi

Mohon matikan plugin Adblock untuk tetap mendukung situs ini berkembang

Disable Adblock & Reload