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

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

Addy Osmani

Leena Sohoni

Patrick Meenan

Barry Pollard

การสนับสนุนเบราว์เซอร์

102
102
x
17.2

แหล่งที่มา

เมื่อเบราว์เซอร์แยกวิเคราะห์หน้าเว็บและเริ่มค้นพบและดาวน์โหลดทรัพยากร เช่น รูปภาพ สคริปต์ หรือ 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)
ลดลำดับความสำคัญของสคริปต์เนื้อหาส่วนปลายเพื่อให้เรียงลำดับรูปภาพได้ดีขึ้น

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

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

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

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

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

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

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

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

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

โปรดดูรายละเอียดเพิ่มเติมในเชิงอรรถของตาราง

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

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

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

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

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

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

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

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

เมื่อเข้าใจตรรกะการจัดลําดับความสําคัญของเบราว์เซอร์แล้ว คุณปรับลําดับการดาวน์โหลดของหน้าเว็บเพื่อเพิ่มประสิทธิภาพและ 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" (◉) ในแต่ละแถวจะทำเครื่องหมายลำดับความสำคัญเริ่มต้นสำหรับทรัพยากรประเภทนั้นๆ

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

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

โปรดดูรายละเอียดเพิ่มเติมที่หัวข้อเชิงอรรถสำหรับตารางก่อนหน้า

	โหลดในระยะการบล็อกเลย์เอาต์		โหลดทีละรายการในช่วงการบล็อกเลย์เอาต์
ลำดับความสำคัญ การกะพริบ	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 วินาที

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

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

ใช้ 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 วินาที

การเปรียบเทียบลำดับความสำคัญในการดึงข้อมูลเมื่อใช้ในภาพสไลด์ของแอป 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 นี้"