Resource hints อย่าง preload, prefetch และ preconnect คืออะไร?

Question

Accepted Answer

**Resource hints** คือแท็ก `` ที่บอกให้เบราว์เซอร์ดึงข้อมูลหรือเชื่อมต่อกับ resource ตั้งแต่เนิ่น ๆ เพื่อปรับประสิทธิภาพการโหลดให้ดีขึ้น แต่ละแบบตอบโจทย์เรื่องจังหวะเวลา/ลำดับความสำคัญที่ต่างกัน ```html ``` ## แต่ละอันทำอะไร - **`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 ไว้สำหรับอนาคต ไม่ใช่สำหรับหน้าปัจจุบัน ## ตัวอย่างจริงที่พบบ่อย: ฟอนต์ ```html ``` ฟอนต์ถูกค้นพบช้า (เบราว์เซอร์ต้อง parse CSS ก่อน) ดังนั้นการ preload จึงช่วยหลีกเลี่ยงความล่าช้าแบบ invisible-text ## ข้อควรระวัง: อย่าใช้ hint มากเกินไป การ preload ทุกอย่างจะทำให้เสียจุดประสงค์ เพราะมันจะแย่งแบนด์วิดท์กับ resource ที่สำคัญจริง ๆ ให้ใช้ hint เฉพาะไม่กี่อันที่สำคัญที่สุด ## ทำไมจึงสำคัญ Resource hints ช่วยลด latency ออกจาก critical path: `preconnect` ขจัดความล่าช้าจาก handshake สำหรับบุคคลที่สาม, `preload` จัดลำดับความสำคัญให้ asset สำคัญที่ถูกค้นพบช้า (ฟอนต์, ภาพ LCP) และ `prefetch` ทำให้การนำทาง *ครั้งถัดไป* รู้สึกเหมือนทันที เมื่อใช้อย่างแม่นยำ มันช่วยปรับปรุง Core Web Vitals ได้อย่างมีนัยสำคัญ