หน้านี้ได้รับการแปลโดย Cloud Translation API

เพิ่มประสิทธิภาพการโหลดทรัพยากรด้วย Fetch Priority API

Fetch Priority API จะระบุลำดับความสำคัญแบบสัมพัทธ์ของทรัพยากรกับเบราว์เซอร์ ทำให้โหลดได้อย่างมีประสิทธิภาพสูงสุดและปรับปรุง Core Web Vitals

Addy Osmani

Leena Sohoni

Patrick Meenan

Barry Pollard

การรองรับเบราว์เซอร์

แหล่งที่มา

เมื่อเบราว์เซอร์แยกวิเคราะห์หน้าเว็บและเริ่มค้นพบและดาวน์โหลดทรัพยากร เช่น รูปภาพ สคริปต์ หรือ CSS เบราว์เซอร์จะกำหนดการดึงข้อมูล priority เพื่อให้ดาวน์โหลดตามลำดับที่เหมาะสมที่สุด ลำดับความสำคัญของทรัพยากรมักจะขึ้นอยู่กับทรัพยากรและตำแหน่งของทรัพยากรนั้นในเอกสาร ตัวอย่างเช่น รูปภาพในวิวพอร์ตอาจมีลำดับความสำคัญ High และลำดับความสำคัญสำหรับ CSS ที่บล็อกการแสดงผลซึ่งโหลดล่วงหน้าโดยใช้ <link> ใน <head> อาจเป็น Very High เบราว์เซอร์ค่อนข้างดีในการกำหนดลำดับความสำคัญที่ทำงานได้ดี แต่อาจไม่ดีเท่าที่ควรในทุกกรณี

หน้านี้จะพูดถึง Fetch Priority API และแอตทริบิวต์ HTML fetchpriority ซึ่งช่วยให้คุณให้คำแนะนำเกี่ยวกับลำดับความสำคัญแบบสัมพัทธ์ของทรัพยากรได้ (highหรือ low) การดึงข้อมูลลำดับความสำคัญช่วยเพิ่มประสิทธิภาพ Core Web Vitals ได้

สรุป

ส่วนสำคัญบางส่วนที่ "การดึงข้อมูลลำดับความสำคัญ" สามารถช่วยได้มีดังนี้

การเพิ่มลำดับความสำคัญของรูปภาพ LCP โดยการระบุ fetchpriority="high" ในองค์ประกอบรูปภาพ ซึ่งทำให้ LCP เกิดขึ้นเร็วขึ้น
เพิ่มลำดับความสำคัญของสคริปต์ async โดยใช้ความหมายที่ดีกว่าการแฮ็กที่ใช้กันมากที่สุดในปัจจุบัน (ใส่ <link rel="preload"> สำหรับสคริปต์ async)
ลดลำดับความสำคัญของสคริปต์ส่วนปลายเพื่อให้เรียงลำดับกับรูปภาพได้ดีขึ้น

มุมมองแถบแสดงตัวอย่าง ซึ่งเปรียบเทียบการทดสอบ 2 รายการในหน้าแรกของ Google Flights ที่ด้านล่าง ระบบจะใช้ลำดับความสำคัญของการดึงข้อมูลเพื่อเพิ่มลำดับความสำคัญของรูปภาพหลัก ส่งผลให้ LCP ลดลง 0.7 วินาที — ดึงข้อมูล Priority ปรับปรุง Largest Contentful Paint จาก 2.6 ถึง 1.9 วินาทีในการทดสอบ Google Flights

ที่ผ่านมานักพัฒนาซอฟต์แวร์มีอิทธิพลต่อลำดับความสำคัญของทรัพยากรอย่างจำกัดโดยใช้การโหลดล่วงหน้าและเชื่อมต่อล่วงหน้า การโหลดล่วงหน้าช่วยให้คุณบอกเบราว์เซอร์เกี่ยวกับทรัพยากรสำคัญที่คุณต้องการโหลดตั้งแต่เนิ่นๆ ก่อนที่เบราว์เซอร์จะค้นพบทรัพยากรเหล่านั้นโดยธรรมชาติ วิธีนี้มีประโยชน์อย่างยิ่งสำหรับทรัพยากรที่ค้นหาได้ยาก เช่น แบบอักษรที่อยู่ในสไตล์ชีต ภาพพื้นหลัง หรือทรัพยากรที่โหลดจากสคริปต์ การเชื่อมต่อล่วงหน้าช่วยให้การเชื่อมต่อกับเซิร์ฟเวอร์แบบข้ามต้นทางมีความปลอดภัยมากขึ้น และช่วยปรับปรุงเมตริกต่างๆ อย่างเช่น Time to first Byte ได้ ซึ่งมีประโยชน์เมื่อคุณทราบต้นทางแต่ไม่จำเป็นต้องเป็น URL ที่แน่ชัดของทรัพยากรที่จำเป็น

ลำดับความสำคัญการดึงข้อมูลจะเสริมคำแนะนำทรัพยากรเหล่านี้ เป็นสัญญาณตามมาร์กอัปซึ่งพร้อมใช้งานผ่านแอตทริบิวต์ fetchpriority ซึ่งนักพัฒนาแอปใช้เพื่อระบุลำดับความสำคัญแบบสัมพัทธ์ของทรัพยากรแต่ละรายการได้ นอกจากนี้คุณยังใช้คําแนะนําเหล่านี้ผ่าน JavaScript และ Fetch API กับพร็อพเพอร์ตี้ priority ได้ด้วย เพื่อให้มีผลต่อลําดับความสําคัญของการดึงข้อมูลทรัพยากรที่สร้างขึ้นสําหรับข้อมูล การดึงข้อมูลลำดับความสำคัญยังช่วยเสริมการโหลดล่วงหน้า ถ่ายรูป Largest Contentful Paint ซึ่งเมื่อโหลดล่วงหน้าแล้วจะยังคงมีลำดับความสำคัญต่ำ หากทรัพยากรอื่นที่มีลำดับความสำคัญต่ำส่งย้อนกลับ การใช้ "ลำดับความสำคัญการดึงข้อมูล" จะช่วยให้รูปภาพโหลดได้เร็วเพียงใด

ลำดับความสำคัญของทรัพยากร

ลำดับการดาวน์โหลดทรัพยากรขึ้นอยู่กับลำดับความสำคัญที่เบราว์เซอร์กำหนดไว้สำหรับ ทรัพยากรทั้งหมดบนหน้า ปัจจัยที่อาจส่งผลต่อการคำนวณลำดับความสำคัญ ตรรกะมีดังนี้

ประเภทของทรัพยากร เช่น CSS, แบบอักษร, สคริปต์, รูปภาพ และทรัพยากรของบุคคลที่สาม
ตำแหน่งหรือลำดับของเอกสารอ้างอิงทรัพยากร
มีการใช้แอตทริบิวต์ async หรือ defer ในสคริปต์หรือไม่

ตารางต่อไปนี้แสดงวิธีที่ Chrome จัดลำดับความสำคัญและจัดลำดับทรัพยากรส่วนใหญ่

ตัวอย่างวิธีการอ่านตารางนี้

CSS ในยุคแรกๆ (เช่น CSS ใน <head>) คือ highest โดยค่าเริ่มต้น และเลย์เอาต์แบบบล็อก
CSS ในช่วงท้าย (เช่น CSS ที่อยู่ตรงกลาง <body>) จะไม่บล็อกเลย์เอาต์เริ่มต้น ระบบจะไม่ได้โหลดทั้งหมดในขณะที่เบราว์เซอร์อยู่ในช่วงบล็อกเลย์เอาต์นี้ และจะโหลดทรัพยากรอื่นทีละรายการแทนการโหลดทีละ 1 รายการจนกว่าเบราว์เซอร์จะออกจากระยะการบล็อกเลย์เอาต์ เพื่อให้เบราว์เซอร์สามารถให้ความสำคัญกับทรัพยากรที่สำคัญกว่า
CSS ที่ไม่ตรงกัน (เช่น สไตล์ชีต media="print" เมื่อหน้าโหลดบนหน้าจอ ไม่ถูกพิมพ์) จะถูกโหลดด้วยลำดับความสำคัญ lowest

มีคำอธิบายเพิ่มเติมในเชิงอรรถของตาราง

	โหลดในช่วงบล็อกเลย์เอาต์		โหลดทีละรายการในช่วงการบล็อกเลย์เอาต์
ลำดับความสำคัญของ การกะพริบ	VeryHigh	สูง	ปานกลาง	ต่ำ	VeryLow
DevTools Priority	สูงสุด	สูง	ปานกลาง	ต่ำ	ต่ำสุด
	แหล่งข้อมูลหลัก
	CSS (ก่อนกำหนด**)		CSS (ล่าช้า**)		CSS (สื่อไม่ตรงกัน***)
		สคริปต์ (ก่อนเวลา** หรือไม่มาจากเครื่องสแกนการโหลดล่วงหน้า)	สคริปต์ (ล่าช้า**)	สคริปต์ (ไม่พร้อมกัน)
	แบบอักษร	แบบอักษร (rel=preload)
		นำเข้า
		รูปภาพ (ในวิวพอร์ต)	รูปภาพ (5 ภาพแรก > 10,000 พิกเซล)	รูปภาพ
				สื่อ (วิดีโอ/เสียง)
					ดึงข้อมูลล่วงหน้า
		XSL
	XHR (ซิงค์)	XHR/fetch* (ไม่พร้อมกัน)

หมายเหตุ:
* การโหลดล่วงหน้าโดยใช้ "as" หรือดึงข้อมูลที่มี "destination" ที่เจาะจงจะใช้ลำดับความสำคัญของปลายทางที่ส่งคำขอ ตัวอย่างเช่น การโหลดล่วงหน้า as="style" จะใช้ลำดับความสำคัญสูงสุด หากไม่มีปลายทางที่ชัดเจน ระบบจะให้ความสำคัญกับการดึงข้อมูลเหมือน XHR ที่ไม่พร้อมกัน
** "ก่อนเวลา" คือได้รับคำขอก่อนที่จะมีการขอรูปภาพที่ไม่ได้โหลดล่วงหน้า และ "ล่าช้า" หลังจากมีการขอรูปภาพที่ไม่ได้โหลดล่วงหน้า
*** ตัวสแกนการโหลดล่วงหน้าไม่ได้ดึงข้อมูล CSS ที่เครื่องมือสแกนการโหลดล่วงหน้าไม่ได้ดึงข้อมูล CSS และระบบจะประมวลผลเฉพาะเมื่อโปรแกรมแยกวิเคราะห์หลักเข้าถึง CSS ดังกล่าวเท่านั้น ซึ่งโดยปกติแล้วหมายความว่าระบบดึงข้อมูลล่าช้ามาก

รูปภาพเริ่มต้นที่ "ต่ำ" ลำดับความสำคัญโดยค่าเริ่มต้น เมื่อถึงเวลาที่กำหนด รูปภาพภายในวิวพอร์ตจะได้รับการเพิ่มคุณภาพเป็น "สูง" ใน Chrome 117 ระบบจะตั้งค่ารูปภาพขนาดใหญ่ 5 รูปแรกเป็น "ปานกลาง" เร็วขึ้น และสามารถดึงข้อมูล 2 โหมดพร้อมกันระหว่าง "โหมดเข้มงวด" ระยะแรก การติดแท็กรูปภาพที่สำคัญในมาร์กอัปโดยใช้ fetchpriority="high" จะช่วยให้รูปภาพเริ่มต้นที่ "สูง" ได้ ทันทีและโหลดได้เร็วขึ้นมาก

เบราว์เซอร์จะดาวน์โหลดทรัพยากรที่มีลำดับความสำคัญในการคำนวณเดียวกันตามลำดับที่พบ คุณสามารถตรวจสอบลำดับความสำคัญที่กำหนดให้ทรัพยากรต่างๆ ได้เมื่อโหลดหน้าเว็บในแท็บเครือข่ายเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (ตรวจสอบว่าคุณใส่คอลัมน์ลำดับความสำคัญโดยคลิกขวาที่ส่วนหัวในตารางแล้วทำเครื่องหมายในช่องนั้น)

แท็บเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดงรายการทรัพยากรแบบอักษรจำนวนมาก ทุกข้อมีความสำคัญสูงสุด — ลำดับความสำคัญของแหล่งข้อมูล `type = "font"` ในหน้ารายละเอียดข่าว BBC

แท็บเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดงรายการทรัพยากรแบบอักษรจำนวนมาก โดยจะมีทั้งลำดับความสำคัญต่ำและสูง — ลำดับความสำคัญของแหล่งข้อมูล `type = "script"` ในหน้ารายละเอียดข่าว BBC

เมื่อมีการเปลี่ยนแปลงลำดับความสำคัญ คุณจะเห็นทั้งลำดับความสำคัญเริ่มต้นและสุดท้ายในการตั้งค่าแถวคำขอขนาดใหญ่หรือในเคล็ดลับเครื่องมือ

แท็บเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome "แถวคำขอขนาดใหญ่" จะถูกเลือกไว้ และคอลัมน์ "ลำดับความสำคัญ" จะแสดงรูปภาพแรกที่มีลำดับความสำคัญสูง และคอลัมน์ "ลำดับความสำคัญ" ที่แสดงลำดับความสำคัญเริ่มต้นของสื่อด้านล่าง และพารามิเตอร์เดียวกันนี้จะแสดงอยู่ในเคล็ดลับเครื่องมือ — การเปลี่ยนแปลงลำดับความสำคัญในเครื่องมือสำหรับนักพัฒนาเว็บ

เมื่อใดที่คุณอาจต้องใช้ลำดับความสำคัญในการดึงข้อมูล

เมื่อเข้าใจตรรกะการจัดลำดับความสำคัญของเบราว์เซอร์แล้ว คุณก็ปรับลำดับการดาวน์โหลดของหน้าเว็บเพื่อเพิ่มประสิทธิภาพและ Core Web Vitals ได้ ตัวอย่างสิ่งที่คุณเปลี่ยนได้เพื่อกำหนดลำดับความสำคัญของการดาวน์โหลดทรัพยากรมีดังนี้

วางแท็กทรัพยากร เช่น <script> และ <link> ตามลำดับที่คุณต้องการให้เบราว์เซอร์ดาวน์โหลด โดยทั่วไปทรัพยากรที่มีลำดับความสำคัญเท่ากันจะโหลดตามลำดับที่ค้นพบ
ใช้คำแนะนำเกี่ยวกับทรัพยากร preload เพื่อดาวน์โหลดทรัพยากรที่จำเป็นได้เร็วขึ้น โดยเฉพาะสำหรับทรัพยากรที่เบราว์เซอร์ค้นพบได้ยากในช่วงแรก
ใช้ async หรือ defer เพื่อดาวน์โหลดสคริปต์โดยไม่บล็อกทรัพยากรอื่นๆ
โหลดเนื้อหาครึ่งหน้าล่างแบบ Lazy Loading เพื่อให้เบราว์เซอร์ใช้แบนด์วิดท์ที่มีอยู่สำหรับทรัพยากรครึ่งหน้าบนที่สำคัญกว่าได้

เทคนิคเหล่านี้ช่วยควบคุมการคำนวณลำดับความสำคัญของเบราว์เซอร์ จึงช่วยปรับปรุงประสิทธิภาพและ Core Web Vitals เช่น เมื่อโหลดภาพพื้นหลังที่สำคัญไว้ล่วงหน้า ระบบจะค้นพบภาพพื้นหลังนั้นได้เร็วขึ้นซึ่งเป็นการปรับปรุง Largest Contentful Paint (LCP)

บางครั้งแฮนเดิลเหล่านี้อาจไม่เพียงพอที่จะจัดลำดับความสำคัญทรัพยากรอย่างเหมาะสมสำหรับแอปพลิเคชันของคุณ ต่อไปนี้เป็นสถานการณ์บางส่วนที่การดึงข้อมูลลำดับความสำคัญอาจมีประโยชน์

คุณมีรูปภาพครึ่งหน้าบนหลายรูป แต่บางรูปไม่ควรมีลำดับความสำคัญเท่ากัน ตัวอย่างเช่น ในภาพสไลด์ เฉพาะรูปภาพแรกที่มองเห็นได้ที่ต้องการลำดับความสำคัญสูงกว่า ส่วนบางภาพนั้นมักตั้งค่าลำดับความสำคัญที่ต่ำกว่าหน้าจอได้
รูปภาพภายในวิวพอร์ตมักจะเริ่มที่ลำดับความสำคัญ Low หลังจากเลย์เอาต์เสร็จสมบูรณ์ Chrome จะพบว่าผู้ใช้อยู่ในวิวพอร์ตและเพิ่มลำดับความสำคัญของเลย์เอาต์ ซึ่งโดยปกติจะเพิ่มความล่าช้าอย่างมากในการโหลดรูปภาพที่สำคัญ เช่น รูปภาพหลัก การระบุลำดับความสำคัญในการดึงข้อมูลในมาร์กอัปจะทำให้รูปภาพเริ่มต้นที่ลำดับความสำคัญ High และเริ่มโหลดได้เร็วขึ้นมาก ในกรณีเช่นนี้ Chrome จะกำหนดให้รูปภาพขนาดใหญ่ 5 ภาพแรกมีลำดับความสำคัญเป็น Medium ซึ่งจะช่วยได้ แต่ fetchpriority="high" ที่เหมาะสมยิ่งดีขึ้นไปอีก

อย่างไรก็ตาม คุณยังต้องโหลดล่วงหน้าเพื่อให้ค้นพบรูปภาพ LCP ได้เร็วขึ้นที่รวมอยู่ในพื้นหลัง CSS เพื่อเพิ่มประสิทธิภาพภาพพื้นหลัง ลำดับความสำคัญที่รวม fetchpriority='high' ไว้ในการโหลดล่วงหน้า
การประกาศสคริปต์เป็น async หรือ defer จะบอกให้เบราว์เซอร์โหลดแบบไม่พร้อมกัน อย่างไรก็ตาม ดังที่แสดงในตารางลำดับความสำคัญ สคริปต์เหล่านี้จะได้รับการกำหนดเป็น "ต่ำ" เช่นกัน ลำดับความสำคัญ คุณอาจต้องการเพิ่มลำดับความสำคัญขณะเดียวกันก็ทำการดาวน์โหลดไม่พร้อมกัน โดยเฉพาะสำหรับสคริปต์ที่สำคัญต่อประสบการณ์ของผู้ใช้
หากคุณใช้ JavaScript fetch() API เพื่อดึงทรัพยากรหรือข้อมูลแบบไม่พร้อมกัน เบราว์เซอร์จะกำหนดลำดับความสำคัญ High ให้ คุณอาจต้องการให้การดึงข้อมูลบางส่วนทำงานด้วยลำดับความสำคัญที่ต่ำกว่า โดยเฉพาะในกรณีที่คุณรวมการเรียก API ในเบื้องหลังกับการเรียก API ที่ตอบสนองต่อข้อมูลจากผู้ใช้ ทำเครื่องหมายการเรียก API ในเบื้องหลังว่ามีลำดับความสำคัญเป็น Low และการเรียก API แบบอินเทอร์แอกทีฟเป็นลำดับความสำคัญ High
เบราว์เซอร์จะกำหนดให้ CSS และแบบอักษรมีลำดับความสำคัญเป็น High แต่ทรัพยากรบางส่วนอาจสำคัญกว่ารายการอื่นๆ คุณสามารถใช้ลำดับความสำคัญในการดึงข้อมูลเพื่อลดลำดับความสำคัญของทรัพยากรที่ไม่สำคัญ (โปรดทราบว่า CSS ในตอนต้นคือการบล็อกการแสดงผล ดังนั้นโดยทั่วไปจึงควรมีลำดับความสำคัญเป็น High)

แอตทริบิวต์ `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" (◉) ในแต่ละแถวจะระบุลำดับความสำคัญเริ่มต้นสำหรับทรัพยากรประเภทนั้นๆ (มีให้ใช้งานในรูปแบบเอกสารใน Google เอกสารด้วย)

ตัวอย่างวิธีการอ่านตารางนี้

CSS ในช่วงแรก (เช่น CSS ใน <head>) คือ highest โดยค่าเริ่มต้น (◉) แม้ว่าคุณจะใช้ fetchpriority=high (⬆) ค่าจะไม่เพิ่มขึ้นอีกเนื่องจากอยู่ในระดับที่สูงได้ หากคุณลดต่ำลงด้วย fetchpriority=low (⬇) คะแนนจะลดลงเหลือ high เท่านั้นและจะไม่ลดลงอีก ในทั้ง 2 กรณี โฆษณาสามารถโหลดได้ในระยะบล็อกเลย์เอาต์

มีคำอธิบายเพิ่มเติมในเชิงอรรถของตาราง

	โหลดในช่วงบล็อกเลย์เอาต์		โหลดทีละรายการในช่วงบล็อกเลย์เอาต์
ลำดับความสำคัญของ การกะพริบ	VeryHigh	สูง	ปานกลาง	ต่ำ	VeryLow
DevTools Priority	สูงสุด	สูง	ปานกลาง	ต่ำ	ต่ำสุด
แหล่งข้อมูลหลัก	◉
CSS (ก่อนกำหนด**)	⬆◉	⬇
CSS (ล่าช้า**)		⬆	◉	⬇
CSS (สื่อไม่ตรงกัน***)		⬆***			◉⬇
สคริปต์ (ก่อนเวลา** หรือไม่มาจากเครื่องสแกนการโหลดล่วงหน้า)		⬆◉		⬇
สคริปต์ (ล่าช้า**)		⬆	◉	⬇
สคริปต์ (ไม่พร้อมกัน/เลื่อนเวลา)		⬆		◉⬇
แบบอักษร	◉
แบบอักษร (rel=preload)		⬆◉		⬇
นำเข้า		◉
ภาพ (ในวิวพอร์ต - หลังการออกแบบ)		⬆◉		⬇
รูปภาพ (5 ภาพแรก > 10,000 พิกเซล)		⬆	◉	⬇
รูปภาพ		⬆		◉⬇
สื่อ (วิดีโอ/เสียง)				◉
XHR (ซิงค์) - เลิกใช้งานแล้ว	◉
XHR/fetch* (ไม่พร้อมกัน)		⬆◉		⬇
ดึงข้อมูลล่วงหน้า					◉
XSL		◉

หมายเหตุ:
* โหลดล่วงหน้าโดยใช้ "as" หรือดึงข้อมูลโดยใช้ "destination" ที่ระบุให้ใช้ลำดับความสำคัญของปลายทางที่ขอ ตัวอย่างเช่น การโหลดล่วงหน้า as="style" จะใช้ลำดับความสำคัญสูงสุด หากไม่มีการกำหนดปลายทางที่ชัดแจ้ง การดึงข้อมูลจะได้รับการจัดลำดับความสำคัญให้เหมือนกับ XHR ที่ไม่พร้อมกัน
** "ก่อนเวลา" คือการขอก่อนที่จะส่งคำขอรูปภาพที่ไม่ได้โหลดล่วงหน้า ("ล่าช้า" อยู่หลัง)
*** ตัวสแกนการโหลดล่วงหน้าจะไม่ดึงข้อมูล CSS ที่เครื่องมือสแกนการโหลดล่วงหน้าไม่ได้ดึงข้อมูล CSS และระบบจะประมวลผลเฉพาะเมื่อโปรแกรมแยกวิเคราะห์หลักเข้าถึง CSS ดังกล่าวเท่านั้น ซึ่งโดยปกติแล้วหมายความว่าระบบจะดึงข้อมูลล่าช้ามากแม้ว่าจะมี fetchpriority="high" ก็ตาม

โดยค่าเริ่มต้น รูปภาพจะเริ่มที่ "ต่ำ" ลำดับความสำคัญ จากนั้น ณ เวลาของเลย์เอาต์จะเพิ่มเป็น "สูง" หากอยู่ในวิวพอร์ต ใน Chrome 117 ระบบจะตั้งค่ารูปภาพขนาดใหญ่ 5 รูปแรกเป็น "ปานกลาง" เพื่อเร่งความเร็วนี้ และสามารถดึงข้อมูล 2 อย่างได้พร้อมกันระหว่าง "โหมดเข้มงวด" ระยะแรก การติดแท็กรูปภาพที่สำคัญในมาร์กอัปโดยใช้ fetchpriority="high" จะช่วยให้รูปภาพเริ่มต้นที่ "สูง" ได้ ทันทีและโหลดได้เร็วขึ้นมาก

fetchpriority จะตั้งค่าลำดับความสำคัญแบบสัมพัทธ์ ซึ่งหมายความว่าจะเพิ่มหรือลดลำดับความสำคัญเริ่มต้นในระดับที่เหมาะสม แทนที่จะตั้งค่าลำดับความสำคัญเป็น High หรือ Low อย่างชัดแจ้ง ซึ่งมักจะทําให้เกิดลำดับความสำคัญ High หรือ Low แต่ไม่เสมอไป ตัวอย่างเช่น CSS วิกฤตที่มี fetchpriority="high" จะคงอันดับ "สูงมาก"/"สูงสุด" ไว้ ที่ใช้ fetchpriority="low" ในองค์ประกอบเหล่านี้จะมีค่า "สูง" ลำดับความสำคัญ ไม่มีกรณีใดที่กล่าวถึงการตั้งค่าลำดับความสำคัญอย่างชัดเจนเป็น High หรือ Low

กรณีการใช้งาน

ใช้แอตทริบิวต์ fetchpriority เมื่อคุณต้องการให้คำแนะนำเพิ่มเติมแก่เบราว์เซอร์เกี่ยวกับลำดับความสำคัญในการดึงข้อมูลทรัพยากร

เพิ่มลำดับความสำคัญของรูปภาพ LCP

คุณระบุ fetchpriority="high" เพื่อเพิ่มลำดับความสำคัญของ LCP หรือรูปภาพสำคัญอื่นๆ ได้

<img src="lcp-image.jpg" fetchpriority="high">

การเปรียบเทียบต่อไปนี้แสดงหน้า Google Flights ที่มีภาพพื้นหลัง LCP ซึ่งโหลดโดยมีและไม่มีการดึงข้อมูลลำดับความสำคัญ เมื่อกำหนดลำดับความสำคัญเป็นสูง LCP ดีขึ้นจาก 2.6 วินาทีเป็น 1.9 วินาที

การทดสอบดำเนินการโดยใช้ผู้ปฏิบัติงานของ Cloudflare เพื่อเขียนหน้า Google Flights ใหม่โดยใช้ Fetch Priority

ลดลำดับความสำคัญของรูปภาพครึ่งหน้าบน

ใช้ 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>

แม้ว่ารูปภาพที่ 2-4 จะอยู่นอกวิวพอร์ต แต่ก็อาจถือว่า "ใกล้พอ" เพื่อเพิ่มเป็น high และโหลดด้วยแม้ว่าจะเพิ่มแอตทริบิวต์ load=lazy แล้ว ดังนั้น fetchpriority="low" จึงเป็นคำตอบที่ถูกต้องสําหรับกรณีนี้

ในการทดสอบกับแอป Oodle ก่อนหน้านี้ เราใช้ฟีเจอร์นี้เพื่อลดความสำคัญของรูปภาพที่ไม่แสดงในการโหลด ลดเวลาในการโหลดหน้าเว็บลง 2 วินาที

การเปรียบเทียบแบบเปรียบเทียบระหว่างลำดับความสำคัญการดึงข้อมูลเมื่อใช้ในภาพสไลด์ของแอป Oodle ทางด้านซ้าย เบราว์เซอร์จะกำหนดลำดับความสำคัญเริ่มต้นสำหรับรูปภาพภาพสไลด์ แต่จะดาวน์โหลดและระบายสีรูปภาพเหล่านั้นช้ากว่าตัวอย่างทางด้านขวาประมาณ 2 วินาที ซึ่งกำหนดลำดับความสำคัญสูงกว่าเฉพาะรูปภาพภาพสไลด์แรก — การใช้ลำดับความสำคัญสูงกับรูปภาพภาพสไลด์แรกเท่านั้นจะช่วยให้หน้าเว็บโหลดได้เร็วขึ้น

ลดลำดับความสำคัญของทรัพยากรที่โหลดไว้ล่วงหน้า

หากต้องการหยุดทรัพยากรที่โหลดไว้ล่วงหน้าไม่ให้แข่งขันกับทรัพยากรที่สำคัญอื่นๆ คุณสามารถลดลำดับความสำคัญของทรัพยากรดังกล่าว ใช้เทคนิคนี้กับรูปภาพ สคริปต์ และ CSS

<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">

<!-- Preload CSS without blocking render, or 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>

การดำเนินการนี้จะยังคงบล็อกโปรแกรมแยกวิเคราะห์เมื่อโปรแกรมเข้าถึงสคริปต์นี้ แต่จะช่วยให้มีการกำหนดลำดับความสำคัญของเนื้อหาก่อนหน้านี้ได้

อีกทางเลือกหนึ่ง หากจำเป็นต้องใช้ DOM ที่สมบูรณ์คือการใช้แอตทริบิวต์ defer (ซึ่งทำงานตามลำดับหลัง DOMContentLoaded) หรือแม้แต่ async ที่ด้านล่างของหน้า

ลดลำดับความสำคัญสำหรับการดึงข้อมูลที่ไม่สำคัญ

เบราว์เซอร์จะประมวลผล 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'});

ดึงข้อมูลหมายเหตุการใช้งานตามลำดับความสำคัญ

ลำดับความสำคัญการดึงข้อมูลสามารถปรับปรุงประสิทธิภาพใน Use Case เฉพาะบางอย่าง แต่มีข้อควรระวังบางอย่างเมื่อใช้ลำดับความสำคัญการดึงข้อมูลดังนี้

แอตทริบิวต์ fetchpriority เป็นคำแนะนำ ไม่ใช่คำสั่ง เบราว์เซอร์จะพยายามยึดตามค่ากำหนดของนักพัฒนาซอฟต์แวร์ แต่ก็สามารถใช้ค่ากำหนดลำดับความสำคัญของทรัพยากรสำหรับลำดับความสำคัญของทรัพยากรเพื่อแก้ไขความขัดแย้งได้
อย่าสับสนระหว่าง Fetch Priority กับการโหลดล่วงหน้า
- การโหลดล่วงหน้าเป็นการดึงข้อมูลที่จำเป็น ไม่ใช่คำแนะนำ
- การโหลดล่วงหน้าช่วยให้เบราว์เซอร์ค้นพบทรัพยากรได้อย่างรวดเร็ว แต่ยังคงดึงแหล่งข้อมูลที่มีลำดับความสำคัญเริ่มต้น ในทางกลับกัน ลำดับความสำคัญการดึงข้อมูลจะไม่ช่วยเรื่องการค้นพบได้ แต่จะให้คุณเพิ่มหรือลดลำดับความสำคัญในการดึงข้อมูลได้
- การสังเกตและวัดผลกระทบของการโหลดล่วงหน้านั้นทำได้ง่ายกว่าผลของการเปลี่ยนแปลงลำดับความสำคัญ
การดึงข้อมูลลำดับความสำคัญช่วยเสริมการโหลดล่วงหน้าได้โดยการเพิ่มรายละเอียดของการจัดลำดับความสำคัญ หากคุณระบุการโหลดล่วงหน้าเป็นหนึ่งในรายการแรกใน <head> สำหรับรูปภาพ LCP แล้ว ลำดับความสำคัญการดึงข้อมูลของ high อาจไม่ปรับปรุง LCP มากนัก อย่างไรก็ตาม หากการโหลดล่วงหน้าเกิดขึ้นหลังจากทรัพยากรอื่นโหลดไปแล้ว ลำดับความสำคัญการดึงข้อมูลของ high จะช่วยปรับปรุง LCP ได้มากขึ้น หากรูปภาพที่สำคัญเป็นภาพพื้นหลัง CSS ให้โหลดรูปภาพดังกล่าวล่วงหน้าด้วย fetchpriority = "high"
การปรับปรุงเวลาที่ใช้ในการโหลดจากการจัดลำดับความสำคัญมีความเกี่ยวข้องมากขึ้นในสภาพแวดล้อมที่ทรัพยากรจำนวนมากแข่งขันกันเพื่อชิงแบนด์วิดท์เครือข่ายที่มีอยู่ กรณีนี้พบได้บ่อยสำหรับการเชื่อมต่อ HTTP/1.x ในกรณีที่ดาวน์โหลดพร้อมกันไม่ได้ หรือในการเชื่อมต่อ HTTP/2 หรือ HTTP/3 ที่มีแบนด์วิดท์ต่ำ ในกรณีเหล่านี้ การจัดลำดับความสำคัญจะช่วยแก้ไขจุดคอขวดได้
CDN ไม่ได้ใช้การจัดลำดับความสำคัญ HTTP/2 อย่างเท่าเทียมกัน และคล้ายคลึงกันสำหรับ HTTP/3 แม้ว่าเบราว์เซอร์จะสื่อสารลำดับความสำคัญจาก "ลำดับความสำคัญในการดึงข้อมูล" แต่ CDN อาจไม่จัดลำดับความสำคัญทรัพยากรตามลำดับที่ระบุ ซึ่งทำให้การทดสอบ "ลำดับความสำคัญการดึงข้อมูล" เป็นเรื่องยาก ลำดับความสำคัญจะมีการนำไปใช้ทั้งภายในเบราว์เซอร์และโปรโตคอลที่รองรับการกำหนดลำดับความสำคัญ (HTTP/2 และ HTTP/3) อย่างไรก็ตาม การใช้ลำดับความสำคัญดึงข้อมูลเฉพาะสำหรับการจัดลำดับความสำคัญของเบราว์เซอร์ภายในโดยไม่ขึ้นกับการรองรับ CDN หรือการรองรับต้นทางนั้นยังมีประโยชน์อยู่ เนื่องจากลำดับความสำคัญมักมีการเปลี่ยนแปลงเมื่อเบราว์เซอร์ขอทรัพยากร ตัวอย่างเช่น ทรัพยากรที่มีลำดับความสำคัญต่ำอย่างรูปภาพมักจะถูกยับยั้งไม่ให้มีการขอทรัพยากรในขณะที่เบราว์เซอร์ประมวลผลรายการ <head> ที่สำคัญ
คุณอาจไม่สามารถใช้ Fetch Priority เป็นแนวทางปฏิบัติที่ดีที่สุดในการออกแบบครั้งแรกได้ หลังจากนั้น ในรอบการพัฒนา คุณสามารถกำหนดลำดับความสำคัญให้กับทรัพยากรต่างๆ ในหน้าเว็บ และหากไม่ตรงกับความคาดหวังของคุณ คุณก็สามารถแนะนำลำดับความสำคัญของการดึงข้อมูลเพื่อเพิ่มประสิทธิภาพเพิ่มเติมได้

นักพัฒนาแอปควรใช้การโหลดล่วงหน้าตามวัตถุประสงค์ที่ออกแบบมา เพื่อโหลดทรัพยากรที่โปรแกรมแยกวิเคราะห์ตรวจไม่พบ (แบบอักษร การนำเข้า ภาพพื้นหลัง LCP) ตำแหน่งของคำแนะนำ preload จะมีผลต่อเมื่อโหลดทรัพยากรไว้ล่วงหน้า

ลำดับความสำคัญของการดึงข้อมูลคือวิธีที่ระบบควรดึงข้อมูลทรัพยากรเมื่อมีการดึงข้อมูล

เคล็ดลับในการใช้การโหลดล่วงหน้า

โปรดคำนึงถึงสิ่งต่อไปนี้เมื่อใช้การโหลดล่วงหน้า

การใส่การโหลดล่วงหน้าในส่วนหัว HTTP จะเป็นการทำให้โหลดล่วงหน้าก่อนอย่างอื่น
โดยทั่วไปการโหลดล่วงหน้าจะโหลดตามลำดับที่โปรแกรมแยกวิเคราะห์ได้รับสำหรับสิ่งใดก็ตามที่มีลำดับความสำคัญ Medium ขึ้นไป โปรดระวังหากคุณใช้การโหลดล่วงหน้าไว้ที่ตอนต้นของ HTML
การโหลดแบบอักษรล่วงหน้าอาจทำงานได้ดีที่สุดที่ช่วงท้ายของส่วนหัวหรือส่วนต้นของร่างกาย
นำเข้าการโหลดล่วงหน้า (import() แบบไดนามิกหรือ modulepreload) ควรทำงานหลังจากแท็กสคริปต์ที่ต้องการการนำเข้า ดังนั้นโปรดตรวจสอบว่าสคริปต์โหลดหรือแยกวิเคราะห์ก่อนเพื่อให้ประเมินได้ขณะที่กำลังโหลดทรัพยากร Dependency อยู่
การโหลดรูปภาพล่วงหน้ามีลำดับความสำคัญ Low หรือ Medium โดยค่าเริ่มต้น เรียงลำดับโดยสัมพันธ์กับสคริปต์แบบไม่พร้อมกันและแท็กที่มีลำดับความสำคัญต่ำหรือต่ำสุดอื่นๆ

ประวัติ

มีการทดสอบลำดับความสำคัญในการดึงข้อมูลครั้งแรกกับ Chrome เพื่อเป็นช่วงทดลองใช้จากต้นทางในปี 2018 และอีกครั้งในปี 2021 โดยใช้แอตทริบิวต์ importance ในเวลานั้นเราใช้ชื่อว่า Priority Hints ตั้งแต่นั้นมา อินเทอร์เฟซได้เปลี่ยนเป็น fetchpriority สำหรับ HTML และ priority สำหรับ Fetch API ของ JavaScript ซึ่งเป็นส่วนหนึ่งของกระบวนการมาตรฐานเว็บ เพื่อลดความสับสน ปัจจุบันเราเรียก API นี้ว่า "ลำดับความสำคัญการดึงข้อมูล"

บทสรุป

นักพัฒนาซอฟต์แวร์น่าจะสนใจใช้ "ลำดับความสำคัญการดึงข้อมูล" พร้อมการแก้ไขลักษณะการทำงานของการโหลดล่วงหน้าและการให้ความสำคัญกับ Core Web Vitals และ LCP เมื่อเร็วๆ นี้ ตอนนี้มีลูกบิดเพิ่มเติมเพื่อให้ทำตามลำดับการโหลดที่ต้องการ