Memprioritaskan Materi Anda dengan link rel=' pramuat'

Jeff Posnick

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

Resource yang dimuat melalui <link rel="preload"> disimpan secara lokal di browser, dan secara efektif tidak aktif hingga resource tersebut direferensikan di DOM, JavaScript, atau CSS. Misalnya, berikut adalah satu kasus penggunaan potensial saat file skrip dipramuat, tetapi tidak langsung dieksekusi, seperti jika 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 di sini? Atribut href yang digunakan dalam contoh tersebut harus tidak asing bagi developer web, karena atribut ini adalah atribut standar yang digunakan untuk menentukan URL resource tertaut.

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

Pelajari (lebih banyak)

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 yang kreatif.

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