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

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

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

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

  • 102
  • 102
  • x
  • 17.2

แหล่งที่มา

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

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

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

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

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

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

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

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

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

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

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

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

  • คุณมีรูปภาพครึ่งหน้าบนหลายภาพ แต่บางภาพไม่ควรจะมีลำดับความสำคัญเท่ากัน ตัวอย่างเช่น ในภาพสไลด์ เฉพาะภาพแรกที่มองเห็นได้เท่านั้นที่ต้องมีลำดับความสำคัญสูงกว่า และรายการอื่นๆ ซึ่งโดยปกติแล้วตั้งค่านอกหน้าจอจะมีลำดับความสำคัญต่ำกว่าในตอนเริ่มต้น
  • รูปภาพภายในวิวพอร์ตมักจะเริ่มต้นที่ลำดับความสำคัญ Low หลังจากเลย์เอาต์เสร็จสมบูรณ์ Chrome จะพบว่าตัวเองอยู่ในวิวพอร์ตและมีความสำคัญเป็นพิเศษ ซึ่งมักจะทำให้การโหลดรูปภาพสำคัญช้าลงมาก เช่น รูปภาพหลัก การระบุลำดับความสำคัญในการดึงข้อมูลในมาร์กอัปจะช่วยให้รูปภาพเริ่มต้นที่ลำดับความสำคัญ High และเริ่มโหลดได้เร็วขึ้นมาก โดย Chrome จะตั้งลำดับความสำคัญของMedium ให้ภาพขนาดใหญ่ 5 ภาพแรกซึ่งจะช่วยได้ แต่การแสดง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 (สื่อไม่ตรงกัน***) ⬆*** ◉⬇
สคริปต์ (ก่อนเวลา** หรือไม่จากตัวสแกนการโหลดล่วงหน้า) ⬆◉ ⬇
สคริปต์ (ล่าช้า**) ⬆ ◉ ⬇
สคริปต์ (ไม่พร้อมกัน/เลื่อนเวลา) ⬆ ◉⬇
แบบอักษร ◉
แบบอักษร (rel=preload) ⬆◉ ⬇
นำเข้า ◉
รูปภาพ (ในวิวพอร์ต - หลังเลย์เอาต์) ⬆◉ ⬇
รูปภาพ (5 ภาพแรก > 10,000px2) ⬆ ◉ ⬇
รูปภาพ ⬆ ◉⬇
สื่อ (วิดีโอ/เสียง) ◉
XHR (sync) - เลิกใช้งานแล้ว ◉
XHR/การดึงข้อมูล* (อะซิงโครนัส) ⬆◉ ⬇
ดึงข้อมูลล่วงหน้า ◉
XSL ◉

fetchpriority กำหนดลำดับความสำคัญสัมพัทธ์ ซึ่งหมายความว่าจะเพิ่มหรือลดลำดับความสำคัญเริ่มต้นตามจำนวนที่เหมาะสม แทนที่จะตั้งค่าลำดับความสำคัญเป็น High หรือ Low อย่างชัดเจน ซึ่งมักส่งผลให้เกิดลำดับความสำคัญ High หรือ Low แต่ก็ไม่เสมอไป เช่น CSS ที่สำคัญที่มี fetchpriority="high" จะมีลำดับความสำคัญ "สูงมาก"/"สูงสุด" และการใช้ fetchpriority="low" ในองค์ประกอบเหล่านี้จะมีลำดับความสำคัญ "สูง" ต่อไป ทั้งสองกรณีเหล่านี้ไม่เกี่ยวข้องกับการตั้งค่าลำดับความสำคัญเป็น 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>

แม้ว่ารูปภาพ 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'});

ดึงหมายเหตุการใช้งานรายการสำคัญ

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

  • แอตทริบิวต์ fetchpriority เป็นคำแนะนำ ไม่ใช่คำสั่ง เบราว์เซอร์จะพยายามดำเนินการตามค่ากำหนดของนักพัฒนาซอฟต์แวร์ แต่ก็สามารถใช้ค่ากำหนดลำดับความสำคัญของทรัพยากรสำหรับลำดับความสำคัญของทรัพยากรเพื่อแก้ไขความขัดแย้งได้

  • อย่าสับสนระหว่างลำดับความสำคัญของการดึงข้อมูลกับการโหลดล่วงหน้า

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

    ลำดับความสำคัญของการดึงข้อมูลจะช่วยเสริมการโหลดล่วงหน้าได้ด้วยการเพิ่มรายละเอียดในการจัดลำดับความสำคัญ หากคุณได้ระบุการโหลดล่วงหน้าไว้ใน <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" เพื่อลดความสับสน

บทสรุป

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