Lazy loading JavaScript Untuk Meningkatkan Kecepatan Website

DITULIS ARMAN BASIR / DECEMBER 03, 2018

Bagaimana kabar situs anda hari ini, apakah salah satu dari para pengunung website anda sidah ada yang mengeluh dengan lambatnya loading situs atau website anda? Jika belum maka website anda sudah termasuk dalam website yang sangat diminati oleh pengunjung website anda.

Lalu bagaimana dengan anda yang sudah menerima keluhan akan hal di atas, disini kami akan membantu anda dan membuat website anda menjadi lebih cepat. Tetapi sebelumnya berikut sedikit penjelasan JavaScript.

Penggunaan JavaScript sangat umum di web. Mulai dari fungsi situs, pelacakan pengunjung, iklan hingga aset media sosial, kita bisa melihat JavaScript di mana-mana.

JavaScript menurunkan konsumsi sumber daya di server dengan melakukan banyak tugas di sisi klien. Tapi dari perspektif yang berbeda, itu juga memperlambat web.

Bukan hanya file JavaScript yang bertanggung jawab untuk memperlambat situs web, tetapi sejumlah faktor lainnya juga. Yang saya maksudkan di atas adalah bahwa penggunaan JavaScript yang tidak perlu harus dihindari, dan jika digunakan, seharusnya tidak mempengaruhi waktu buka halaman web.

Bagaimana cara Javascript meningkatkan waktu buka halaman?

Peramban web merender laman web dengan membaca markup (HTML). Jika markup berisi file JavaScript eksternal, browser berhenti memuat markup dan mulai mengunduh JavaScript eksternal tersebut - ini menyebabkan pemblokiran dalam pembuatan halaman web (dikenal sebagai pemblokiran render atau pemblokiran parser).

Proses ini terus berulang pada setiap file JavaScript berikutnya di halaman web, dan oleh karena itu, memperlambat halaman ke tingkat yang lebih besar.

Pemuatan Loading atau Asynchronous JavaScript

Pemuatan JavaScript asynchronous adalah satu langkah lebih dekat ke web yang lebih cepat. Perhatikan bahwa pemuatan asynchronous dan loading memiliki arti yang sama dengan referensi ke JavaScript.

Bagaimana async JavaScript meningkatkan kecepatan Situs atau Website?

Asynchronous JavaScript menghindari pemanggilan langsung file .js di markup. Script dimuat oleh fungsi JavaScript dengan secara dinamis membuat elemen <script>, dan menyediakannya src dan atribut lainnya.

HTML 5 Async (Asinkron)

Secara umum file .js dipanggil dalam markup dengan menggunakan syntax berikut.

<script src="https://example.com/script.js"></script>

Dawah ini adalah cara menulis ulang sintaks di atas dengan atribut async: 

<script async src="https://example.com/script.js"></script>

JavaScript untuk memuat .js file async 

Atribut async berfungsi dengan baik pada browser modern - didukung oleh Firefox 3.6+, IE 10+, Chrome 2+, Safari 5+, iOS 5+, Android 3+. Namun, untuk dukungan browser yang lebih dalam, kami merekomendasikan cara lain untuk melakukannya:

<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>

Perlu kalian ketahui bahwa script yang kami share ini berfungsi disemua browser sehingga kalian tidak perlu khawatir akan adanya ketidak cocokan dengan browser lain.

Berikut ini adalah versi yang lebih baik, lebih rapi, dan efisien dari potongan kode JavaScript asinkron di atas:

window.onload = function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://example.com/script.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
}

Bagaimana memuat .js async yang banyak secara bersamaan?

Script dibawah ini berfungsi untuk memuat file .js yang banyak secara bersamaan, tujuannya adalah menghindari penggunaan script atau code yang banyak oada template anda.

<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>

Dengan fungsi atas anda hanya perlu sekali menulis untuk memuat .js

<script>script('http://yoursite.com/your-script.js');</script>

Untuk memuat beberapa file JavaScript, Kalian harus menggunakan script dibawah ini:

<script>
script('http://yoursite.com/your-script.js');
script('http://yoursite.com/my-script.js');
script('http://yoursite.com/third-party-script.js');
</script>

Sekian share singkat dibawah ini jika kalian belum paham dengan penggunaannya silahkan tinggalkan komentar dibawah dan mulai berdiskusi dengan kami.