Memprioritaskan Materi Anda dengan link rel=' pramuat'

Joni Setiawan

Pernahkah Anda ingin memberi tahu browser tentang font, skrip, atau resource lain yang penting yang akan diperlukan oleh halaman, tanpa menunda peristiwa onload halaman? <link rel="preload"> memungkinkan developer web melakukannya, menggunakan sintaksis elemen HTML yang sudah dikenal dengan beberapa atribut utama untuk menentukan perilaku yang tepat. Ini adalah standar draf yang dikirimkan sebagai bagian dari rilis Chrome 50.

Resource yang dimuat melalui <link rel="preload"> disimpan secara lokal di browser, dan tidak aktif secara efektif hingga direferensikan dalam DOM, JavaScript, atau CSS. Misalnya, berikut adalah satu kasus penggunaan potensial ketika file skrip telah dimuat sebelumnya, tetapi tidak dijalankan dengan segera, seperti yang terjadi jika file skrip disertakan melalui tag <script> di DOM.

<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
    // Later on, after some condition has been met, we run the preloaded
    // JavaScript by inserting a <script> tag into the DOM.
    var usedLaterScript = document.createElement('script');
    usedLaterScript.src = 'used-later.js';  
    document.body.appendChild(usedLaterScript)
</script>

Jadi apa yang terjadi? Atribut href yang digunakan dalam contoh tersebut harus tidak asing bagi developer web, karena ini adalah atribut standar yang digunakan untuk menentukan URL resource yang ditautkan.

Namun, atribut as mungkin baru bagi Anda, dan digunakan dalam konteks elemen <link> untuk memberikan lebih banyak konteks ke browser tentang tujuan permintaan pramuat yang dibuat. Informasi tambahan ini memastikan bahwa browser akan menetapkan header permintaan yang tepat, prioritas permintaan, serta menerapkan perintah Kebijakan Keamanan Konten yang relevan yang mungkin ada untuk konteks resource yang tepat.

Pelajari lebih lanjut

Yoav Weiss menulis panduan definitif tentang penggunaan <link rel="preload">. Jika Anda tertarik dan ingin mulai menggunakannya di halaman Anda sendiri, sebaiknya baca artikelnya untuk mempelajari lebih lanjut manfaat dan kasus penggunaan kreatif.

<link rel="preload"> menggantikan <link rel="subresource">, yang memiliki bug dan kelemahan yang signifikan, serta tidak pernah diterapkan di browser selain Chrome. Dengan demikian, Chrome 50 menghapus dukungan untuk <link rel="subresource">.