เบราว์เซอร์ใช้การเรียนรู้ของระบบเพื่อกำหนดลำดับความสำคัญในการโหลดรูปภาพ แต่ค่าเริ่มต้นเหล่านี้อาจไม่สอดคล้องกับ Largest Contentful Paint (LCP) ของหน้าเว็บเสมอไป
การใช้ fetchpriority กับองค์ประกอบ <img> ช่วยให้คุณส่งสัญญาณความสำคัญของรูปภาพไปยังเบราว์เซอร์ได้อย่างชัดเจน เพื่อให้มั่นใจว่ารูปภาพสำคัญจะโหลดเร็วขึ้น ขณะที่รูปภาพที่ไม่จำเป็นจะไม่แย่งแบนด์วิดท์
แอตทริบิวต์ loading=lazy จะป้องกันไม่ให้ดาวน์โหลดรูปภาพเลยเมื่ออยู่นอกหน้าจอมากพอ ซึ่งจะช่วยจัดลำดับความสำคัญของรูปภาพได้มากขึ้น
วิธีการนำไปใช้งาน
- ระบุรูปภาพ LCP: พิจารณาว่ารูปภาพใดมีแนวโน้มที่จะเป็น Largest Contentful Paint มากที่สุด (โดยปกติจะเป็นรูปภาพหลักที่ด้านบนของหน้า)
- ยกระดับลำดับความสำคัญของ LCP: เพิ่ม
fetchpriority="high"ลงในองค์ประกอบ<img>สำหรับตัวเลือก LCP - ลดลำดับความสำคัญของรูปภาพที่ไม่สำคัญ: สำหรับรูปภาพที่เป็นส่วนหนึ่งของ UI รองหรือแสดงหลังจากที่ผู้ใช้โต้ตอบเท่านั้น (เช่น เมนูขนาดใหญ่ โมดัล หรือสไลด์ภาพสไลด์นอกหน้าจอ) ให้เพิ่ม
fetchpriority="low" - เพิ่มประสิทธิภาพการโหลดแบบ Lazy Loading: อย่าใช้
loading="lazy"กับรูปภาพ LCP สำหรับรูปภาพมาตรฐานที่อยู่ครึ่งหน้าล่างloading="lazy"ก็เพียงพอที่จะเลื่อนคำขอออกไปจนกว่าผู้ใช้จะเลื่อนไปใกล้รูปภาพเหล่านั้น หลีกเลี่ยงการเพิ่มfetchpriority="low"ลงในรูปภาพเหล่านี้ เนื่องจากคุณต้องการให้รูปภาพโหลดตามลำดับความสำคัญปกติเมื่อผู้ใช้เลื่อนไปถึง สงวนfetchpriority="low"ไว้สำหรับรูปภาพที่ในทางเทคนิคแล้วอยู่ "ครึ่งหน้าบน" แต่ไม่ปรากฏให้เห็นในตอนแรก (เช่น สไลด์ภาพสไลด์ที่ซ่อนอยู่หรือเมนูขนาดใหญ่) สำหรับรูปภาพที่ซ่อนอยู่เหล่านี้ คุณสามารถใช้loading="lazy"ได้เช่นกัน โดยเบราว์เซอร์จะจัดการเวลาของคำขอโดยคำนึงถึงลำดับความสำคัญต่ำ - ใช้ลำดับความสำคัญเริ่มต้น: หากรูปภาพควรมีลำดับความสำคัญในการโหลดปกติ ให้ละเว้นแอตทริบิวต์
fetchpriorityทั้งหมดแทนที่จะตั้งค่าเป็นautoซึ่งเป็นรูปแบบที่ใช้กันทั่วไปเพื่อทำให้ HTML ดูสะอาดตาขึ้นโดยอาศัยการเรียนรู้ในตัวของเบราว์เซอร์
โค้ดตัวอย่าง
<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
alt="Main Banner"
fetchpriority="high"
width="800" height="400">
<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
<div class="carousel">
<img src="/images/gallery-alt.jpg"
alt="Gallery Image 1"
width="400" height="300">
<img src="/images/gallery-alt.jpg"
alt="Gallery Image 2"
fetchpriority="low"
loading="lazy"
width="400" height="300">
<div>
<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
alt="Special Offer"
fetchpriority="low"
width="300" height="150">
<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
alt="Footer Logo"
loading="lazy"
width="120" height="60">
<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
alt="Standard Image"
width="400" height="300">
แนวทางปฏิบัติแนะนำ
- บังคับ: ใช้
fetchpriority="high"กับรูปภาพ LCP เสมอ - บังคับ: ใช้
fetchpriority="high"กับรูปภาพที่สำคัญที่สุด 1-2 รูปเท่านั้นเพื่อหลีกเลี่ยงการแย่งชิงทรัพยากรเครือข่ายและลดการเพิ่มลำดับความสำคัญ - บังคับ: ใช้
fetchpriority="low"สำหรับรูปภาพที่ในทางเทคนิคแล้วอยู่ "ครึ่งหน้าบน" แต่ซ่อนไว้ในตอนแรก (เช่น สไลด์ภาพหมุนที่ซ่อนอยู่ รูปภาพเมนูขนาดใหญ่) - บังคับ: อย่าใช้
fetchpriority="low"กับรูปภาพมาตรฐานที่อยู่ครึ่งหน้าล่างซึ่งใช้loading="lazy"อยู่แล้ว รูปภาพเหล่านี้ควรโหลดตามลำดับความสำคัญปกติเมื่อเข้าสู่วิวพอร์ต - แนะนำ: หลีกเลี่ยงการใช้
fetchpriority="auto"หากต้องการลำดับความสำคัญเริ่มต้น ให้ละเว้นแอตทริบิวต์ทั้งหมดเพื่อให้ HTML ไม่ซับซ้อน - อย่ารวม
fetchpriority="high"กับloading="lazy" - อย่าใช้แอตทริบิวต์
importanceที่เลิกใช้งานแล้ว โดยมีfetchpriorityมาแทนที่ และไม่มีเบราว์เซอร์ใดรองรับ - อย่าใช้ค่า
loading="auto"ที่เลิกใช้งานแล้ว Chrome รองรับฟีเจอร์นี้ในตอนแรก แต่ได้นำออกแล้วและไม่มีเบราว์เซอร์ใดรองรับ
กลยุทธ์สำรอง
แอตทริบิวต์ fetchpriority เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่องสำหรับองค์ประกอบ <img> หากเบราว์เซอร์ไม่รองรับ ระบบจะไม่สนใจแอตทริบิวต์นี้ และเบราว์เซอร์จะใช้การวิเคราะห์ลำดับความสำคัญเริ่มต้น