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

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

Addy Osmani
Addy Osmani
X GitHub
Leena Sohoni
Leena Sohoni
X
Patrick Meenan
Patrick Meenan
X
Barry Pollard

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

  • Chrome: 102
  • ขอบ: 102
  • Firefox: 132
  • Safari: 17.2.

แหล่งที่มา

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

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

สรุป

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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'});

เรียกข้อมูลหมายเหตุการใช้งาน Priority

ลำดับความสำคัญการดึงข้อมูลสามารถปรับปรุงประสิทธิภาพใน 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> ที่สำคัญ

  • คุณอาจไม่สามารถนําลําดับความสําคัญในการดึงข้อมูลมาใช้เป็นแนวทางปฏิบัติแนะนําในการออกแบบขั้นต้น หลังจากนั้น ในรอบการพัฒนา คุณสามารถกำหนดลำดับความสำคัญให้กับทรัพยากรต่างๆ ในหน้าเว็บ และหากไม่ตรงกับความคาดหวังของคุณ คุณก็สามารถแนะนำลำดับความสำคัญของการดึงข้อมูลเพื่อเพิ่มประสิทธิภาพเพิ่มเติมได้

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

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

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

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

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

ประวัติ

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

บทสรุป

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