Preload CSS dan Javascript untuk Mempercepat Loading Website

Preload CSS dan Javascript untuk Mempercepat Loading Website

Salah satu hal yang membuat situs kita lambat adalah karena block rendering saat situs dimuat. Block Rendering terjadi karena file file yang meminta untuk dimuat terlebih dahulu sehingga memperlambat kinerja situs.

Dengan adanya fitur preload ini, file yang dimuat bersamaan dengan halaman itu sendiri. Proses ini membuat situs memiliki kinerja lebih baik dan kecepatan lebih.

Cara Penulisan

Penulisan preload dimasukkan pada tag link yang biasanya kita gunakan untuk memuat CSS. Untuk preload sendiri, penulisannya seperti ini

<link rel="preload" href="style.css" as="style">   

Keterangan

Atribut href mengarah pada file yang dimaksud
Atribut as mendefinisikan jenis file tersebut

Untuk contoh penulisan penuhnya pada HTML akan menjadi seperti ini

<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>

<link rel=”preload” href=”style.css” as=”style”>
<link rel=”preload” href=”main.js” as=”script”>

<link rel=”stylesheet” href=”style.css”>
</head>

<body>
<h1>bouncing balls</h1>
<canvas></canvas>

<script src=”main.js” defer></script>
</body>

Meskipun terlihat sepele, menambahkan preload pada situs memiliki manfaat yang besar. Preload memungkinkan kita untuk segera menyediakan file yang dibutuhkan untuk rendering. Meskipun kita bisa memanggil file menggunakan <link rel="stylesheet"> dan <script> seperti biasanya, tapi perbedaan akan terlihat jelas ketika memuat file dalam ukuran yang besar.

Jenis Konten yang Dapat di Preload

Pada atribut as, nilai yang dimuat merupakan jenis konten dari file tersebut. Berikut adalah daftar nilai yang dapat diisi pada atribut as sebagai berikut:

  1. audio: File audio, seperti yang biasanya digunakan di <audio>.
  2. document: Dokumen HTML yang dimaksudkan untuk disematkan oleh <frame>atau <iframe>.
  3. embed: Sumber daya untuk disematkan di dalam <embed>elemen.
  4. fetch: Sumber daya yang akan diakses dengan permintaan pengambilan atau XHR, seperti file ArrayBuffer atau JSON.
  5. font: File font.
  6. image: File gambar.
  7. object: Sumber daya untuk disematkan di dalam <object>elemen.
  8. script: File JavaScript.
  9. style: File CSS.
  10. track: File WebVTT.
  11. worker: Worker web JavaScript atau shared worker.
  12. video: File video, seperti yang biasanya digunakan dalam <video>.

Manfaat Penggunaan Preload

Dari yang sudah KOOI sampaikan sebelumnya, berikut beberapa manfaat penggunaan preload:

  1. Browser mengetahui prioritas file yang harus dimuat
  2. Loading situs menjadi lebih cepat
  3. Browser dapat mengirimkan Accept Header dengan benar sesuai jenis file
  4. Browser dapat mengenali jenis file sehingga file dapat digunakan kembali untuk permintaan mendatang
Sekian artikel yang berjudul Preload CSS dan Javascript untuk Mempercepat Loading Website ini, semoga bermanfaat serta menambah wawasan kita bersama. Terima kasih.