เพิ่มประสิทธิภาพลำดับความสำคัญของสคริปต์

เบราว์เซอร์จะกำหนดลำดับความสำคัญเริ่มต้นให้กับสคริปต์ตามตำแหน่งที่ปรากฏในเอกสารและมีแอตทริบิวต์อย่าง async หรือ defer หรือไม่ การใช้ fetchpriority ช่วยให้นักพัฒนาแอปควบคุมได้อย่างชัดเจนเพื่อให้มั่นใจว่าสคริปต์ที่สำคัญจะโหลดก่อน ส่วนสคริปต์ที่ไม่จำเป็นจะไม่รบกวนการทำงาน

วิธีการนำไปใช้งาน

1. ระบุสคริปต์ที่สำคัญ: พิจารณาว่าสคริปต์ใดจำเป็นสำหรับฟังก์ชันหลักของหน้าเว็บหรือการโต้ตอบของผู้ใช้ครั้งแรก
2. ยกระดับสคริปต์แบบไม่พร้อมกันที่สำคัญ: สำหรับสคริปต์ที่สำคัญซึ่งโหลดด้วย async หรือ defer ให้เพิ่มแอตทริบิวต์ fetchpriority="high" เพื่อให้สคริปต์เหล่านี้ได้รับความสำคัญในระยะการค้นพบ
3. ลดลำดับความสำคัญของสคริปต์ที่ไม่จำเป็น: สำหรับสคริปต์ที่ไม่จำเป็นต้องใช้ทันที (เช่น ข้อมูลวิเคราะห์ โฆษณา หรือวิดเจ็ตที่อยู่ครึ่งหน้าล่าง) ให้เพิ่ม fetchpriority="low" และตรวจสอบว่ามีแอตทริบิวต์ async, defer หรือ module เพื่อหลีกเลี่ยงการบล็อก
4. จัดลำดับสคริปต์ที่บล็อกโปรแกรมแยกวิเคราะห์: ใช้ fetchpriority="low" กับสคริปต์ที่บล็อกโปรแกรมแยกวิเคราะห์ที่ส่วนท้ายของเนื้อหาเพื่อป้องกันไม่ให้สคริปต์เหล่านั้นแย่งแบนด์วิดท์กับทรัพยากรที่สำคัญกว่า

โค้ดตัวอย่าง

<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

แนวทางปฏิบัติแนะนำ

• บังคับ: ใช้ fetchpriority="high" กับสคริปต์ที่สำคัญอย่างมาก 1-2 รายการเท่านั้นเพื่อหลีกเลี่ยงการแย่งชิงทรัพยากรเครือข่ายและการลดประสิทธิภาพการเพิ่มลำดับความสำคัญ
• ควรใช้ fetchpriority="high" สำหรับสคริปต์ async โดยเฉพาะ ซึ่งเป็นที่ทราบกันดีว่ามีความสำคัญต่อ Interaction to Next Paint (INP)
• ควรลดลำดับความสำคัญของสคริปต์ที่ไม่จำเป็นสำหรับประสบการณ์ของผู้ใช้ครั้งแรกโดยใช้ fetchpriority="low"
• อย่าใช้ fetchpriority ในแท็กสคริปต์ทุกแท็ก ควรใช้เพื่อเปลี่ยนการวิเคราะห์พฤติกรรมเริ่มต้นของเบราว์เซอร์เมื่อทราบว่าไม่เหมาะสมเท่านั้น
• อย่าใช้แอตทริบิวต์ importance ที่เลิกใช้งานแล้ว และถูกแทนที่ด้วย fetchpriority

กลยุทธ์สำรอง

แอตทริบิวต์ fetchpriority เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง เบราว์เซอร์ที่ไม่รองรับจะละเว้นแอตทริบิวต์และใช้ตรรกะการกำหนดเวลาภายในโดยไม่มีข้อผิดพลาด ไม่จำเป็นต้องมีการตรวจจับฟีเจอร์หรือตรรกะสำรองที่ชัดเจนสำหรับการใช้งานพื้นฐาน