ปัญหา Cumulative Layout Shift (CLS) และวิธีแก้ไข: ทำให้เว็บของคุณไม่ขยับไปมา น่ารำคาญ คุณเคยเจอเว็บที่กำลังอ่านดีๆ อยู่ๆ รูปภาพก็โผล่มา ทำให้ข้อความที่เรากำลังอ่านอยู่เลื่อนหนีไปไกลลิบไหม? นั่นแหละครับ คือปัญหาที่เรียกว่า Cumulative Layout Shift (CLS) ซึ่งนอกจากจะน่ารำคาญแล้ว ยังส่งผลเสียต่อประสบการณ์ผู้ใช้ (UX) และคะแนน Core Web Vitals ของ Google ด้วย บทความนี้จะมาอธิบายกันว่า CLS คืออะไร ทำไมถึงเกิดขึ้น และที่สำคัญ จะมีวิธีแก้ไขอย่างไรบ้าง เพื่อให้เว็บของคุณใช้งานได้ราบรื่น ไม่ทำให้ผู้ใช้ปวดหัว CLS เป็นเมตริกที่วัดความเสถียรของหน้าเว็บในขณะที่กำลังโหลด หากหน้าเว็บมีการเปลี่ยนแปลงเลย์เอาต์แบบไม่คาดคิดในขณะที่ผู้ใช้กำลังดูอยู่ นั่นหมายถึงมี CLS เกิดขึ้น ซึ่งอาจเกิดจากการที่องค์ประกอบต่างๆ บนหน้าเว็บถูกโหลดเข้ามาทีหลังและทำให้ส่วนอื่นๆ เลื่อนตาม CLS วัดอะไรกันแน่? การเลื่อนที่ไม่คาดคิด: CLS จะคำนวณคะแนนจาก "การเลื่อน" ของเนื้อหาบนหน้าเว็บ เมื่อมีองค์ประกอบใหม่ถูกเพิ่มเข้ามา หรือองค์ประกอบที่มีอยู่ถูกปรับเปลี่ยนขนาด ผลกระทบต่อผู้ใช้: […]