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

ส่วนโอกาสของรายงาน 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>

แหล่งข้อมูล