รูปภาพมักเป็นไบต์ที่หนักที่สุดในหน้าเว็บ ดังนั้นการ optimize มันจึงเป็นการชนะ LCP ที่ใหญ่ที่สุด มีสามคันโยก: format สมัยใหม่, การกำหนดขนาดแบบ responsive, และ priority ในการโหลด
AVIF และ WebP บีบอัดได้เล็กกว่า JPEG/PNG มากที่คุณภาพเท่ากัน (AVIF มักเล็กกว่า JPEG ถึง 50%) เสิร์ฟพวกมันพร้อม fallback เพื่อให้เบราว์เซอร์เก่ายังใช้งานได้:
อย่าส่งรูป 2000px ไปยังโทรศัพท์ 400px srcset ให้เบราว์เซอร์เลือกขนาดที่เหมาะกับอุปกรณ์:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes บอกเบราว์เซอร์ว่ารูปแสดงกว้างแค่ไหน เพื่อให้มันเลือก source ที่เล็กที่สุดที่เพียงพอได้
fetchpriority="high", loading="eager", และพิจารณา preloadloading="lazy" เพื่อไม่ให้มันถูก fetch จนกว่าจะจำเป็นคงค่า width/height ไว้เสมอเพื่อป้องกัน CLS
LCP ที่ช้าส่วนใหญ่คือแค่รูป hero ที่ใหญ่เกินไป การรู้ format (AVIF/WebP), srcset เพื่อความละเอียดที่ถูกต้อง, และ priority ที่ถูกต้อง — บวกกับการ ไม่ lazy-load รูป LCP — คือชุดเครื่องมือเชิงปฏิบัติที่ผู้สัมภาษณ์คาดหวัง และมักเป็นการเปลี่ยนแปลงเดียวที่มีผลกระทบสูงที่สุดบนเว็บไซต์จริง
คลังคำถามสัมภาษณ์งาน IT พร้อมคำตอบโดยละเอียด — ตั้งแต่ระดับ Junior ถึง Senior
บริจาค