API ลำดับความสำคัญในการดึงข้อมูลจะระบุลำดับความสำคัญของทรัพยากรที่เกี่ยวข้องกับเบราว์เซอร์ ทำให้มีการโหลดที่เหมาะสมที่สุดและปรับปรุง Core Web Vitals
เมื่อเบราว์เซอร์แยกวิเคราะห์หน้าเว็บและเริ่มค้นพบและดาวน์โหลดทรัพยากร เช่น รูปภาพ สคริปต์ หรือ CSS เบราว์เซอร์จะกำหนด priority ในการดึงข้อมูลเพื่อพยายามดาวน์โหลดทรัพยากรในลำดับที่เหมาะสมที่สุด ลำดับความสำคัญเหล่านี้อาจขึ้นอยู่กับประเภทของทรัพยากรและตำแหน่งของทรัพยากรในเอกสาร เช่น รูปภาพในวิวพอร์ตอาจมีลำดับความสำคัญเป็น High ในขณะที่ลำดับความสำคัญสำหรับ CSS ที่บล็อกการแสดงผลแต่เนิ่นๆ ผ่านทาง <link> ใน <head> อาจเป็น Very High เบราว์เซอร์ค่อนข้างดีในการกำหนดลำดับความสำคัญที่ทำงานได้ดี แต่อาจทำงานได้ไม่ดีในทุกกรณี
ในบทความนี้ เราจะพูดถึง API ลำดับความสำคัญในการดึงข้อมูลและแอตทริบิวต์ HTML ของ fetchpriority ซึ่งช่วยให้คุณสามารถแนะนำลำดับความสำคัญที่เกี่ยวข้องของแหล่งข้อมูล (high หรือ low) ลำดับความสำคัญของการดึงข้อมูลจะช่วยเพิ่มประสิทธิภาพ Core Web Vitals ได้
สรุป
ส่วนสำคัญบางส่วนที่ลำดับความสำคัญของการดึงข้อมูลจะช่วยได้มีดังนี้
- เพิ่มลำดับความสำคัญของรูปภาพ LCP ด้วยการระบุ
fetchpriority="high"ในองค์ประกอบรูปภาพ ซึ่งจะทำให้ LCP เกิดเร็วขึ้น - เพิ่มลำดับความสำคัญของสคริปต์
asyncโดยใช้ความหมายที่ดีกว่าการแฮ็กปัจจุบันที่ใช้กันโดยทั่วไป (ใส่<link rel="preload">สำหรับสคริปต์async) - ลดลำดับความสำคัญของสคริปต์เนื้อหาส่วนปลายเพื่อให้เรียงลำดับรูปภาพได้ดีขึ้น
ที่ผ่านมา นักพัฒนาแอปได้มีอิทธิพลบางส่วน (แต่จำกัด) เหนือลำดับความสำคัญของทรัพยากรด้วยการใช้การโหลดล่วงหน้าและเชื่อมต่อล่วงหน้า ลำดับความสำคัญของการดึงข้อมูลจะช่วยเสริมคำแนะนำด้านทรัพยากรเหล่านี้ แต่คุณจำเป็นต้องทำความเข้าใจว่าสิ่งเหล่านี้เหมาะกับตำแหน่งใด การโหลดล่วงหน้าจะช่วยให้คุณบอกเบราว์เซอร์เกี่ยวกับทรัพยากรสำคัญที่คุณต้องการโหลดได้ตั้งแต่เนิ่นๆ ก่อนที่ระบบจะค้นพบทรัพยากรเหล่านั้นตามปกติ ซึ่งมีประโยชน์อย่างยิ่งสำหรับทรัพยากรที่ค้นหาได้ยาก เช่น แบบอักษรที่รวมอยู่ในสไตล์ชีต ภาพพื้นหลัง หรือทรัพยากรที่โหลดจากสคริปต์ การเชื่อมต่อล่วงหน้าช่วยให้การเชื่อมต่อกับเซิร์ฟเวอร์แบบข้ามต้นทางอุ่นขึ้นและช่วยปรับปรุงเมตริก เช่น Time-to-first-byte และจะมีประโยชน์เมื่อคุณทราบต้นทาง แต่ไม่จำเป็นต้องเป็น URL ที่แน่นอนของทรัพยากรที่จำเป็นต้องใช้
ลำดับความสำคัญในการดึงข้อมูลเป็นสัญญาณที่อิงตามมาร์กอัป (พร้อมใช้งานผ่านแอตทริบิวต์ fetchpriority) ที่นักพัฒนาซอฟต์แวร์สามารถใช้เพื่อระบุลำดับความสำคัญที่เกี่ยวข้องของทรัพยากรหนึ่งๆ ได้ คุณยังใช้คําแนะนําเหล่านี้ผ่าน JavaScript และ API การดึงข้อมูลพร้อมพร็อพเพอร์ตี้ priority เพื่อกำหนดลําดับความสําคัญของการดึงข้อมูลทรัพยากรสําหรับข้อมูลได้อีกด้วย ลำดับความสำคัญของการดึงข้อมูลยังช่วยเสริมการโหลดล่วงหน้าได้ด้วย ถ่ายภาพ Largest Contentful Paint ซึ่งเมื่อโหลดล่วงหน้าแล้วจะยังคงมีลำดับความสำคัญต่ำ หากรูปภาพถูกเลื่อนกลับมาโดยทรัพยากรอื่นๆ ที่มีลำดับความสำคัญต่ำในช่วงแรกๆ การใช้ลำดับความสำคัญในการดึงข้อมูลจะช่วยเร่งการโหลดรูปภาพได้
ลำดับความสำคัญของการดึงข้อมูลพร้อมใช้งานใน Chrome 101 ขึ้นไป
ลำดับความสำคัญของทรัพยากร
ลำดับการดาวน์โหลดทรัพยากรจะขึ้นอยู่กับลำดับความสำคัญที่เบราว์เซอร์กำหนดสำหรับทรัพยากรทุกรายการในหน้านั้น ปัจจัยที่ต่างกันอาจส่งผลต่อตรรกะการคำนวณลำดับความสำคัญ ตัวอย่างเช่น
- CSS, แบบอักษร, สคริปต์, รูปภาพ และทรัพยากรของบุคคลที่สามจะมีลำดับความสำคัญต่างกัน
- ตำแหน่งหรือลำดับที่คุณอ้างอิงทรัพยากรในเอกสารจะมีผลต่อลำดับความสำคัญของทรัพยากรด้วย
- คำแนะนำทรัพยากร
preloadช่วยให้เบราว์เซอร์ค้นพบทรัพยากรได้เร็วขึ้น และส่งผลให้โหลดทรัพยากรก่อนที่เอกสารจะโหลดและมีผลต่อลำดับความสำคัญ - การเปลี่ยนแปลงการคํานวณลําดับความสําคัญสําหรับสคริปต์
asyncหรือdefer
ตารางต่อไปนี้พิจารณาปัจจัยดังกล่าวเพื่อแสดงวิธีการจัดลำดับความสำคัญของทรัพยากรส่วนใหญ่ใน Chrome
| โหลดในระยะการบล็อกเลย์เอาต์ | โหลดทีละรายการในระยะการบล็อกเลย์เอาต์ | ||||
|---|---|---|---|---|---|
| ลำดับความสำคัญ การกะพริบ |
VeryHigh | สูง | ปานกลาง | ต่ำ | VeryLow |
| ลำดับความสำคัญของ เครื่องมือสำหรับนักพัฒนาเว็บ |
สูงสุด | สูง | ปานกลาง | ต่ำ | ต่ำสุด |
| แหล่งข้อมูลหลัก | |||||
| CSS (ก่อนเวลา**) | CSS (ล่าช้า**) | CSS (สื่อไม่ตรงกัน***) | |||
| สคริปต์ (ก่อนเวลา** หรือไม่จากตัวสแกนการโหลดล่วงหน้า) | สคริปต์ (ล่าช้า**) | สคริปต์ (ไม่พร้อมกัน) | |||
| แบบอักษร | แบบอักษร (rel=preload) | ||||
| นำเข้า | |||||
| รูปภาพ (ในวิวพอร์ต) | รูปภาพ (5 ภาพแรก > 10,000px2) | รูปภาพ | |||
| สื่อ (วิดีโอ/เสียง) | |||||
| ดึงข้อมูลล่วงหน้า | |||||
| XSL | |||||
| XHR (ซิงค์) | XHR/การดึงข้อมูล* (อะซิงโครนัส) | ||||
เบราว์เซอร์จะดาวน์โหลดทรัพยากรที่มีลำดับความสำคัญในการประมวลผลเท่ากันตามลำดับที่ค้นพบ คุณสามารถตรวจสอบลำดับความสำคัญที่กำหนดให้กับทรัพยากรต่างๆ ได้เมื่อโหลดหน้าเว็บในแท็บเครือข่ายของ Chrome Dev Tools (ตรวจสอบให้แน่ใจว่าคุณรวมคอลัมน์ลำดับความสำคัญไว้โดยการคลิกขวาที่ส่วนหัวของตาราง)
type = "font" ในหน้ารายละเอียดข่าวของ BBC
เมื่อมีการเปลี่ยนแปลงลําดับความสําคัญ คุณสามารถใช้การตั้งค่าแถวคําขอขนาดใหญ่เพื่อดูทั้งลําดับความสําคัญเริ่มต้นและลําดับความสําคัญสุดท้าย ค่าเดียวกันนี้จะแสดงในเคล็ดลับเครื่องมือ ไม่ว่าการตั้งค่าแถวคําขอขนาดใหญ่จะเป็นอย่างไรก็ตาม
คุณต้องใช้ลําดับความสําคัญในการดึงข้อมูลเมื่อใด
ความรู้เกี่ยวกับตรรกะการจัดลำดับความสำคัญของเบราว์เซอร์จะช่วยให้คุณมีปุ่มเพียงไม่กี่ปุ่มที่สามารถปรับเปลี่ยนลำดับการดาวน์โหลดได้ คุณสามารถ
- วางแท็กทรัพยากร เช่น
<script>และ<link>ตามลำดับที่คุณต้องการดาวน์โหลด โดยทั่วไปแล้ว ทรัพยากรที่มีลำดับความสำคัญเท่ากันจะโหลดตามลำดับที่พบ - ใช้คำแนะนำทรัพยากร
preloadเพื่อดาวน์โหลดทรัพยากรที่จำเป็นก่อนหน้านี้ โดยเฉพาะทรัพยากรที่เบราว์เซอร์ค้นพบได้ยากในช่วงแรก - ใช้
asyncหรือdeferเพื่อดาวน์โหลดสคริปต์โดยไม่บล็อกทรัพยากรอื่นๆ - การโหลดเนื้อหาครึ่งหน้าล่างแบบ Lazy Loading เพื่อให้เบราว์เซอร์สามารถใช้แบนด์วิดท์ที่มีอยู่สำหรับทรัพยากรครึ่งหน้าบนที่สำคัญได้มากขึ้น
เทคนิคเหล่านี้ช่วยในการควบคุมการคำนวณลำดับความสำคัญของเบราว์เซอร์จึงช่วยปรับปรุงประสิทธิภาพและ Core Web Vitals เช่น เมื่อระบบโหลดภาพพื้นหลังสำคัญไว้ล่วงหน้า คุณจะค้นพบได้เร็วขึ้นมาก ซึ่งจะปรับปรุง Largest Contentful Paint (LCP)
บางครั้งแฮนเดิลเหล่านี้อาจไม่เพียงพอที่จะจัดลำดับความสำคัญของทรัพยากรอย่างเหมาะสมสำหรับแอปพลิเคชัน สถานการณ์ที่ลำดับความสำคัญของการดึงข้อมูลอาจมีประโยชน์มีดังนี้
- คุณมีรูปภาพครึ่งหน้าบนหลายภาพ แต่ทุกภาพไม่จำเป็นต้องมีลำดับความสำคัญเท่ากัน ตัวอย่างเช่น ในภาพสไลด์ เฉพาะภาพแรกที่มองเห็นได้เท่านั้นที่ต้องมีลำดับความสำคัญสูงกว่าเมื่อเทียบกับภาพอื่นๆ
- รูปภาพหลักในวิวพอร์ตมักจะเริ่มในลำดับความสำคัญ "ต่ำ" (โปรดทราบว่าการเปลี่ยนแปลงใน Chrome 117 จะกำหนดรูปภาพขนาดใหญ่ 5 รูปแรกเป็น "ปานกลาง" แต่อาจมีหรือไม่มีรูปภาพหลักก็ได้) หลังจากเลย์เอาต์เสร็จสมบูรณ์ Chrome จะพบว่าตัวเองอยู่ในวิวพอร์ตและเพิ่มลำดับความสำคัญให้สูงขึ้น ซึ่งมักจะทำให้การโหลดรูปภาพล่าช้ามากขึ้น การจัดลำดับความสำคัญในการดึงข้อมูลในมาร์กอัปช่วยให้รูปภาพเริ่มในลำดับความสำคัญ "สูง" และเริ่มโหลดได้เร็วขึ้นมาก
โปรดทราบว่ายังต้องมีการโหลดล่วงหน้าสำหรับการค้นพบรูปภาพ LCP ที่รวมเป็นพื้นหลัง CSS ในช่วงแรก และสามารถรวมกับลำดับความสำคัญในการดึงข้อมูลได้โดยรวมfetchpriority='high'ในการโหลดล่วงหน้า มิเช่นนั้นรูปภาพจะยังคงเริ่มด้วยลำดับความสำคัญ "ต่ำ" หรือ "ปานกลาง" สำหรับรูปภาพ - การประกาศสคริปต์เป็น
asyncหรือdeferจะทำให้เบราว์เซอร์โหลดสคริปต์ไม่พร้อมกัน อย่างไรก็ตาม ตามที่เห็นในตารางก่อนหน้านี้ สคริปต์เหล่านี้จะมีลำดับความสำคัญ "ต่ำ" ด้วยเช่นกัน คุณอาจต้องเพิ่มลำดับความสำคัญควบคู่กับการตรวจสอบว่าการดาวน์โหลดไม่พร้อมกัน โดยเฉพาะสคริปต์ที่สำคัญต่อประสบการณ์ของผู้ใช้ - คุณใช้ JavaScript
fetch()API เพื่อดึงทรัพยากรหรือข้อมูลแบบไม่พร้อมกันได้ เบราว์เซอร์กำหนดลำดับความสำคัญ "สูง" ไว้แล้ว อาจมีบางกรณีที่คุณไม่ต้องการให้การดึงข้อมูลทั้งหมดของคุณมีลำดับความสำคัญ "สูง" และต้องการใช้ลำดับความสำคัญอื่นในการดึงข้อมูลแทน ซึ่งจะมีประโยชน์เมื่อเรียกใช้ API เบื้องหลังและผสมการเรียก API ที่ตอบสนองต่อข้อมูลจากผู้ใช้ เช่น การเติมข้อความอัตโนมัติ คุณสามารถติดแท็กการเรียก API เบื้องหลังให้มีลำดับความสำคัญ "ต่ำ" และการเรียก API แบบอินเทอร์แอกทีฟที่มีลำดับความสำคัญ "สูง" ได้ - เบราว์เซอร์จะกำหนดลำดับความสำคัญ "สูง" ให้กับ CSS และแบบอักษร แต่ทรัพยากรดังกล่าวทั้งหมดอาจไม่สำคัญหรือไม่จำเป็นสำหรับ LCP คุณสามารถใช้ลำดับความสำคัญของการดึงข้อมูลเพื่อลดลำดับความสำคัญของทรัพยากรเหล่านี้บางส่วนได้
แอตทริบิวต์ fetchpriority
คุณระบุลำดับความสำคัญของการดึงข้อมูลได้โดยใช้แอตทริบิวต์ HTML fetchpriority คุณใช้แอตทริบิวต์กับแท็ก link, img และ script ได้ แอตทริบิวต์ช่วยให้คุณระบุลำดับความสำคัญของประเภททรัพยากรได้ เช่น CSS, แบบอักษร, สคริปต์ และรูปภาพเมื่อดาวน์โหลดโดยใช้แท็กที่รองรับ
แอตทริบิวต์ fetchpriority ยอมรับค่าใดค่าหนึ่งจาก 3 ค่าดังนี้
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" (◉) ในแต่ละแถวแสดงลําดับความสําคัญเริ่มต้นสำหรับทรัพยากรประเภทนั้นๆ (มีเป็นเอกสารใน Google เอกสารด้วย)
| โหลดในระยะการบล็อกเลย์เอาต์ | โหลดทีละรายการในระยะการบล็อกเลย์เอาต์ | ||||
|---|---|---|---|---|---|
| ลำดับความสำคัญ การกะพริบ |
VeryHigh | สูง | ปานกลาง | ต่ำ | VeryLow |
| ลำดับความสำคัญของ เครื่องมือสำหรับนักพัฒนาเว็บ |
สูงสุด | สูง | ปานกลาง | ต่ำ | ต่ำสุด |
| แหล่งข้อมูลหลัก | ◉ | ||||
| CSS (ก่อนเวลา**) | ⬆◉ | ⬇ | |||
| CSS (ล่าช้า**) | ⬆ | ◉ | ⬇ | ||
| CSS (สื่อไม่ตรงกัน***) | ⬆*** | ◉⬇ | |||
| สคริปต์ (ก่อนเวลา** หรือไม่จากตัวสแกนการโหลดล่วงหน้า) | ⬆◉ | ⬇ | |||
| สคริปต์ (ล่าช้า**) | ⬆ | ◉ | ⬇ | ||
| สคริปต์ (ไม่พร้อมกัน/เลื่อนเวลา) | ⬆ | ◉⬇ | |||
| แบบอักษร | ◉ | ||||
| แบบอักษร (rel=preload) | ⬆◉ | ⬇ | |||
| นำเข้า | ◉ | ||||
| รูปภาพ (ในวิวพอร์ต - หลังเลย์เอาต์) | ⬆◉ | ⬇ | |||
| รูปภาพ (5 ภาพแรก > 10,000px2) | ⬆ | ◉ | ⬇ | ||
| รูปภาพ | ⬆ | ◉⬇ | |||
| สื่อ (วิดีโอ/เสียง) | ◉ | ||||
| XHR (sync) - เลิกใช้งานแล้ว | ◉ | ||||
| XHR/การดึงข้อมูล* (อะซิงโครนัส) | ⬆◉ | ⬇ | |||
| ดึงข้อมูลล่วงหน้า | ◉ | ||||
| XSL | ◉ | ||||
โปรดทราบว่า fetchpriority จะกำหนดลำดับความสำคัญแบบสัมพัทธ์ กล่าวคือจะเพิ่มหรือลดลำดับความสำคัญเริ่มต้นตามจำนวนที่เหมาะสม แทนที่จะตั้งค่าลำดับความสำคัญเป็น "สูง" หรือ "ต่ำ" อย่างชัดเจน และเบราว์เซอร์จะกำหนดลำดับความสำคัญแบบสัมพัทธ์ ซึ่งมักจะเป็น "สูง" หรือ "ต่ำ" แต่ก็ไม่เสมอไป เช่น CSS ที่สำคัญซึ่งมี fetchpriority="high" จะยังคงมีลำดับความสำคัญเป็น "สูงมาก"/"สูงสุด" และการใช้ fetchpriority="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'">
จัดลำดับความสำคัญของสคริปต์ใหม่
สคริปต์ที่จำเป็นสำหรับการทำให้บางส่วนของหน้าเว็บโต้ตอบได้เป็นสิ่งสำคัญ แต่ไม่ควรบล็อกทรัพยากรอื่นๆ คุณสามารถทำเครื่องหมายกลุ่มเหล่านี้ให้เป็นอะซิงโครนัสที่มีลำดับความสำคัญสูงได้
<script src="async_but_important.js" async fetchpriority="high"></script>
ทำเครื่องหมายสคริปต์เป็นอะซิงโครนัสไม่ได้ หากสคริปต์ต้องอาศัยสถานะ 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เป็นเพียงคำแนะนำ ไม่ใช่คำสั่ง เบราว์เซอร์จะพยายามดำเนินการตามค่ากำหนดของนักพัฒนาซอฟต์แวร์ นอกจากนี้ยังเป็นไปได้ว่าเบราว์เซอร์จะใช้ค่ากำหนดของตนสำหรับลำดับความสำคัญของทรัพยากรตามที่จำเป็นในกรณีที่มีความขัดแย้ง ลำดับความสำคัญของการดึงข้อมูลไม่ควรสับสนกับการโหลดล่วงหน้า ทั้ง 2 สูตรแตกต่างกันเนื่องจากสาเหตุต่อไปนี้
- การโหลดล่วงหน้าเป็นการดึงข้อมูลที่จำเป็นและไม่ใช่คำแนะนำ
- การโหลดล่วงหน้าช่วยให้เบราว์เซอร์ค้นพบทรัพยากรก่อนเวลา แต่จะยังดึงทรัพยากรดังกล่าวด้วยลำดับความสำคัญเริ่มต้น ในทางกลับกัน ลำดับความสำคัญของการดึงข้อมูลไม่ได้ช่วยเรื่องการค้นพบได้ แต่จะช่วยให้คุณเพิ่มหรือลดลำดับความสำคัญในการดึงข้อมูลได้
- สังเกตและวัดผลของการโหลดล่วงหน้าได้ง่ายกว่า
ลำดับความสำคัญของการดึงข้อมูลจะช่วยเสริมการโหลดล่วงหน้าได้ด้วยการเพิ่มรายละเอียดในการจัดลำดับความสำคัญ หากคุณระบุการโหลดล่วงหน้าเป็นหนึ่งในรายการแรกใน
<head>สำหรับรูปภาพ LCP แล้ว ลำดับความสำคัญในการดึงข้อมูลhighอาจไม่ทำให้ได้รับประโยชน์มากนัก อย่างไรก็ตาม หากการโหลดล่วงหน้าเกิดขึ้นหลังจากทรัพยากรอื่นๆ ลำดับความสำคัญของการดึงข้อมูลhighจะช่วยปรับปรุง LCP ได้ หากรูปภาพสำคัญเป็นภาพพื้นหลัง CSS คุณควรโหลดล่วงหน้าด้วยfetchpriority = "high"ประโยชน์ที่เห็นได้ชัดเนื่องจากการจัดลำดับความสำคัญจะมีความเกี่ยวข้องมากขึ้นในสภาพแวดล้อมที่มีทรัพยากรจำนวนมากต้องแข่งกับแบนด์วิดท์เครือข่ายที่มีอยู่ กรณีนี้พบได้บ่อยในการเชื่อมต่อ HTTP/1.x ในกรณีที่ดาวน์โหลดพร้อมกันไม่ได้ หรือในการเชื่อมต่อ HTTP/2 ที่ใช้แบนด์วิดท์ต่ำ การจัดลำดับความสำคัญช่วยแก้ปัญหาคอขวดในเงื่อนไขเหล่านี้ได้
CDN ไม่ได้ใช้การจัดลำดับความสำคัญ HTTP/2 อย่างเท่าเทียมกัน แม้ว่าเบราว์เซอร์จะแจ้งลำดับความสำคัญที่แนะนำโดยใช้ "ลำดับความสำคัญของการดึงข้อมูล" แต่ CDN อาจไม่จัดลำดับความสำคัญของทรัพยากรใหม่ตามลำดับที่จำเป็น ซึ่งทำให้การทดสอบลำดับความสำคัญของการดึงข้อมูลเป็นไปได้ยาก จะมีการนำลำดับความสำคัญนี้ไปใช้ทั้งภายในเบราว์เซอร์และกับโปรโตคอลที่สนับสนุนการจัดลำดับความสำคัญ (HTTP/2 และ HTTP/3) แม้จะใช้เพียงการจัดลำดับความสำคัญของเบราว์เซอร์ภายในที่ไม่ขึ้นอยู่กับการสนับสนุน CDN หรือต้นทาง เนื่องจากมักจะมีการเปลี่ยนแปลงเมื่อเบราว์เซอร์ขอทรัพยากร ตัวอย่างเช่น ทรัพยากรที่มีลำดับความสำคัญต่ำอย่างรูปภาพมักถูกกันไม่ให้ขอในขณะที่เบราว์เซอร์ประมวลผลรายการ
<head>ที่สำคัญอาจเป็นไปไม่ได้ที่จะนำลำดับความสำคัญของการดึงข้อมูลมาใช้ ซึ่งเป็นแนวทางปฏิบัติแนะนำในการออกแบบเบื้องต้นของคุณ ซึ่งเป็นการเพิ่มประสิทธิภาพที่คุณสามารถนำไปใช้ภายหลังในวงจรการพัฒนา คุณสามารถตรวจสอบลำดับความสำคัญที่กำหนดให้กับทรัพยากรต่างๆ ในหน้าเว็บ และหากทรัพยากรเหล่านั้นไม่ตรงกับความคาดหวังของคุณ ก็แนะนำลำดับความสำคัญของการดึงข้อมูลเพื่อเพิ่มประสิทธิภาพต่อไป
การใช้ "การโหลดล่วงหน้า" หลังจาก Chrome 95
ฟีเจอร์ "ลำดับความสำคัญในการดึงข้อมูล" มีให้ทดลองใช้ใน Chrome 73 ถึง 76 แต่ไม่ได้เปิดตัวเนื่องจากปัญหาเรื่องลำดับความสำคัญของการโหลดล่วงหน้าที่แก้ไขแล้วใน Chrome 95 ก่อน Chrome 95 คำขอที่ออกผ่าน <link rel=preload> จะเริ่มต้นก่อนคำขออื่นๆ ที่โปรแกรมสแกนการโหลดล่วงหน้าจะเห็นเสมอ แม้ว่าคำขออื่นๆ จะมีลำดับความสำคัญสูงกว่าก็ตาม
การแก้ไขใน Chrome 95 และการเพิ่มประสิทธิภาพสำหรับ "ลำดับความสำคัญของการดึงข้อมูล" เราหวังว่านักพัฒนาซอฟต์แวร์จะเริ่มใช้การโหลดล่วงหน้าสำหรับจุดประสงค์การใช้งาน เพื่อโหลดทรัพยากรที่โปรแกรมแยกวิเคราะห์ตรวจไม่พบล่วงหน้า (แบบอักษร การนำเข้า รูปภาพ LCP พื้นหลัง) ตำแหน่งของคำแนะนำ preload จะมีผลเมื่อมีการโหลดทรัพยากรล่วงหน้า สิ่งสำคัญบางประการในการใช้การโหลดล่วงหน้ามีดังนี้
- การรวมการโหลดล่วงหน้าในส่วนหัว HTTP จะทำให้การโหลดล่วงหน้าข้ามหน้าคำสั่งอื่นๆ ได้
- โดยทั่วไป การโหลดล่วงหน้าจะโหลดตามลำดับที่โปรแกรมแยกวิเคราะห์ได้รับสำหรับทุกสิ่งที่มีลำดับความสำคัญ "ปานกลาง" ดังนั้นโปรดระวังหากคุณรวมการโหลดล่วงหน้าไว้ที่ช่วงต้นของ HTML
- การโหลดล่วงหน้าสำหรับแบบอักษรจะทำงานได้ดีที่สุดในช่วงท้ายของส่วนหัวหรือส่วนต้นของเนื้อความ
- การนำเข้าการโหลดล่วงหน้า (
import()หรือmodulepreloadแบบไดนามิก) ควรทำหลังแท็กสคริปต์ที่ต้องนำเข้า (เพื่อให้ระบบโหลด/แยกวิเคราะห์สคริปต์จริงก่อน) โดยทั่วไปแล้ว หากแท็กสคริปต์โหลดสคริปต์ที่จะเรียกโหลดทรัพยากร Dependency ให้ตรวจสอบว่า<link rel=preload>สำหรับทรัพยากร Dependency อยู่หลังแท็กสคริปต์หลัก ไม่เช่นนั้นทรัพยากร Dependency อาจโหลดก่อนสคริปต์หลัก ในลำดับที่เหมาะสม ระบบจะแยกวิเคราะห์/ประเมินสคริปต์หลักขณะที่กำลังโหลดทรัพยากร Dependency - การโหลดรูปภาพล่วงหน้ามีลำดับความสำคัญ "ต่ำ" หรือ "ปานกลาง" (ไม่มีลำดับความสำคัญในการดึงข้อมูล) และควรเรียงลำดับตามสคริปต์แบบไม่พร้อมกันและแท็กที่มีลำดับความสำคัญต่ำหรือต่ำสุดอื่นๆ
ประวัติ
ลำดับความสำคัญของการดึงข้อมูลได้รับการทดสอบครั้งแรกใน Chrome เป็นช่วงทดลองใช้จากต้นทางในปี 2018 จากนั้นใช้อีกครั้งในปี 2021 โดยใช้แอตทริบิวต์ importance ในเวลานั้นเรารู้จักกันในชื่อคำแนะนำลำดับความสำคัญ ตั้งแต่นั้นเป็นต้นมาอินเทอร์เฟซได้เปลี่ยนเป็น fetchpriority สำหรับ HTML และ priority สำหรับ Fetch API ของ JavaScript โดยเป็นส่วนหนึ่งของกระบวนการมาตรฐานเว็บ เพื่อลดความสับสน เราจึงเรียก API นี้ว่า "ลำดับความสำคัญในการดึงข้อมูล"
บทสรุป
นักพัฒนาแอปน่าจะสนใจเรื่อง "ลำดับความสำคัญของการดึงข้อมูล" จากการแก้ไขลักษณะการทำงานของการโหลดล่วงหน้า รวมถึงการมุ่งเน้นที่ Core Web Vitals และ LCP เมื่อเร็วๆ นี้ ตอนนี้มีปุ่มเพิ่มเติมเพื่อให้บรรลุลำดับการโหลดที่ต้องการ