จะปรับแต่งรูปภาพเพื่อปรับปรุงคะแนน Core Web Vitals ได้อย่างไร?
ปรับแต่งรูปภาพด้วยการบีบอัดไฟล์ ใช้ฟอร์แมตสมัยใหม่อย่าง WebP หรือ AVIF และทำ lazy loading สิ่งสำคัญคือต้องกำหนดความกว้าง (width) และความสูง (height) ใน HTML เสมอเพื่อป้องกัน Layout Shifts (CLS) และปรับขนาดภาพให้พอดีกับหน้าจอผู้ใช้เพื่อพัฒนาค่า LCP
รูปภาพมักเป็นตัวการใหญ่ที่ทำให้เว็บโหลดช้าและคะแนน Core Web Vitals (CWV) ต่ำ โดยเฉพาะค่า Largest Contentful Paint (LCP) และ Cumulative Layout Shift (CLS) การจะทำให้ LCP ดีขึ้น คุณต้องลดขนาดไฟล์และเวลาในการโหลดรูปหลัก (Hero Image) โดยใช้ฟอร์แมตอย่าง WebP หรือ AVIF ซึ่งบีบอัดได้ดีกว่า JPEG หรือ PNG นอกจากนี้ควรใช้ระบบ Responsive Images (ผ่าน `srcset` และ `sizes`) เพื่อให้เบราว์เซอร์โหลดขนาดภาพที่เหมาะสมกับอุปกรณ์นั้นๆ ส่วนปัญหา CLS ที่เกิดจากหน้าเว็บ 'กระตุก' ขณะโหลดภาพ แก้ได้โดยการระบุค่า `width` และ `height` ในแท็ก HTML หรือใช้ CSS aspect-ratio เพื่อให้เบราว์เซอร์สำรองพื้นที่ไว้ก่อนที่ภาพจะโหลดเสร็จ อีกทั้งควรทำ native lazy loading (`loading="lazy"`) สำหรับภาพที่อยู่ด้านล่างเพื่อให้ความสำคัญกับเนื้อหาหลักด้านบนก่อน สุดท้ายคือการใช้ Content Delivery Network (CDN) เพื่อส่งภาพจากเซิร์ฟเวอร์ที่ใกล้ผู้ใช้ที่สุด ลดความหน่วงและเพิ่มประสิทธิภาพในภาพรวม
คู่มือแบบ Step-by-Step
แปลงเป็น WebP/AVIF
เปลี่ยนจากไฟล์นามสกุลเดิมๆ มาเป็นฟอร์แมตยุคใหม่ที่ให้ภาพชัดแต่ขนาดไฟล์เล็กลงมาก
ระบุขนาดให้ชัดเจน
ใส่ค่า width และ height ให้กับทุกแท็ก <img> เพื่อป้องกันเนื้อหาบนหน้าเว็บขยับที่เอง
ใช้ระบบ Srcset
ใช้คุณสมบัติของรูปภาพแบบ responsive เพื่อส่งไฟล์ที่มีความละเอียดต่างกันตามขนาดหน้าจอ
ตั้งค่า Lazy Loading
เปิดใช้งาน lazy loading สำหรับรูปที่ยังไม่จำเป็นต้องเห็นทันที เพื่อเร่งความเร็วในการแสดงผลครั้งแรก
ปรับแต่งรูปภาพหลัก (Hero Image)
ตรวจสอบว่ารูปภาพที่ใหญ่ที่สุดด้านบนไม่ได้ใช้ lazy loading แต่ให้ทำ preload แทนเพื่อเพิ่มค่า LCP
Pro Tips
- ใช้เครื่องมืออย่าง TinyPNG หรือ Squoosh บีบอัดรูปภาพโดยไม่เสียความคมชัด
- หลีกเลี่ยงการใช้รูปภาพแทนข้อความ ให้ใช้ CSS และ Web Fonts แทนเพื่อผลดีต่อ Accessibility และ SEO
- ทำ Preload รูปที่เป็น Largest Contentful Paint (LCP) เพื่อบอกเบราว์เซอร์ว่าเป็นสิ่งที่ต้องโหลดก่อน
- ตั้งค่า CDN ให้เสิร์ฟฟอร์แมตภาพที่เหมาะสมที่สุดตามที่เบราว์เซอร์ของผู้ใช้รองรับโดยอัตโนมัติ
pSeoMatic ช่วยคุณได้อย่างไร
pSeoMatic วิเคราะห์สินทรัพย์สื่อบนเว็บไซต์ของคุณเพื่อระบุรูปภาพที่ยังไม่ได้ปรับแต่งซึ่งฉุดคะแนน Core Web Vitals ลง ด้วยการชี้เป้าให้เห็นว่าภาพไหนขาดการระบุขนาดหรือไฟล์ใหญ่เกินไป pSeoMatic ช่วยให้คุณมี Roadmap ที่ชัดเจนในการปรับปรุง LCP และ CLS เพื่ออันดับที่ดีขึ้นและการใช้งานที่ลื่นไหล
ลองใช้ pSeoMatic ฟรีคำถามที่เกี่ยวข้อง
Lazy loading ส่งผลเสียต่อ SEO ไหม?
ไม่เสีย หากใช้อย่างถูกต้องผ่าน native browser support หรือ JavaScript library ที่เป็นมิตรกับ SEO
ฟอร์แมตภาพไหนดีที่สุดสำหรับเว็บ?
ในปัจจุบัน AVIF ให้ประสิทธิภาพการบีบอัดดีที่สุด ตามมาติดๆ ด้วย WebP
Layout Shifts ที่เกิดจากรูปภาพคืออะไร?
คือการที่รูปภาพโหลดขึ้นมาโดยไม่มีการกำหนดขนาด ทำให้มันไปดันเนื้อหาอื่นลงไปด้านล่าง สร้างความรำคาญให้ผู้ใช้
คู่มือที่เกี่ยวข้อง
พร้อมที่จะลงมือทำแล้วหรือยัง?
pSeoMatic สร้างหน้าเว็บที่ปรับแต่ง SEO นับพันจากข้อมูลของคุณ