CLS คืออะไร ทำไมหน้าเว็บถึงกระตุกตอนกำลังจะกดปุ่ม
อธิบาย CLS (Cumulative Layout Shift) คืออะไร วัดยังไง เกณฑ์ดี-ต้องปรับปรุง-แย่ตาม web.dev พร้อมสาเหตุที่พบบ่อยและแนวทางลด CLS
ทีม NOAH · เผยแพร่ 2 กันยายน 2569 · อัปเดต 2 กันยายน 2569 · อ่าน 15 นาที
สรุปสั้น
- ✓CLS วัดว่าองค์ประกอบบนหน้าเว็บขยับตำแหน่งโดยไม่คาดคิดมากแค่ไหนระหว่างที่หน้ากำลังโหลดหรือใช้งาน
- ✓เกณฑ์ตาม web.dev คือดีที่ 0.1 หรือน้อยกว่า ต้องปรับปรุงที่ 0.1-0.25 และแย่ที่มากกว่า 0.25
- ✓สาเหตุหลักมักมาจากรูปภาพหรือโฆษณาที่ไม่ได้กำหนดขนาดพื้นที่ล่วงหน้า และฟอนต์ที่โหลดช้าแล้วดันข้อความ
- ✓CLS ต่างจาก LCP และ INP ตรงที่เป็นค่าที่ไม่มีหน่วยเวลา แต่เป็นคะแนนคำนวณจากขนาดและระยะที่องค์ประกอบเลื่อน
- ✓NOAH ไม่ได้วัดหรือแก้ค่า CLS ของเว็บโดยตรง งานนี้เป็นหน้าที่ของทีมพัฒนาเว็บและนักออกแบบ UI
กำลังจะกดปุ่ม “สั่งซื้อ” แต่จู่ ๆ มีแบนเนอร์โฆษณาโผล่มาแทรกด้านบน ทำให้ปุ่มเลื่อนลงไป แล้วกลายเป็นกดโดนอย่างอื่นแทน เหตุการณ์แบบนี้สร้างความหงุดหงิดและเป็นสิ่งที่ Google ตั้งใจวัดด้วยค่าที่ชื่อว่า CLS ซึ่งเป็นหนึ่งในสามค่าของ Core Web Vitals
CLS มีลักษณะต่างจาก LCP และ INP ตรงที่ไม่ได้วัดเป็นหน่วยเวลา แต่เป็นคะแนนที่คำนวณจากขนาดพื้นที่ที่เลื่อนและระยะทางที่เลื่อน บทความนี้อธิบายวิธีคิดของค่านี้และแนวทางลด CLS ที่ใช้ได้จริง ดูบทความอื่นในหมวดTechnical SEO เพิ่มเติมได้เช่นกัน
สำหรับเจ้าของธุรกิจ SME ที่ไม่ได้เขียนโค้ดเอง อาจไม่จำเป็นต้องแก้ CLS ด้วยตัวเอง แต่การเข้าใจว่า CLS คืออะไรช่วยให้คุยกับทีมพัฒนาเว็บหรือฟรีแลนซ์ได้ตรงจุดมากขึ้น เวลาเจอปัญหาว่า "ทำไมลูกค้าบ่นว่ากดผิดปุ่มบ่อย" หรือ "ทำไมคะแนน PageSpeed ไม่ผ่านเกณฑ์" จะได้รู้ว่าควรถามหาอะไรจากทีมพัฒนา
CLS คืออะไร
CLS คืออะไร
CLS หรือ Cumulative Layout Shift คือหนึ่งในสามค่าของ Core Web Vitals ที่วัดความเสถียรของหน้าเว็บ โดยคำนวณจากองค์ประกอบที่เปลี่ยนตำแหน่งอย่างไม่คาดคิดระหว่างที่ผู้ใช้กำลังดูหรือใช้งานหน้านั้น ไม่นับการเปลี่ยนตำแหน่งที่เกิดจากการกระทำของผู้ใช้เอง เช่นกดปุ่มขยายเนื้อหา ตามเกณฑ์ของ web.dev ค่า CLS ที่ดีคือ 0.1 หรือน้อยกว่า ต้องปรับปรุงคือ 0.1 ถึง 0.25 และแย่คือมากกว่า 0.25
คะแนน CLS คำนวณจากสองส่วนคูณกัน คือสัดส่วนพื้นที่หน้าจอที่ได้รับผลกระทบ กับระยะทางที่องค์ประกอบนั้นเลื่อนไป ยิ่งองค์ประกอบใหญ่และเลื่อนไกล คะแนนยิ่งสูง ซึ่งหมายถึงยิ่งแย่ ดูภาพรวมทั้งสามค่าของ Core Web Vitals ที่ Core Web Vitals คือ
ตัวอย่างการคำนวณแบบง่าย
ตัวอย่างสมมติเพื่อให้เห็นภาพ: ถ้าโฆษณาที่โผล่มาใหม่กินพื้นที่ 25% ของหน้าจอ และดันเนื้อหาด้านล่างลงไปเป็นระยะ 20% ของความสูงหน้าจอ คะแนน CLS จากเหตุการณ์นี้จะเท่ากับ 0.25 คูณ 0.20 เท่ากับ 0.05 ถ้าเกิดเหตุการณ์แบบนี้ซ้ำหลายครั้งระหว่างที่ผู้ใช้อยู่ในหน้านั้น คะแนนจะถูกสะสมรวมกันจนอาจเกินเกณฑ์ที่ดีได้ในที่สุด นี่คือเหตุผลที่ชื่อเรียกมีคำว่า "Cumulative" หรือสะสม
อะไรทำให้ CLS สูง
- รูปภาพหรือวิดีโอที่ไม่ได้กำหนดความกว้างและความสูงไว้ล่วงหน้าใน HTML/CSS ทำให้พื้นที่ขยับเมื่อไฟล์โหลดเสร็จ
- โฆษณาหรือ embed จากบุคคลที่สามที่แทรกเข้ามาโดยไม่ได้จองพื้นที่ไว้ก่อน
- ฟอนต์ที่โหลดช้าจนต้องสลับจากฟอนต์สำรองมาเป็นฟอนต์จริง ทำให้ขนาดตัวอักษรเปลี่ยนและข้อความเลื่อน
- เนื้อหาแบบไดนามิกที่แทรกเข้ามาด้านบนของสิ่งที่มีอยู่แล้ว เช่นแบนเนอร์แจ้งเตือนที่โผล่มาทีหลัง
- ปุ่มหรือแบบฟอร์มที่ปรากฏขึ้นหลังโหลดข้อมูลจาก API เสร็จ เช่น ปุ่ม “เพิ่มลงตะกร้า” ที่ยังไม่แสดงจนกว่าข้อมูลสต๊อกจะโหลดเสร็จ
โฆษณาคือสาเหตุที่พบบ่อยที่สุด
เว็บที่มีโฆษณาหลายตำแหน่งมักมีปัญหา CLS สูงกว่าเว็บทั่วไป เพราะพื้นที่โฆษณามักโหลดหลังเนื้อหาหลัก ถ้าไม่จองพื้นที่ไว้ล่วงหน้า เนื้อหาที่ผู้อ่านกำลังอ่านอยู่จะถูกดันตำแหน่งทันทีที่โฆษณาโหลดเสร็จ
ทำไมเว็บอีคอมเมิร์ซถึงเจอปัญหานี้บ่อย
หน้าสินค้าของเว็บอีคอมเมิร์ซมักมีรูปภาพหลายขนาดจากผู้ขายหลายราย บางรูปเป็นแนวตั้ง บางรูปเป็นแนวนอน ถ้าเว็บไม่ได้กำหนดสัดส่วนพื้นที่ตายตัวให้รูปภาพทุกใบ พื้นที่แสดงผลจะขยับไปมาตามขนาดรูปจริงที่โหลดมา ยิ่งหน้าสินค้ามีรีวิวลูกค้าหรือแบนเนอร์โปรโมชันที่โหลดทีหลัง ยิ่งมีโอกาสเกิด layout shift สะสมมากขึ้น
อีกจุดที่พบบ่อยในเว็บอีคอมเมิร์ซคือป้ายราคาลดหรือป้าย "สินค้าหมด" ที่แสดงผลหลังข้อมูลสต๊อกโหลดเสร็จ ถ้าป้ายเหล่านี้ไม่ได้จองพื้นที่ไว้ตั้งแต่แรก การ์ดสินค้าทั้งแถวจะขยับตำแหน่งเมื่อป้ายโผล่ขึ้นมา ซึ่งอาจทำให้ลูกค้าเผลอกดสินค้าผิดชิ้นได้เช่นกัน
แนวทางลด CLS
แนวทางที่ทีมพัฒนาเว็บใช้ลด CLS
- 1
กำหนดขนาดพื้นที่ให้รูปภาพและวิดีโอเสมอ
ใส่ attribute ความกว้างและความสูง หรือกำหนด aspect ratio ผ่าน CSS เพื่อให้เบราว์เซอร์จองพื้นที่ไว้ล่วงหน้าก่อนไฟล์จะโหลดเสร็จ
- 2
จองพื้นที่ให้โฆษณาและ embed จากบุคคลที่สาม
กำหนดขนาดกล่องที่แน่นอนสำหรับตำแหน่งโฆษณา แม้จะยังไม่รู้ขนาดโฆษณาที่จะโหลดมาจริง ก็ควรตั้งค่าพื้นที่ขั้นต่ำไว้กันเหนียว
- 3
ใช้เทคนิค font-display ที่เหมาะสม
ตั้งค่าให้ฟอนต์สำรองมีขนาดใกล้เคียงฟอนต์จริงมากที่สุด หรือ preload ฟอนต์หลักเพื่อลดโอกาสที่ต้องสลับฟอนต์ระหว่างการโหลด
- 4
หลีกเลี่ยงการแทรกเนื้อหาใหม่เหนือเนื้อหาที่มีอยู่แล้ว
ถ้าจำเป็นต้องแสดงข้อความแจ้งเตือนหรือแบนเนอร์ ให้แสดงในพื้นที่ที่จองไว้ตั้งแต่แรก หรือแสดงแบบลอยทับแทนการดันเนื้อหาเดิม
- 5
ทดสอบซ้ำหลังแก้ไขทุกครั้ง
เปิด PageSpeed Insights หรือ Chrome DevTools เพื่อดูว่าค่า CLS ลดลงจริงหลังแก้ไข และตรวจซ้ำในหน้าอื่นที่มีโครงสร้างต่างกันด้วย
วิธีตรวจสอบว่าแก้ CLS ถูกจุดแล้ว
หลังแก้ไขตามขั้นตอนข้างต้น อย่าเพิ่งเชื่อว่าจบแล้วจากการดูแค่ตัวเลขรวม ควรตรวจสอบให้ครบทั้งสามมุมนี้ก่อนสรุปว่าแก้ถูกจุด
| จุดที่ตรวจ | เครื่องมือที่ใช้ | สิ่งที่ควรเห็น |
|---|---|---|
| คะแนน CLS โดยรวมของหน้า | PageSpeed Insights หรือ Search Console รายงาน Core Web Vitals | คะแนนลดลงมาอยู่ในช่วง 0.1 หรือน้อยกว่า |
| องค์ประกอบที่เคยเป็นสาเหตุ | Chrome DevTools แท็บ Performance | ไม่มี layout shift event จากองค์ประกอบเดิมที่เคยแก้ไปแล้ว |
| หน้าอื่นที่มีโครงสร้างคล้ายกัน | ตรวจซ้ำทุกประเภทหน้า เช่น หน้าแรก หน้าสินค้า หน้าบทความ | ค่า CLS ดีในทุกประเภทหน้า ไม่ใช่แค่หน้าที่ทดสอบตอนแรก |
CLS เกี่ยวข้องกับ SEO ยังไง
Google ใช้ Core Web Vitals ซึ่งรวม CLS เป็นหนึ่งในสัญญาณจัดอันดับผ่าน Page Experience แม้จะไม่ใช่ปัจจัยที่มีน้ำหนักมากที่สุดเมื่อเทียบกับคุณภาพเนื้อหา แต่หน้าเว็บที่ผู้ใช้กดผิดปุ่มบ่อยเพราะ CLS สูงมักมี bounce rate สูงตามไปด้วย ซึ่งเป็นสัญญาณทางอ้อมที่ส่งผลเสียต่อประสบการณ์ผู้ใช้และภาพลักษณ์ของเว็บในสายตา Google เช่นกัน
พูดง่าย ๆ คือ CLS ไม่ใช่ปัจจัยเดียวที่ตัดสินอันดับ แต่เป็นส่วนหนึ่งของภาพรวมที่ Google ให้ความสำคัญมากขึ้นเรื่อย ๆ ควบคู่กับความเร็วในการโหลดและความเร็วในการตอบสนอง เว็บที่มีเนื้อหาดีแต่ประสบการณ์ใช้งานแย่ อาจเสียโอกาสติดอันดับที่ควรจะได้จากเนื้อหาที่มีคุณภาพอยู่แล้ว
เช็กลิสต์ก่อนส่งงานเว็บให้ทีมพัฒนาตรวจ
สำหรับเจ้าของธุรกิจที่กำลังจะรับงานเว็บใหม่จากทีมพัฒนาหรือฟรีแลนซ์ ลองใช้เช็กลิสต์นี้ถามทีมพัฒนาก่อนรับมอบงาน เพื่อลดโอกาสที่เว็บจะมีปัญหา CLS ตั้งแต่วันแรกที่เปิดใช้งาน
- ถามว่ารูปภาพทุกจุดบนเว็บกำหนดขนาดพื้นที่ไว้ล่วงหน้าหรือยัง โดยเฉพาะรูปสินค้าที่อัปโหลดจากหลังบ้าน
- ถามว่าตำแหน่งโฆษณาหรือ embed จากบุคคลที่สาม เช่น แชตบอท มีการจองพื้นที่ไว้ก่อนหรือไม่
- ขอให้ทีมพัฒนาแสดงผลคะแนน CLS จาก PageSpeed Insights ของหน้าหลักและหน้าสินค้าอย่างน้อยหนึ่งหน้าก่อนส่งมอบงาน
- สอบถามว่าฟอนต์ที่ใช้มีการตั้งค่า font-display หรือ preload ไว้แล้วหรือยัง
ไม่ต้องเข้าใจโค้ด แค่รู้จักถามให้ถูกจุด
เจ้าของธุรกิจไม่จำเป็นต้องเขียนโค้ดเป็นเพื่อดูแลเรื่องนี้ สิ่งที่ทำได้คือรู้จักคำศัพท์และถามคำถามที่ถูกต้องกับทีมพัฒนา เพื่อให้แน่ใจว่าเว็บที่ได้มาไม่ได้ถูกมองข้ามเรื่องความเสถียรของหน้าจอไปตั้งแต่ต้น
ข้อผิดพลาดที่เจอบ่อย
- ลืมกำหนดขนาดรูปภาพในหน้าที่ดึงรูปจากฐานข้อมูลแบบไดนามิก เพราะขนาดรูปแต่ละใบไม่เท่ากัน
- ทดสอบ CLS เฉพาะตอนโหลดหน้าเปล่า โดยไม่ได้ทดสอบตอนที่ผู้ใช้กำลังเลื่อนอ่านและโฆษณาโหลดเข้ามาระหว่างทาง
- แก้ไขเฉพาะหน้าแรกของเว็บ แต่ไม่ได้ตรวจหน้าเนื้อหาอื่นที่มีโครงสร้างต่างกัน เช่นหน้าสินค้าที่มีรูปภาพหลายขนาด
- เข้าใจผิดว่า CLS วัดเวลาเหมือน LCP และ INP ทำให้ตีความคะแนนผิด เพราะ CLS ไม่มีหน่วยเวลา
- แก้ไขในเครื่องทดสอบของทีมพัฒนาแล้วคิดว่าจบ โดยไม่ได้เช็กข้อมูลจริงจากผู้ใช้ผ่าน Search Console ซึ่งอาจสะท้อนผลต่างจากการทดสอบในห้องแล็บ
คำถามที่พบบ่อย
CLS คำนวณอย่างไร+
คำนวณจากผลคูณของสองค่า คือ impact fraction ซึ่งคือสัดส่วนพื้นที่หน้าจอที่ได้รับผลกระทบจากการเลื่อน กับ distance fraction ซึ่งคือระยะทางที่องค์ประกอบนั้นเลื่อนไปเทียบกับความสูงของหน้าจอ ยิ่งค่าทั้งสองสูง คะแนน CLS ยิ่งสูงตาม
การเลื่อนที่เกิดจากผู้ใช้เองนับเป็น CLS ไหม+
ไม่นับ การเปลี่ยนตำแหน่งที่เกิดขึ้นภายใน 500 มิลลิวินาทีหลังผู้ใช้โต้ตอบ เช่นกดปุ่มขยายเนื้อหาแล้วพื้นที่ขยาย จะไม่ถูกนับเป็นการเลื่อนที่ไม่คาดคิด เพราะเป็นผลจากการกระทำของผู้ใช้เอง
แอนิเมชันบนเว็บทำให้ CLS สูงเสมอไปไหม+
ไม่เสมอไป ถ้าแอนิเมชันใช้ CSS transform แทนการเปลี่ยนค่าที่กระทบ layout เช่น top หรือ margin จะไม่ถูกนับเป็น layout shift เพราะ transform ไม่กระทบตำแหน่งขององค์ประกอบอื่นบนหน้า
เว็บที่ไม่มีโฆษณาเลยจะไม่มีปัญหา CLS ใช่ไหม+
มีโอกาสมีปัญหาน้อยกว่าแต่ไม่ได้แปลว่าไม่มีเลย เพราะรูปภาพที่ไม่กำหนดขนาด ฟอนต์ที่โหลดช้า หรือเนื้อหาแบบไดนามิกอื่น ๆ ก็ยังทำให้เกิด layout shift ได้เช่นกัน
ตรวจ CLS ของเว็บได้จากที่ไหน+
ตรวจได้จาก PageSpeed Insights ซึ่งแสดงค่า CLS พร้อมระบุองค์ประกอบที่ทำให้เกิดการเลื่อนบ่อยที่สุด อ่านวิธีใช้เครื่องมือนี้ที่ PageSpeed SEO
ใครควรเป็นคนแก้ CLS ในทีม เจ้าของธุรกิจต้องทำเองไหม+
ไม่จำเป็นต้องทำเองถ้าไม่ได้เขียนโค้ด งานแก้ CLS เป็นหน้าที่ของทีมพัฒนาเว็บหรือธีมที่ใช้อยู่ สิ่งที่เจ้าของธุรกิจทำได้คือรู้จักปัญหานี้ไว้ เพื่อสื่อสารกับทีมพัฒนาได้ตรงจุดเวลาคะแนน PageSpeed ไม่ผ่านเกณฑ์หรือมีลูกค้าบ่นเรื่องกดผิดปุ่มบ่อย
เว็บที่สร้างด้วย WordPress หรือระบบสำเร็จรูปมีปัญหา CLS มากกว่าเว็บที่เขียนเองไหม+
ไม่แน่เสมอไป ขึ้นอยู่กับธีมและปลั๊กอินที่เลือกใช้มากกว่าตัวระบบเอง ธีม WordPress บางตัวออกแบบมาดีและกำหนดขนาดพื้นที่ให้องค์ประกอบต่าง ๆ ไว้ล่วงหน้าอยู่แล้ว แต่บางธีมที่เน้นลูกเล่นเยอะหรือใส่ปลั๊กอินโฆษณาหลายตัวมักมีปัญหา CLS สูงกว่า ทางที่ดีคือทดสอบด้วย PageSpeed Insights หลังติดตั้งธีมหรือปลั๊กอินใหม่ทุกครั้ง
สรุป
CLS คือค่าที่วัดความเสถียรของหน้าเว็บ ไม่ใช่ความเร็ว การลด CLS ทำได้ไม่ยากถ้าเข้าใจหลักการเดียวคือ “จองพื้นที่ไว้ล่วงหน้าเสมอ” ไม่ว่าจะเป็นรูปภาพ โฆษณา หรือฟอนต์ เพียงเท่านี้ก็ลดโอกาสที่ผู้ใช้จะกดผิดเพราะหน้าเว็บขยับกะทันหันได้มาก แม้เจ้าของธุรกิจ SME ส่วนใหญ่จะไม่ได้ลงมือแก้โค้ดเอง แต่การรู้จักค่านี้ช่วยให้คุยกับทีมพัฒนาได้ตรงจุดขึ้นมาก และช่วยตั้งคำถามที่ถูกต้องเวลาตรวจรับงานเว็บใหม่จากผู้พัฒนา สิ่งสำคัญที่สุดคือไม่ปล่อยให้ปัญหานี้ถูกมองข้ามเพราะคิดว่าเป็นเรื่องเทคนิคที่ไกลตัว เพราะสุดท้ายแล้วผลกระทบจะมาตกที่ลูกค้าที่พยายามกดปุ่มสั่งซื้อบนเว็บของคุณโดยตรง ตรวจค่านี้ของเว็บได้ด้วยเครื่องมือ SEO
เว็บมั่นคงต้องมาคู่กับเนื้อหาที่มีคุณภาพ
ขณะที่ทีมพัฒนาดูแลความเสถียรของหน้าเว็บ NOAH ช่วยวางแผนคีย์เวิร์ดและผลิตเนื้อหา SEO ให้พร้อมนำไปเผยแพร่ควบคู่กัน
เริ่มต้นใช้งาน