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

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

Addy Osmani
Addy Osmani
X GitHub
Leena Sohoni
Leena Sohoni
X
Patrick Meenan
Patrick Meenan
X
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 เมื่อเร็วๆ นี้ ตอนนี้มีปุ่มเพิ่มเติมเพื่อให้บรรลุลำดับการโหลดที่ต้องการ