เมื่อเบราว์เซอร์แยกวิเคราะห์หน้าเว็บและเริ่มค้นพบและดาวน์โหลดทรัพยากร เช่น รูปภาพ สคริปต์ หรือ CSS ระบบจะกำหนด priority
ในการดึงข้อมูลเพื่อให้ดาวน์โหลดได้ในลำดับที่เหมาะสมที่สุด ลำดับความสำคัญของทรัพยากรมักขึ้นอยู่กับว่าทรัพยากรคืออะไรและอยู่ที่ไหนในเอกสาร เช่น รูปภาพในวิวพอร์ตอาจมีลำดับความสำคัญเป็น High
และลำดับความสำคัญสำหรับ CSS ที่บล็อกการแสดงผลและโหลดล่วงหน้าโดยใช้ <link>
ใน <head>
อาจเป็น Very High
การกำหนดลำดับความสำคัญอัตโนมัติมักจะทำงานได้ดี แต่ก็มีกรณีการใช้งานที่ลำดับที่กำหนดนั้นไม่เหมาะสม
หน้านี้จะพูดถึง API ลำดับความสำคัญของการดึงข้อมูลและแอตทริบิวต์ HTML fetchpriority
ซึ่งจะช่วยเพิ่มประสิทธิภาพ Core Web Vitals โดยให้คุณบอกใบ้ลำดับความสำคัญที่เกี่ยวข้องของทรัพยากร (high
หรือ low
)
สรุป
ส่วนสำคัญบางส่วนที่ลำดับความสำคัญของการดึงข้อมูลจะช่วยได้มีดังนี้
- การเพิ่มลำดับความสำคัญของรูปภาพ LCP ด้วยการระบุ
fetchpriority="high"
ในองค์ประกอบรูปภาพ ซึ่งจะทำให้ LCP เกิดขึ้นเร็วขึ้น - เพิ่มลำดับความสำคัญของสคริปต์
async
โดยใช้ความหมายที่ดีกว่าการแฮ็กที่ใช้บ่อยที่สุดในปัจจุบัน (ใส่<link rel="preload">
สำหรับสคริปต์async
) - ลดลำดับความสำคัญของสคริปต์เนื้อหาส่วนปลายเพื่อให้เรียงลำดับรูปภาพได้ดีขึ้น
ที่ผ่านมา นักพัฒนาซอฟต์แวร์มีอิทธิพลที่จำกัดกับลำดับความสำคัญของทรัพยากรเมื่อใช้การโหลดล่วงหน้าและเชื่อมต่อล่วงหน้า "การโหลดล่วงหน้า" ช่วยให้คุณบอกเบราว์เซอร์เกี่ยวกับทรัพยากรสำคัญที่คุณต้องการโหลดตั้งแต่เนิ่นๆ ก่อนที่เบราว์เซอร์จะค้นพบทรัพยากรเหล่านั้นได้โดยง่าย ซึ่งมีประโยชน์มากโดยเฉพาะสำหรับทรัพยากรที่ค้นหาได้ยาก เช่น แบบอักษรที่รวมอยู่ในสไตล์ชีต ภาพพื้นหลัง หรือทรัพยากรที่โหลดจากสคริปต์ การเชื่อมต่อล่วงหน้าช่วยให้การเชื่อมต่อกับเซิร์ฟเวอร์แบบข้ามต้นทางอุ่นขึ้นและช่วยปรับปรุงเมตริก เช่น Time to First Byte วิธีนี้มีประโยชน์เมื่อคุณทราบต้นทาง แต่ไม่จำเป็นต้องเป็น URL ที่แน่ชัดของทรัพยากรที่จำเป็นต้องใช้
ลำดับความสำคัญของการดึงข้อมูลจะช่วยเสริมคำแนะนำด้านทรัพยากรเหล่านี้
โดยเป็นสัญญาณที่อิงตามมาร์กอัปที่มีให้ผ่านแอตทริบิวต์ fetchpriority
ที่นักพัฒนาซอฟต์แวร์ใช้เพื่อระบุลำดับความสำคัญที่เกี่ยวข้องของทรัพยากรหนึ่งๆ ได้
คุณยังใช้คำแนะนำเหล่านี้ผ่าน JavaScript และ API การดึงข้อมูลพร้อมพร็อพเพอร์ตี้ priority
เพื่อกำหนดลำดับความสำคัญของการดึงข้อมูลทรัพยากรสำหรับข้อมูลได้ด้วย ลำดับความสำคัญของการดึงข้อมูลยังช่วย
เสริมการโหลดล่วงหน้าได้ด้วย ถ่ายภาพ Largest Contentful Paint ซึ่งเมื่อโหลดล่วงหน้าแล้วจะยังคงมีลำดับความสำคัญต่ำ หากรูปภาพถูกเลื่อนกลับมาโดยทรัพยากรที่มีลำดับความสำคัญต่ำในช่วงต้น การใช้ลำดับความสำคัญในการดึงข้อมูลจะช่วยเร่งการโหลดรูปภาพได้
ลำดับความสำคัญของทรัพยากร
ลำดับการดาวน์โหลดทรัพยากรจะขึ้นอยู่กับลำดับความสำคัญที่เบราว์เซอร์กำหนดสำหรับทรัพยากรทุกรายการในหน้านั้น ปัจจัยที่อาจส่งผลต่อตรรกะการคำนวณลำดับความสำคัญมีดังนี้
- ประเภทของทรัพยากร เช่น CSS, แบบอักษร, สคริปต์, รูปภาพ และทรัพยากรของบุคคลที่สาม
- ตำแหน่งหรือลำดับที่เอกสารอ้างอิงทรัพยากร
- คำแนะนำเกี่ยวกับทรัพยากร
preload
ซึ่งช่วยให้เบราว์เซอร์ค้นพบทรัพยากรได้เร็วขึ้นและโหลดได้เร็วขึ้น - การเปลี่ยนแปลงการคํานวณลําดับความสําคัญสําหรับสคริปต์
async
หรือdefer
ตารางต่อไปนี้แสดงวิธีที่ Chrome จัดลําดับความสําคัญและจัดลำดับทรัพยากรส่วนใหญ่
โหลดในระยะการบล็อกเลย์เอาต์ | โหลดทีละรายการในระยะการบล็อกเลย์เอาต์ | ||||
---|---|---|---|---|---|
ลำดับความสำคัญ การกะพริบ |
VeryHigh | สูง | ปานกลาง | ต่ำ | VeryLow |
ลำดับความสำคัญของ เครื่องมือสำหรับนักพัฒนาเว็บ |
สูงสุด | สูง | ปานกลาง | ต่ำ | ต่ำสุด |
แหล่งข้อมูลหลัก | |||||
CSS (ก่อนเวลา**) | CSS (ล่าช้า**) | CSS (สื่อไม่ตรงกัน***) | |||
สคริปต์ (ก่อนเวลา** หรือไม่จากตัวสแกนการโหลดล่วงหน้า) | สคริปต์ (ล่าช้า**) | สคริปต์ (ไม่พร้อมกัน) | |||
แบบอักษร | แบบอักษร (rel=preload) | ||||
นำเข้า | |||||
รูปภาพ (ในวิวพอร์ต) | รูปภาพ (5 ภาพแรก > 10,000px2) | รูปภาพ | |||
สื่อ (วิดีโอ/เสียง) | |||||
ดึงข้อมูลล่วงหน้า | |||||
XSL | |||||
XHR (ซิงค์) | XHR/การดึงข้อมูล* (อะซิงโครนัส) |
เบราว์เซอร์จะดาวน์โหลดทรัพยากรที่มีลำดับความสำคัญในการประมวลผลเท่ากันตามลำดับการค้นพบ คุณสามารถตรวจสอบลำดับความสำคัญที่กำหนดให้กับทรัพยากรต่างๆ ได้เมื่อโหลดหน้าเว็บในแท็บเครือข่ายของ Chrome Dev Tools (อย่าลืมใส่คอลัมน์ลำดับความสำคัญโดยคลิกขวาที่ส่วนหัวของตาราง)
เมื่อมีการเปลี่ยนแปลงลำดับความสำคัญ คุณจะเห็นทั้งลำดับความสำคัญเริ่มต้นและลำดับความสำคัญสุดท้ายในการตั้งค่าแถวคําขอขนาดใหญ่หรือในเคล็ดลับเครื่องมือ
กรณีที่คุณอาจต้องใช้ลำดับความสำคัญในการดึงข้อมูล
เมื่อเข้าใจตรรกะการจัดลําดับความสําคัญของเบราว์เซอร์แล้ว คุณปรับลําดับการดาวน์โหลดของหน้าเว็บเพื่อเพิ่มประสิทธิภาพและ Core Web Vitals ได้ ตัวอย่างบางส่วนของสิ่งที่คุณเปลี่ยนได้โดยไม่ต้องใช้ลำดับความสำคัญในการดึงข้อมูลมีดังนี้
- วางแท็กทรัพยากร เช่น
<script>
และ<link>
ในลำดับที่คุณต้องการให้เบราว์เซอร์ดาวน์โหลด - ใช้คำแนะนำทรัพยากรของ
preload
เพื่อดาวน์โหลดทรัพยากรที่จำเป็นก่อนหน้านี้ โดยเฉพาะทรัพยากรที่เบราว์เซอร์ค้นพบได้ยากขึ้น - ใช้
async
หรือdefer
เพื่อดาวน์โหลดสคริปต์โดยไม่บล็อกทรัพยากรอื่นๆ - โหลดเนื้อหาครึ่งหน้าล่างแบบ Lazy Loading เพื่อให้เบราว์เซอร์สามารถใช้แบนด์วิดท์ที่มีอยู่สำหรับทรัพยากรครึ่งหน้าบนที่สำคัญยิ่งขึ้น
ต่อไปนี้คือกรณีที่มีความซับซ้อนมากขึ้นที่ลำดับความสำคัญของการดึงข้อมูลจะช่วยให้คุณได้รับลำดับความสำคัญของทรัพยากรตามที่ต้องการ
- คุณมีรูปภาพครึ่งหน้าบนหลายภาพ แต่บางภาพไม่ควรจะมีลำดับความสำคัญเท่ากัน ตัวอย่างเช่น ในภาพสไลด์ เฉพาะรูปภาพแรกที่มองเห็นได้เท่านั้นที่ต้องมีลำดับความสำคัญสูงกว่า
- รูปภาพหลักในวิวพอร์ตมักจะเริ่มต้นที่ลำดับความสำคัญ
Low
หรือMedium
หลังจากเลย์เอาต์เสร็จสมบูรณ์ Chrome จะพบว่าตัวเองอยู่ในวิวพอร์ตและเพิ่มลําดับความสําคัญของเลย์เอาต์นั้น ซึ่งมักจะทำให้การโหลดรูปภาพ ช้าลงมาก การระบุลำดับความสำคัญในการดึงข้อมูลในมาร์กอัปจะช่วยให้รูปภาพเริ่มต้นที่ลำดับความสำคัญ "สูง" และเริ่มโหลดได้เร็วขึ้นมาก
คุณยังต้องโหลดล่วงหน้าเพื่อให้ค้นพบรูปภาพ LCP ก่อนเปิดตัวที่รวมอยู่ในพื้นหลัง CSS ได้ หากต้องการเพิ่มลำดับความสำคัญของภาพพื้นหลัง ให้ใส่fetchpriority='high'
ในการโหลดล่วงหน้า - การประกาศสคริปต์เป็น
async
หรือdefer
จะทำให้เบราว์เซอร์โหลดสคริปต์ไม่พร้อมกัน อย่างไรก็ตาม ตามที่แสดงในตารางลำดับความสำคัญ สคริปต์เหล่านี้จะได้รับการกำหนดลำดับความสำคัญ "ต่ำ" เช่นกัน คุณอาจต้องการเพิ่มลำดับความสำคัญไปพร้อมกับการดาวน์โหลดแบบไม่พร้อมกัน โดยเฉพาะอย่างยิ่งสำหรับสคริปต์ที่สำคัญต่อประสบการณ์ของผู้ใช้ - หากคุณใช้ JavaScript
fetch()
API เพื่อดึงทรัพยากรหรือข้อมูลแบบไม่พร้อมกัน เบราว์เซอร์จะกำหนดลำดับความสำคัญเป็นHigh
คุณอาจต้องการให้การดึงข้อมูลบางส่วนทำงานโดยมีลำดับความสำคัญต่ำกว่า โดยเฉพาะอย่างยิ่งเมื่อคุณรวมการเรียก API ในเบื้องหลังเข้ากับการเรียก API ที่ตอบสนองต่อข้อมูลจากผู้ใช้ ทำเครื่องหมายการเรียก API ในเบื้องหลังเป็นลำดับความสำคัญLow
และการเรียก API แบบอินเทอร์แอกทีฟเป็นลำดับความสำคัญHigh
- เบราว์เซอร์จะกำหนด
High" priority
ให้ CSS และแบบอักษร แต่ทรัพยากรเหล่านั้นบางส่วนอาจมีความสำคัญมากกว่าทรัพยากรอื่นๆ คุณสามารถใช้ "ลำดับความสำคัญของการดึงข้อมูล" เพื่อลดลำดับความสำคัญของทรัพยากรที่ไม่สำคัญ
แอตทริบิวต์ fetchpriority
ใช้แอตทริบิวต์ HTML fetchpriority
เพื่อระบุลำดับความสำคัญในการดาวน์โหลดสำหรับทรัพยากรประเภทต่างๆ เช่น CSS, แบบอักษร, สคริปต์ และรูปภาพ เมื่อดาวน์โหลดโดยใช้แท็ก link
, img
หรือ script
อาจมีค่าต่อไปนี้
high
: ทรัพยากรมีความสำคัญอย่างสูง และคุณอยากให้เบราว์เซอร์จัดลำดับความสำคัญให้นาน ตราบใดที่การเรียนรู้ของเบราว์เซอร์เองไม่ได้ป้องกันเรื่องนี้low
: ทรัพยากรมีลำดับความสำคัญต่ำ และคุณต้องการให้เบราว์เซอร์ลดลำดับความสำคัญของทรัพยากรลงหากวิธีการเรียนรู้ของทรัพยากรนั้นปล่อยให้ว่างauto
: ค่าเริ่มต้นที่ช่วยให้เบราว์เซอร์เลือกลำดับความสำคัญที่เหมาะสมได้
ต่อไปนี้คือตัวอย่างการใช้แอตทริบิวต์ fetchpriority
ในมาร์กอัป รวมถึงพร็อพเพอร์ตี้ priority
ที่เทียบเท่ากับสคริปต์
<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">
<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<script>
fetch('https://example.com/', {priority: 'low'})
.then(data => {
// Trigger a low priority fetch
});
</script>
ผลของลำดับความสำคัญของเบราว์เซอร์และfetchpriority
คุณใช้แอตทริบิวต์ fetchpriority
กับทรัพยากรอื่นๆ ดังที่แสดงในตารางต่อไปนี้เพื่อเพิ่มหรือลดลำดับความสำคัญที่คำนวณได้
fetchpriority="auto"
(◉) ในแต่ละแถวจะทำเครื่องหมายลำดับความสำคัญเริ่มต้นสำหรับทรัพยากรประเภทนั้นๆ
โหลดในระยะการบล็อกเลย์เอาต์ | โหลดทีละรายการในช่วงการบล็อกเลย์เอาต์ | ||||
---|---|---|---|---|---|
ลำดับความสำคัญ การกะพริบ |
VeryHigh | สูง | ปานกลาง | ต่ำ | VeryLow |
ลำดับความสำคัญของ เครื่องมือสำหรับนักพัฒนาเว็บ |
สูงสุด | สูง | ปานกลาง | ต่ำ | ต่ำสุด |
แหล่งข้อมูลหลัก | ◉ | ||||
CSS (ก่อนเวลา**) | ⬆◉ | ⬇ | |||
CSS (ล่าช้า**) | ⬆ | ◉ | ⬇ | ||
CSS (สื่อไม่ตรงกัน***) | ⬆*** | ◉⬇ | |||
สคริปต์ (ก่อนเวลา** หรือไม่จากตัวสแกนการโหลดล่วงหน้า) | ⬆◉ | ⬇ | |||
สคริปต์ (ล่าช้า**) | ⬆ | ◉ | ⬇ | ||
สคริปต์ (ไม่พร้อมกัน/เลื่อนเวลา) | ⬆ | ◉⬇ | |||
แบบอักษร | ◉ | ||||
แบบอักษร (rel=preload) | ⬆◉ | ⬇ | |||
นำเข้า | ◉ | ||||
รูปภาพ (ในวิวพอร์ต - หลังเลย์เอาต์) | ⬆◉ | ⬇ | |||
รูปภาพ (5 ภาพแรก > 10,000px2) | ⬆ | ◉ | ⬇ | ||
รูปภาพ | ⬆ | ◉⬇ | |||
สื่อ (วิดีโอ/เสียง) | ◉ | ||||
XHR (sync) - เลิกใช้งานแล้ว | ◉ | ||||
XHR/การดึงข้อมูล* (อะซิงโครนัส) | ⬆◉ | ⬇ | |||
ดึงข้อมูลล่วงหน้า | ◉ | ||||
XSL | ◉ |
fetchpriority
กำหนดลำดับความสำคัญแบบสัมพัทธ์ ซึ่งหมายความว่าจะเพิ่มหรือลดลำดับความสำคัญเริ่มต้นตามจำนวนที่เหมาะสมแทนที่จะตั้งค่าลำดับความสำคัญเป็น High
หรือ Low
อย่างชัดแจ้ง ซึ่งมักส่งผลให้เกิดลำดับความสำคัญ High
หรือ Low
แต่ก็ไม่เป็นเช่นนั้นเสมอไป เช่น CSS ที่สำคัญที่มี fetchpriority="high"
จะมีลำดับความสำคัญ "สูงมาก"/"สูงสุด" และการใช้ fetchpriority="low"
ในองค์ประกอบเหล่านี้จะมีลำดับความสำคัญ "สูง" ต่อไป ทั้ง 2 กรณีเหล่านี้ยังไม่ได้ตั้งค่าลำดับความสำคัญเป็น High
หรือ Low
อย่างชัดเจน
Use Case
ใช้แอตทริบิวต์ fetchpriority
เมื่อต้องการให้คำใบ้เพิ่มเติมแก่เบราว์เซอร์เกี่ยวกับลำดับความสำคัญในการดึงทรัพยากร
เพิ่มลำดับความสำคัญของรูปภาพ LCP
คุณระบุ fetchpriority="high"
เพื่อเพิ่มลำดับความสำคัญของ LCP หรือรูปภาพที่สำคัญอื่นๆ ได้
<img src="lcp-image.jpg" fetchpriority="high">
การเปรียบเทียบต่อไปนี้แสดงหน้า Google Flights ที่มีภาพพื้นหลัง LCP ซึ่งโหลดโดยมีและไม่มีลำดับความสำคัญในการดึงข้อมูล เมื่อตั้งค่าลำดับความสำคัญเป็น "สูง" LCP ดีขึ้นจาก 2.6 วินาทีเป็น 1.9 วินาที
ลดลำดับความสำคัญของรูปภาพครึ่งหน้าบน
ใช้ fetchpriority="low"
เพื่อลดลำดับความสำคัญของรูปภาพครึ่งหน้าบนที่ไม่สำคัญทันที เช่น ในภาพสไลด์
<ul class="carousel">
<img src="img/carousel-1.jpg" fetchpriority="high">
<img src="img/carousel-2.jpg" fetchpriority="low">
<img src="img/carousel-3.jpg" fetchpriority="low">
<img src="img/carousel-4.jpg" fetchpriority="low">
</ul>
ในการทดสอบแอป Oodle ก่อนหน้านี้ เราใช้วิธีนี้เพื่อลดลำดับความสำคัญของรูปภาพที่ไม่ปรากฏในการโหลด ช่วยลดเวลาในการโหลดหน้าเว็บได้ถึง 2 วินาที
ลดลำดับความสำคัญของทรัพยากรที่โหลดล่วงหน้า
หากไม่ต้องการให้ทรัพยากรที่โหลดล่วงหน้าแข่งขันกับทรัพยากรสำคัญอื่นๆ คุณลดลำดับความสำคัญได้ ใช้เทคนิคนี้กับรูปภาพ สคริปต์ และ CSS
<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<!-- Preload CSS without blocking other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">
จัดลำดับความสำคัญของสคริปต์ใหม่
สคริปต์ที่หน้าเว็บจำเป็นต้องมีการโต้ตอบต้องโหลดอย่างรวดเร็ว แต่ไม่ควรบล็อกทรัพยากรอื่นๆ คุณสามารถทำเครื่องหมายแคมเปญเหล่านี้เป็น async
ด้วยลำดับความสำคัญสูง
<script src="async_but_important.js" async fetchpriority="high"></script>
คุณทำเครื่องหมายสคริปต์เป็น async
ไม่ได้หากสคริปต์ต้องอาศัยสถานะ DOM ที่เฉพาะเจาะจง อย่างไรก็ตาม หากโฆษณาเหล่านี้ทำงานภายหลังในหน้าเว็บ คุณสามารถโหลดด้วยลำดับความสำคัญที่ต่ำกว่าได้ ดังนี้
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
ลดลำดับความสำคัญของการดึงข้อมูลที่ไม่สำคัญ
เบราว์เซอร์จะเรียกใช้ fetch
ด้วยลำดับความสำคัญสูง หากมีการดึงข้อมูลหลายรายการที่อาจเริ่มทำงานพร้อมกัน คุณสามารถใช้ลำดับความสำคัญเริ่มต้นที่สูงสำหรับการดึงข้อมูลที่สำคัญกว่า และลดลำดับความสำคัญของข้อมูลที่สำคัญน้อยกว่า
// Important validation data (high by default)
let authenticate = await fetch('/user');
// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});
ดึงหมายเหตุการใช้งานรายการสำคัญ
สิ่งที่ควรทราบเมื่อใช้ลำดับความสำคัญในการดึงข้อมูลมีดังนี้
- แอตทริบิวต์
fetchpriority
เป็นคำแนะนำ ไม่ใช่คำสั่ง เบราว์เซอร์จะพยายามเคารพความต้องการของนักพัฒนาซอฟต์แวร์ แต่ก็สามารถใช้ค่ากำหนดลำดับความสำคัญของทรัพยากรสำหรับลำดับความสำคัญของทรัพยากรเพื่อแก้ไขความขัดแย้งได้ อย่าสับสนระหว่างลำดับความสำคัญของการดึงข้อมูลกับการโหลดล่วงหน้า
- การโหลดล่วงหน้าเป็นการดึงข้อมูลที่จำเป็น ไม่ใช่คำแนะนำ
- การโหลดล่วงหน้าจะช่วยให้เบราว์เซอร์ค้นพบทรัพยากรได้ตั้งแต่เนิ่นๆ แต่จะยังคงดึงทรัพยากรที่มีลำดับความสำคัญเริ่มต้นได้ ในขณะเดียวกัน ลำดับความสำคัญของการดึงข้อมูลไม่ช่วยเรื่องการค้นพบได้ แต่จะให้คุณเพิ่มหรือลดลำดับความสำคัญในการดึงข้อมูลได้
- คุณจะดูและวัดผลกระทบของการโหลดล่วงหน้าได้ง่ายกว่าผลกระทบของการเปลี่ยนแปลงลำดับความสำคัญ
ลำดับความสำคัญของการดึงข้อมูลจะช่วยเสริมการโหลดล่วงหน้าได้ด้วยการเพิ่มรายละเอียดในการจัดลำดับความสำคัญ หากคุณระบุการโหลดล่วงหน้าเป็นหนึ่งในรายการแรกใน
<head>
สำหรับรูปภาพ LCP แล้ว ลำดับความสำคัญในการดึงข้อมูลhigh
อาจไม่ปรับปรุง LCP มากนัก อย่างไรก็ตาม หากการโหลดล่วงหน้าเกิดขึ้นหลังจากโหลดทรัพยากรอื่นๆ ลำดับความสำคัญของการดึงข้อมูลhigh
จะช่วยปรับปรุง LCP ได้มากกว่า หากรูปภาพที่สำคัญเป็นภาพพื้นหลัง CSS ให้โหลดล่วงหน้าด้วยfetchpriority = "high"
การปรับปรุงเวลาในการโหลดจากการจัดลำดับความสำคัญจะมีความเกี่ยวข้องมากขึ้นในสภาพแวดล้อมที่มีทรัพยากรจำนวนมากแข่งขันกันเพื่อแบนด์วิดท์ของเครือข่ายที่มีอยู่ กรณีนี้เป็นเรื่องปกติสำหรับการเชื่อมต่อ HTTP/1.x ซึ่งดาวน์โหลดพร้อมกันไม่ได้ หรือการเชื่อมต่อ HTTP/2 ที่มีแบนด์วิดท์ต่ำ ในกรณีเหล่านี้ การจัดลำดับความสำคัญจะช่วยแก้ไขปัญหาคอขวดได้
CDN ไม่ได้ใช้การจัดลำดับความสำคัญของ HTTP/2 อย่างเท่าเทียมกัน แม้ว่าเบราว์เซอร์จะสื่อสารลำดับความสำคัญจากลำดับความสำคัญของการดึงข้อมูล แต่ CDN อาจไม่จัดลำดับความสำคัญทรัพยากรตามลำดับที่ระบุ ซึ่งทำให้การทดสอบ "ลำดับความสำคัญของการดึงข้อมูล" ทำได้ยาก จะมีการนำลำดับความสำคัญนี้ไปใช้ทั้งภายในเบราว์เซอร์และกับโปรโตคอลที่รองรับการจัดลำดับความสำคัญ (HTTP/2 และ HTTP/3) การใช้ลำดับความสำคัญของการดึงข้อมูลยังคงคุ้มค่าสำหรับการจัดลำดับความสำคัญของเบราว์เซอร์ภายในที่ไม่ขึ้นอยู่กับการรองรับ CDN หรือต้นทาง เพราะลำดับความสำคัญมักเปลี่ยนแปลงเมื่อเบราว์เซอร์ขอทรัพยากร ตัวอย่างเช่น ทรัพยากรที่มีลำดับความสำคัญต่ำอย่างรูปภาพมักจะถูกระงับไม่ให้มีการส่งคำขอขณะที่เบราว์เซอร์ประมวลผลรายการ
<head>
ที่สำคัญคุณอาจไม่สามารถใช้ "ลำดับความสำคัญของการดึงข้อมูล" ซึ่งเป็นแนวทางปฏิบัติแนะนำในการออกแบบเบื้องต้นได้ ภายหลังในวงจรการพัฒนา คุณจะกำหนดลำดับความสำคัญให้กับทรัพยากรต่างๆ ในหน้าเว็บได้ และหากทรัพยากรเหล่านั้นไม่ตรงกับความคาดหวังของคุณ ก็แนะนำลำดับความสำคัญของการดึงข้อมูลเพื่อเพิ่มประสิทธิภาพเพิ่มเติมได้
เคล็ดลับการใช้การโหลดล่วงหน้า
โปรดคำนึงถึงสิ่งต่อไปนี้เมื่อใช้การโหลดล่วงหน้า
- การรวมการโหลดล่วงหน้าในส่วนหัว HTTP จะทำให้การโหลดล่วงหน้าหมดก่อนรายการอื่นๆ ในลำดับการโหลด
- โดยทั่วไปแล้ว การโหลดล่วงหน้าจะโหลดตามลำดับที่โปรแกรมแยกวิเคราะห์ได้รับสำหรับทุกอย่างที่มีลำดับความสำคัญ "ปานกลาง" โปรดระวังหากคุณใส่การโหลดล่วงหน้า ในตอนต้นของ HTML
- การโหลดล่วงหน้าของแบบอักษรอาจทำงานได้ดีที่สุดที่ส่วนปลายของส่วนหัวหรือส่วนต้นของเนื้อความ
- การนำเข้าการโหลดล่วงหน้า (
import()
หรือmodulepreload
แบบไดนามิก) ควรทำงานหลังจากแท็กสคริปต์ที่ต้องนำเข้า ดังนั้นโปรดโหลดหรือแยกวิเคราะห์สคริปต์ก่อนเพื่อให้ประเมินได้ในขณะที่กำลังโหลดทรัพยากร Dependency - การโหลดรูปภาพล่วงหน้ามีลำดับความสำคัญ "ต่ำ" หรือ "ปานกลาง" โดยค่าเริ่มต้น โดยเรียงลำดับตามสคริปต์แบบไม่พร้อมกันและแท็กที่มีลำดับความสำคัญต่ำหรือต่ำสุดอื่นๆ
ประวัติ
ลำดับความสำคัญของการดึงข้อมูลได้รับการทดสอบครั้งแรกใน Chrome เพื่อเป็นช่วงทดลองใช้จากต้นทางในปี 2018 จากนั้นอีกครั้งในปี 2021 โดยใช้แอตทริบิวต์ importance
ในเวลานั้นเราตั้งชื่อว่า
คำแนะนำลำดับความสำคัญ ตั้งแต่นั้นมาอินเทอร์เฟซได้เปลี่ยนเป็น fetchpriority
สำหรับ HTML และ priority
สำหรับ Fetch API ของ JavaScript โดยเป็นส่วนหนึ่งของกระบวนการมาตรฐานเว็บ เพื่อลดความสับสน เราจึงขอเรียก
"ลำดับความสำคัญในการดึงข้อมูล API นี้"