Lazy-loading คือการเลื่อนการดาวน์โหลดบางสิ่งออกไปจนกว่าจะจำเป็นต้องใช้จริง — โดยปกติคือเมื่อมันกำลังจะเลื่อนเข้ามาในมุมมอง วิธีนี้ลดขนาด payload เริ่มต้นลง ทำให้ส่วนของหน้าที่มองเห็นได้โหลดเร็วขึ้น
เบราว์เซอร์ทำได้เองแบบเนทีฟด้วย attribute เดียว:
คงค่า width/height ไว้เสมอเพื่อให้เบราว์เซอร์จองพื้นที่ (หลีกเลี่ยง layout shift) อย่า lazy-load รูป LCP ของคุณเด็ดขาด — มันจะทำให้สิ่งที่กำลังถูกวัดล่าช้าออกไป
แยก UI ที่หนักหรือใช้ไม่บ่อย (modal, chart) ออกเป็น chunk แยกที่โหลดตามความต้องการ:
// Instead of a static import that ships in the main bundle:
const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
import() แบบ dynamic บอก bundler ให้สร้างไฟล์แยกที่จะดาวน์โหลดเฉพาะเมื่อ <Chart> render ครั้งแรกเท่านั้น
Lazy-loading คือการชนะที่ง่ายที่สุดและได้ผลตอบแทนสูงที่สุดสำหรับหน้าที่หนัก: การมีของให้ดาวน์โหลดล่วงหน้าน้อยลงหมายถึง LCP ที่เร็วขึ้นและ JS ที่ต้อง parse น้อยลง ผู้สัมภาษณ์อยากเห็นว่าคุณ ไม่ lazy-load รูป hero — ความผิดพลาดคลาสสิกที่ทำร้าย metric ที่คุณกำลังพยายามช่วยให้ดีขึ้น
คลังคำถามสัมภาษณ์งาน IT พร้อมคำตอบโดยละเอียด — ตั้งแต่ระดับ Junior ถึง Senior
บริจาค