ส่วนโอกาสของรายงาน Lighthouse จะแจ้งคำขอระดับที่ 3 ในเชนคำขอที่สำคัญว่าเป็นตัวเลือกการโหลดล่วงหน้า
![ภาพหน้าจอของการตรวจสอบคำขอคีย์ Lighthouse Preload](https://developer.chrome.com/static/docs/lighthouse/performance/uses-rel-preload/image/a-screenshot-the-lightho-a0f22e9688496.png?authuser=6&hl=th)
วิธีที่แฟล็ก 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 แล้วเท่านั้น](https://developer.chrome.com/static/docs/lighthouse/performance/uses-rel-preload/image/without-preload-links-st-f9c93e03b4029.png?authuser=6&hl=th)
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](https://developer.chrome.com/static/docs/lighthouse/performance/uses-rel-preload/image/with-preload-links-style-da7d794e22995.png?authuser=6&hl=th)
styles.css
และ ui.js
พร้อมกันกับ app.js
ดูข้อมูลเพิ่มเติมได้ในโหลดเนื้อหาสำคัญล่วงหน้าเพื่อปรับปรุงความเร็วในการโหลด
ความเข้ากันได้กับเบราว์เซอร์
ตั้งแต่เดือนมิถุนายน 2020 เป็นต้นไป เบราว์เซอร์แบบ Chromium จะรองรับการโหลดล่วงหน้า ดูข้อมูลอัปเดตได้ที่ความเข้ากันได้ของเบราว์เซอร์
การสนับสนุนเครื่องมือสร้างสำหรับการโหลดล่วงหน้า
ดูหน้าเนื้อหาการโหลดล่วงหน้าของTooling.report
คำแนะนำเฉพาะกลุ่ม
Angular
โหลดเส้นทางล่วงหน้าล่วงหน้าเพื่อเร่งความเร็วในการไปยังส่วนต่างๆ
Magento
แก้ไขเลย์เอาต์ของธีม
และเพิ่มแท็ก <link rel=preload>