ส่วนโอกาสในรายงาน Lighthouse จะแจ้งคำขอระดับที่ 3 ในห่วงโซ่คำขอที่สำคัญว่าเป็นคำขอที่ควรโหลดล่วงหน้า
วิธีที่ 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 ไม่ใช่คอขวดสำหรับคำขอแต่ละรายการอีกต่อไป
คำขอโหลดล่วงหน้าช่วยให้หน้าเว็บโหลดเร็วขึ้นได้
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>
styles.css และ
ui.js พร้อมกับ app.js
ดูคำแนะนำเพิ่มเติมได้ที่โหลดเนื้อหาที่สำคัญล่วงหน้าเพื่อปรับปรุงความเร็วในการโหลด
ความเข้ากันได้กับเบราว์เซอร์
ตั้งแต่เดือนมิถุนายน 2020 เป็นต้นมา เบราว์เซอร์ที่พัฒนาบน Chromium จะรองรับการโหลดล่วงหน้า ดูข้อมูลอัปเดตได้ที่ ความเข้ากันได้กับเบราว์เซอร์
การรองรับเครื่องมือสร้างสำหรับการโหลดล่วงหน้า
ดูหน้าTooling.Report's Preloading Assets
คำแนะนำเฉพาะสำหรับกองซ้อน
Angular
โหลดเส้นทางล่วงหน้าก่อนเวลาเพื่อเร่งความเร็วในการไปยังส่วนต่างๆ
Magento
แก้ไขเลย์เอาต์ของธีม
และเพิ่มแท็ก <link rel=preload>