Resource hints คือแท็ก <link> ที่บอกให้เบราว์เซอร์ดึงข้อมูลหรือเชื่อมต่อกับ resource ตั้งแต่เนิ่น ๆ เพื่อปรับประสิทธิภาพการโหลดให้ดีขึ้น แต่ละแบบตอบโจทย์เรื่องจังหวะเวลา/ลำดับความสำคัญที่ต่างกัน
Resource hints คือแท็ก <link> ที่บอกให้เบราว์เซอร์ดึงข้อมูลหรือเชื่อมต่อกับ resource ตั้งแต่เนิ่น ๆ เพื่อปรับประสิทธิภาพการโหลดให้ดีขึ้น แต่ละแบบตอบโจทย์เรื่องจังหวะเวลา/ลำดับความสำคัญที่ต่างกัน
preload — "ฉันต้องการสิ่งนี้ สำหรับหน้าปัจจุบัน ดึงมันเดี๋ยวนี้ด้วยลำดับความสำคัญสูง" สำหรับ resource สำคัญที่ parser ค้นพบช้า เช่น ฟอนต์, hero image, asset ที่อ้างอิงใน CSS ต้องระบุ as เพื่อให้เบราว์เซอร์กำหนดลำดับความสำคัญ/header ได้ถูกต้อง
preconnect — "ฉันจะเชื่อมต่อกับ origin นี้ในไม่ช้า ทำ DNS lookup + TCP + TLS handshake เดี๋ยวนี้เลย" ช่วยประหยัด round-trip ก่อน request แรกไปยังบุคคลที่สาม (API, font host, CDN) ใช้กับ origin สำคัญไม่กี่แห่ง
dns-prefetch — เวอร์ชันที่เบากว่าของ preconnect คือทำแค่การ resolve DNS เหมาะเป็น fallback หรือใช้กับ origin จำนวนมาก
prefetch — "ฉัน น่าจะ ต้องการสิ่งนี้สำหรับการนำทาง ครั้งถัดไป ดึงมันด้วยลำดับความสำคัญต่ำเมื่อว่าง" สำหรับหน้า/asset ที่น่าจะเป็นถัดไป จะถูก cache ไว้สำหรับอนาคต ไม่ใช่สำหรับหน้าปัจจุบัน
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
ฟอนต์ถูกค้นพบช้า (เบราว์เซอร์ต้อง parse CSS ก่อน) ดังนั้นการ preload จึงช่วยหลีกเลี่ยงความล่าช้าแบบ invisible-text
การ preload ทุกอย่างจะทำให้เสียจุดประสงค์ เพราะมันจะแย่งแบนด์วิดท์กับ resource ที่สำคัญจริง ๆ ให้ใช้ hint เฉพาะไม่กี่อันที่สำคัญที่สุด
Resource hints ช่วยลด latency ออกจาก critical path: preconnect ขจัดความล่าช้าจาก handshake สำหรับบุคคลที่สาม, preload จัดลำดับความสำคัญให้ asset สำคัญที่ถูกค้นพบช้า (ฟอนต์, ภาพ LCP) และ prefetch ทำให้การนำทาง ครั้งถัดไป รู้สึกเหมือนทันที
เมื่อใช้อย่างแม่นยำ มันช่วยปรับปรุง Core Web Vitals ได้อย่างมีนัยสำคัญ