ปรับแต่งรูปภาพเพื่อความเร็วเว็บไซต์

รูปภาพกระทบ Core Web Vitals อย่างไร

รูปที่ใหญ่เกินไปทำให้การแสดงผลคอนเทนต์สำคัญช้าลงและอาจทำให้ LCP แย่ลง รูปที่ไม่กำหนดขนาดยังทำให้เลย์เอาต์ขยับและส่งผลต่อ CLS การควบคุมน้ำหนักและมิติของรูปเป็นหนึ่งในวิธีที่เร็วที่สุดในการปรับปรุงประสิทธิภาพจริง

• ลดขนาดไฟล์รูปเพื่อช่วย LCP
• ใช้มิติที่ถูกต้องเพื่อลดไบต์ที่ไม่จำเป็น
• กำหนดขนาดเพื่อป้องกัน CLS

เช็กลิสต์ที่นำไปใช้ได้จริง

เริ่มจากรูปส่วนบนของหน้าและหน้าที่มีทราฟฟิกสูง ปรับขนาดให้ตรงการแสดงผล บีบอัด และเลือก WebP เมื่อเหมาะสม ส่วนรูปตกแต่งควรทำให้เบาที่สุด

• ปรับให้ตรงขนาดที่แสดงจริง
• บีบอัดเพื่อลดขนาดการส่งข้อมูล
• ใช้ WebP เป็นตัวเลือกหลัก
• จัดการรูป above-the-fold ก่อน

เวิร์กโฟลว์ที่ทำซ้ำได้

ใช้เครื่องมือ resize ให้ตรงกับเลย์เอาต์ จากนั้นบีบอัดเพื่อลดขนาด และถ้าจำเป็นให้แปลงเป็น WebP หากทำงานเป็นทีม ควรกำหนดเป้าหมายขนาดของภาพฮีโร่ ภาพเนื้อหา และภาพย่อให้ชัดเจน