HTML มี attribute ชื่อ preload ที่ให้คุณบอก browser hint เกี่ยวกับวิธีและสำคัญกว่า เมื่อไหร่ ที่ควร load assets เมื่อ page loads
preload attribute ใช้ได้กับหลาย HTML elements ตัวอย่าง คุณเพิ่มให้ <link> element เพื่อให้ browsers เริ่ม fetch CSS stylesheet ตั้งแต่ต้น
อย่า ใช้ preload attribute บน <link> แบบนี้ (ตามบางเว็บแนะนำ):
<link rel="preload" rel=stylesheet href="/css/styles.css" as="style">เพราะโค้ดข้างต้นแค่ preload stylesheet ไม่ apply มัน
แทนที่จะเป็นอย่างนั้น เพื่อ preload และ apply stylesheet พร้อมกัน (ทันทีที่ preload เสร็จ) คุณสามารถใช้ inline JS onload event handler บน <link> element:
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">JS onload event handler จะเปลี่ยน link element's rel="preload" attribute เป็น rel="stylesheet" ทันทีที่ load เสร็จ
ด้วยการตั้งค่าข้างต้น Browsers ที่ support preload จะเริ่ม download CSS stylesheet ก่อนกว่าจะไม่ใช้ attribute
Browser Support
preload attribute ยังไม่รองรับใน Firefox (แปลกๆ) แต่ทำงานใน modern browsers อื่นๆ คุณยังใช้ preload attribute ได้ แค่ใน Firefox จะไม่ prefetch CSS (จะ load ปกติ)
