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 direferensikan di DOM, JavaScript, atau CSS. Misalnya, berikut adalah salah satu kasus penggunaan potensial saat file skrip dimuat sebelumnya, tetapi tidak langsung dieksekusi, seperti yang akan terjadi 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? 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 masih baru bagi Anda, dan digunakan dalam konteks elemen <link> untuk memberi browser lebih banyak konteks tentang tujuan 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 yang mungkin berlaku untuk konteks resource yang benar.

Pelajari lebih lanjut

Yoav Weiss menulis panduan definitif untuk menggunakan <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 materi iklan.

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