ส่วนโอกาสในรายงาน Lighthouse แจ้งระดับที่ 3 ของคำขอในห่วงโซ่คำขอสำคัญว่าเป็นคำขอที่โหลดล่วงหน้า
วิธีที่ Flag ของ 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
คำแนะนำเฉพาะสแต็ก
Angular
โหลดเส้นทางล่วงหน้าล่วงหน้าเพื่อให้การนำทางรวดเร็วขึ้น
Magento
แก้ไขเลย์เอาต์ของธีม
แล้วเพิ่ม <link rel=preload> แท็ก