Hai Sob! Pernahkah kalian merasa frustasi dengan bagaimana browser memuat website yang sudah kalian buat dengan susah payah? Pernahkah kalian merasa sudah melakukan berbagai optimasi di website kalian namun hasilnya tetap saja tidak memuaskan? Nah, disini Jagoan Hosting akan menjelaskan tentang Preload key requests beserta fungsinya. Simak artikel berikut Sob!
Apa Sih Fungsi dari Preload Key Requests?Pertama, kita membahas apa fungsi, preload bisa digunakan untuk mendahulukan berbagai sumber daya yang kita yakini akan dipakai di halaman web tersebut seperti font, CSS maupun JavaScript dibandingkan sumber daya yang lain. Hanya gunakan preload bila resources tersebut benar-benar digunakan karena cara ini akan memberikan perintah ke browser untuk menetapkan sumber daya sebagai high priority dalam urutan request yang akan dilakukan.
Berikut contoh menggunakan preload untuk memuat file CSS:
<link rel=”preload” href=”path/file.css” as=”style”>
Preloading requests dapat membuat halaman kalian memuat lebih cepat.
Misalkan critical request chain pada laman kalian seperti ini :
index.html
|–app.js
|–styles.css
|–ui.js
File index.html kalian mendeklarasikan <script src = “app.js”>. Saat app.js berjalan, ia memanggil fetch () untuk mengunduh styles.css dan ui.js. Halaman tidak muncul lengkap sampai 2 sumber daya terakhir diunduh, diuraikan, dan dieksekusi.
Penjelasan gambar 1. Tanpa preload tautan, styles.css dan ui.js diminta hanya setelah app.js diunduh, diuraikan, dan dieksekusi.
Akan timbul masalah ketika browser hanya menyadari 2 sumber daya terakhir setelah mengunduh, mem-parsing, dan mengeksekusi app.js. Namun kalian sebagai pengembang tahu bahwa sumber daya itu penting dan harus diunduh sesegera mungkin.
Disini Jagoan Hosting merekomendasikan deklarasikan preload tautan dalam HTML kalian untuk menginstruksikan browser untuk mengunduh sumber daya utama sesegera mungkin.
<head>
…
<link rel=”preload” href=”styles.css” as=”style”>
<link rel=”preload” href=”ui.js” as=”script”>
…
</head>
Penjelasan gambar 2. Dengan preload tautan, styles.css dan ui.js diminta bersamaan dengan app.js.
Jagoan Hosting memberikan informasi tambahan bahwa Lighthouse menandai permintaan tingkat ketiga dalam rantai permintaan kritis kalian sebagai calon preload. Menggunakan contoh di atas, Lighthouse akan menandai styles.css dan ui.js sebagai kandidat. Penghematan potensial didasarkan pada seberapa cepat browser dapat memulai permintaan jika kalian menyatakan preload tautan. Misalnya, jika app.js membutuhkan 200ms untuk mengunduh, menguraikan, dan mengeksekusi, potensi penghematan untuk setiap sumber daya adalah 200ms karena app.js tidak lagi menjadi hambatan untuk setiap permintaan.
Nah begitu Sob penjelasan dari Preload key requests dari Jagoan Hosting. Kalau masih kesulitan Kamu bisa hubungi teman-teman Jagoanhosting untuk informasi lewat Live Chat dan Open Ticket. Yuk Ah! Selamat mencoba.