โหลดคำขอสำคัญล่วงหน้า

ส่วนโอกาสของรายงาน Lighthouse จะแจ้งคำขอระดับที่ 3 ในเชนคำขอที่สำคัญว่าเป็นตัวเลือกการโหลดล่วงหน้า

ภาพหน้าจอของการตรวจสอบคำขอคีย์ Lighthouse Preload

วิธีที่แฟล็ก Lighthouse กำหนดตัวเลือกการโหลดล่วงหน้า

สมมติว่าเชนคำขอที่สำคัญของหน้าเว็บมีลักษณะดังนี้

index.html |--app.js |--styles.css |--ui.js

ไฟล์ index.html ระบุว่า<script src="app.js"> เมื่อ app.js ทำงาน แอปจะเรียกใช้ fetch() เพื่อดาวน์โหลด styles.css และ ui.js หน้าจะยังไม่สมบูรณ์จนกว่าจะดาวน์โหลด แยกวิเคราะห์ และดำเนินการทรัพยากร 2 รายการล่าสุดดังกล่าว เมื่อใช้ตัวอย่างข้างต้น Lighthouse จะแจ้งว่า styles.css และ ui.js เป็นตัวเลือก

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

คำขอโหลดล่วงหน้าช่วยให้หน้าเว็บโหลดเร็วขึ้นได้

หากไม่มีลิงก์โหลดล่วงหน้า ระบบจะขอ style.css และ ui.js ก็ต่อเมื่อมีการดาวน์โหลด แยกวิเคราะห์ และดำเนินการ app.js แล้วเท่านั้น
เมื่อไม่มีลิงก์การโหลดล่วงหน้า ระบบจะขอ styles.css และ ui.js หลังจากที่ดาวน์โหลด แยกวิเคราะห์ และดําเนินการกับ app.js แล้วเท่านั้น

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

ประกาศลิงก์การโหลดล่วงหน้าใน HTML เพื่อสั่งให้เบราว์เซอร์ดาวน์โหลดทรัพยากรหลักโดยเร็วที่สุด

<head>
  ...
  <link rel="preload" href="styles.css" as="style" />
  <link rel="preload" href="ui.js" as="script" />
  ...
</head>
เมื่อมีการขอลิงก์โหลดล่วงหน้า style.css และ ui.js จะมีการขอพร้อมกับ app.js
เมื่อใช้ลิงก์โหลดล่วงหน้า จะมีการขอ styles.css และ ui.js พร้อมกันกับ app.js

ดูข้อมูลเพิ่มเติมได้ในโหลดเนื้อหาสำคัญล่วงหน้าเพื่อปรับปรุงความเร็วในการโหลด

ความเข้ากันได้กับเบราว์เซอร์

ตั้งแต่เดือนมิถุนายน 2020 เป็นต้นไป เบราว์เซอร์แบบ Chromium จะรองรับการโหลดล่วงหน้า ดูข้อมูลอัปเดตได้ที่ความเข้ากันได้ของเบราว์เซอร์

การสนับสนุนเครื่องมือสร้างสำหรับการโหลดล่วงหน้า

ดูหน้าเนื้อหาการ���หลดล่วงหน้าของTooling.report

คำแนะนำเฉพาะกลุ่ม

Angular

โหลดเส้นทางล่วงหน้าล่วงหน้าเพื่อเร่งความเร็วในการไปยังส่วนต่างๆ

Magento

แก้ไขเลย์เอาต์ของธีม และเพิ่มแท็ก <link rel=preload>

แหล่งข้อมูล