Memprioritaskan Materi Anda dengan link rel=' pramuat'

Jeff Posnick

Pernahkah Anda ingin memberi tahu browser tentang {i>font<i}, skrip, atau sumber daya lain yang akan dibutuhkan oleh halaman, tanpa menunda proses onload acara? <link rel="preload"> memberi developer web kemampuan untuk melakukan menggunakan {i>syntax<i} elemen HTML yang sudah dikenal dengan beberapa atribut utama untuk menentukan perilaku yang tepat. 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 inert hingga direferensikan di DOM, JavaScript, atau di CSS. Misalnya, berikut adalah satu kasus penggunaan potensial di mana file skrip dipramuat, tetapi tidak segera dieksekusi, seperti yang seharusnya 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 pengembang web, karena ini adalah atribut standar yang digunakan untuk menentukan URL dari setiap resource yang ditautkan.

Atribut as merupakan mungkin baru bagi Anda, dan ini digunakan dalam konteks elemen <link> untuk memberikan lebih banyak konteks tentang tujuan dari permintaan pramuat sedang dibuat. Informasi tambahan ini memastikan bahwa browser akan menyetel header permintaan yang sesuai, prioritas permintaan, serta menerapkan Kebijakan Keamanan Konten yang relevan direktif yang mungkin diterapkan untuk konteks sumber daya yang benar.

Pelajari (lebih banyak)

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

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