การโหลดทรัพยากรล่วงหน้าด้วย <link rel="preload"> จะส่งสัญญาณไปยังเบราว์เซอร์ว่าจำเป็นต้องใช้ทรัพยากรในเร็วๆ นี้ อย่างไรก็ตาม การโหลดล่วงหน้าจะรับค่าลำดับความสำคัญเริ่มต้นสำหรับประเภททรัพยากร และสำหรับรูปภาพโดยเฉพาะ ซึ่งมีค่าต่ำ การใช้ fetchpriority ช่วยให้คุณปรับแต่งลำดับความสำคัญที่เกี่ยวข้องนี้ได้ โดยเฉพาะอย่างยิ่งการตรวจสอบว่าการโหลดรูปภาพล่วงหน้าได้รับการโหลดล่วงหน้าโดยมีลำดับความสำคัญสูง ซึ่งช่วยให้รูปภาพเริ่มทำงานได้เร็วขึ้นและใช้ทรัพยากรแบนด์วิดท์ได้มากขึ้น
วิธีการนำไปใช้งาน
- ระบุรายการที่ควรโหลดล่วงหน้า: ค้นหาทรัพยากรที่เบราว์เซอร์ไม่พบตั้งแต่เนิ่นๆ (เช่น รูปภาพโปสเตอร์วิดีโอหรือภาพพื้นหลังใน CSS) แต่จำเป็นต่อลักษณะที่ปรากฏของหน้าเว็บ
- ยกระดับการโหลดรูปภาพที่สำคัญไว้ล่วงหน้า: สำหรับรูปภาพ LCP หรือรูปภาพสำคัญอื่นๆ ที่ไม่ได้จัดลำดับความสำคัญโดยค่าเริ่มต้น ให้ใช้
<link rel="preload" fetchpriority="high">เพื่อให้มั่นใจว่ารูปภาพเหล่านั้นจะได้รับการจัดลำดับความสำคัญเหนือการโหลดอื่นๆ ไว้ล่วงหน้า โปรดทราบว่าแบบอักษรมีลำดับความสำคัญสูงอยู่แล้วโดยค่าเริ่มต้น - ลดลำดับความสำคัญของการโหลดล่วงหน้าที่ไม่สำคัญ: สำหรับทรัพยากรที่ไม่สำคัญต่อการแสดงผลครั้งแรก (เช่น วิดีโอพื้นหลังหรือแบบอักษรรอง) ให้ใช้
<link rel="preload" fetchpriority="low"> - ประสานงานกับประเภททรัพยากร: โปรดทราบว่าประเภท
asที่แตกต่างกันจะมีลำดับความสำคัญเริ่มต้นที่แตกต่างกัน ให้ใช้fetchpriorityเพื่อลบล้างค่าเริ่มต้นเหล่านี้เมื่อจำเป็น
โค้ดตัวอย่าง
<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">
<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">
<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>
แนวทางปฏิบัติแนะนำ
- บังคับ: ใช้
fetchpriority="high"กับการโหลดรูปภาพที่สำคัญล่วงหน้าได้สูงสุด 1-2 รูปเท่านั้น เพื่อหลีกเลี่ยงการแย่งชิงทรัพยากรเครือข่ายและการลดความสำคัญของการเพิ่มลำดับความสำคัญ - บังคับ: ใช้
fetchpriority="high"กับรูปภาพ Largest Contentful Paint (LCP) - สิ่งที่ควรทำ: จำกัดจำนวนการโหลดล่วงหน้าทั้งหมดในหน้าเว็บให้มีรูปภาพไม่เกิน 2 รูปและแบบอักษรที่จำเป็น 2-3 แบบเพื่อป้องกันการแย่งแบนด์วิดท์
- ควรใช้
fetchpriority="low"สำหรับการโหลดล่วงหน้าที่คุณต้องการให้เบราว์เซอร์เริ่มทำงานตั้งแต่เนิ่นๆ แต่ไม่ส่งผลกระทบต่อทรัพยากรที่สำคัญ (โดยเฉพาะแบบอักษรที่ไม่สำคัญ) - ควรระบุแอตทริบิวต์
asให้ถูกต้องเพื่อให้แน่ใจว่าระบบจะใช้การโหลดล่วงหน้า - ควรทำให้ทรัพยากรที่สำคัญ (เช่น รูปภาพ LCP) ค้นพบได้แบบคงที่ใน HTML ผ่านแท็ก
<img>แทนที่จะอาศัยการโหลดล่วงหน้าสำหรับภาพพื้นหลัง - ควรตรวจสอบว่าการโหลดแบบอักษรล่วงหน้ามีแอตทริบิวต์
crossoriginเสมอ (แม้ว่าจะเป็นต้นทางเดียวกัน) - อย่าใช้แอตทริบิวต์
importanceที่เลิกใช้งานแล้ว และถูกแทนที่ด้วยfetchpriority
กลยุทธ์สำรอง
แอตทริบิวต์ fetchpriority ใน <link rel="preload"> เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง เบราว์เซอร์ที่ไม่รองรับจะยังคงโหลดทรัพยากรล่วงหน้าโดยใช้ลำดับความสำคัญเริ่มต้นสำหรับทรัพยากรประเภทนั้น โปรดระบุแอตทริบิวต์ as และ type ที่ถูกต้องเสมอเพื่อให้มั่นใจว่าสามารถใช้งานร่วมกันได้