เคยไหม? กำลังจะกดปุ่มสั่งซื้อสินค้า แต่จู่ ๆ ปุ่มเลื่อนลงไปจนคุณกดผิดตำแหน่ง ปัญหานี้เกี่ยวข้องกับ CLS (Cumulative Layout Shift) ซึ่งเป็นตัวชี้วัดความเสถียรของหน้าเว็บระหว่างการแสดงผล หนึ่งใน Core Web Vitals ของ Google โดยค่า CLS ที่ดีควรไม่เกิน 0.1 หากเว็บไซต์มีรูปภาพ โฆษณา หรือฟอนต์ที่ทำให้องค์ประกอบขยับโดยไม่คาดคิด ก็อาจทำให้คะแนน CLS สูงขึ้นและส่งผลเสียต่อประสบการณ์ผู้ใช้งาน
CLS คืออะไร และทำไมเว็บไซต์ถึงต้องให้ความสำคัญ?
CLS ย่อมาจาก Cumulative Layout Shift เป็นตัวชี้วัดการขยับตำแหน่งขององค์ประกอบบนหน้าเว็บที่เกิดขึ้นโดยผู้ใช้ไม่ได้คาดหมาย เช่น ข้อความเลื่อนลงเมื่อรูปภาพโหลดเสร็จ หรือปุ่มถูกดันออกจากตำแหน่งเดิมเมื่อแบนเนอร์ปรากฏขึ้น
ลองนึกภาพว่าคุณเปิดเว็บไซต์ร้านอาหาร กำลังอ่านเมนูอยู่ดี ๆ รูปอาหารด้านบนเพิ่งโหลดเสร็จ ทำให้ข้อความทั้งหมดเลื่อนลง คุณต้องหาตำแหน่งที่อ่านค้างไว้อีกครั้ง นี่คือตัวอย่างของ Layout Shift ที่สร้างความรำคาญได้โดยตรง
Google จึงใช้ CLS เป็นหนึ่งในตัวชี้วัด Core Web Vitals ร่วมกับ LCP (Largest Contentful Paint) ซึ่งวัดความเร็วในการแสดงเนื้อหาหลัก และ INP (Interaction to Next Paint) ซึ่งวัดการตอบสนองต่อการโต้ตอบของผู้ใช้
เว็บไซต์ที่มี CLS ต่ำจะช่วยให้ผู้ใช้มองเห็นเนื้อหาได้อย่างต่อเนื่อง ลดโอกาสกดผิดตำแหน่ง และทำให้การใช้งานโดยรวมราบรื่นขึ้น โดยเฉพาะเว็บไซต์ขายสินค้าและเว็บไซต์ที่มีแบบฟอร์มสำคัญ
ค่า CLS เท่าไหร่ถึงผ่าน Core Web Vitals?
Google แบ่งระดับคุณภาพของ CLS ออกเป็น 3 ช่วง โดยใช้เกณฑ์ดังนี้
- CLS ไม่เกิน 0.1: ดี (Good) หน้าเว็บมีความเสถียรตามเกณฑ์ที่แนะนำ
- CLS มากกว่า 0.1 ถึง 0.25: ควรปรับปรุง (Needs Improvement)
- CLS มากกว่า 0.25: แย่ (Poor) มีปัญหาการขยับของหน้าเว็บที่ควรตรวจสอบ
ค่า CLS ไม่มีหน่วยเป็นวินาทีหรือพิกเซล แต่คำนวณจากพื้นที่ที่ได้รับผลกระทบและระยะการเคลื่อนที่ขององค์ประกอบบนหน้าจอ โดยระบบจะพิจารณากลุ่มการขยับที่เกิดขึ้นในช่วงเวลาต่อเนื่องตามหลักการ Session Window
สำหรับข้อมูลภาคสนาม Google ใช้ค่าเปอร์เซ็นไทล์ที่ 75 ของการเข้าชมหน้าเว็บ โดยพิจารณาทั้งอุปกรณ์มือถือและเดสก์ท็อป การทดสอบเพียงครั้งเดียวจึงยังไม่เพียงพอที่จะยืนยันว่าเว็บไซต์ผ่านเกณฑ์จริง
คุณสามารถศึกษาเกณฑ์และวิธีคำนวณเพิ่มเติมได้จาก เอกสาร Cumulative Layout Shift ของ web.dev ซึ่งอธิบายหลักการวัดตามมาตรฐานของ Google
อะไรเป็นสาเหตุที่ทำให้ค่า CLS สูง?
1. รูปภาพไม่มีการกำหนดขนาดล่วงหน้า
นี่เป็นปัญหาที่พบบ่อยในเว็บไซต์ WordPress โดยเฉพาะหน้าแรกที่มีภาพแบนเนอร์ขนาดใหญ่ หากเบราว์เซอร์ไม่ทราบขนาดพื้นที่ของรูปภาพก่อนดาวน์โหลด ก็อาจจัดหน้าเว็บโดยไม่เผื่อพื้นที่เอาไว้
เมื่อรูปภาพโหลดเสร็จ เนื้อหาด้านล่างจึงถูกดันลงทันที วิธีแก้คือกำหนด width และ height ให้รูปภาพ หรือกำหนดสัดส่วนภาพด้วย CSS เพื่อให้เบราว์เซอร์จองพื้นที่ตั้งแต่เริ่มต้น
2. โฆษณาหรือแบนเนอร์แทรกเข้ามาภายหลัง
เว็บไซต์ข่าวและบล็อกที่ติดโฆษณามักพบปัญหานี้ เพราะระบบโฆษณาอาจโหลดช้ากว่าเนื้อหาหลัก เมื่อโฆษณาปรากฏขึ้นโดยไม่มีพื้นที่รองรับ ก็ทำให้บทความด้านล่างขยับ
แนวทางที่เหมาะสมคือเตรียมพื้นที่โฆษณาตามขนาดที่คาดว่าจะใช้งาน และออกแบบให้รองรับโฆษณาหลายขนาดโดยไม่ต้องดันเนื้อหาที่แสดงไปแล้ว
3. ฟอนต์เว็บไซต์โหลดช้า
บางเว็บไซต์ใช้ฟอนต์พิเศษที่มีความกว้างของตัวอักษรต่างจากฟอนต์สำรอง เมื่อฟอนต์จริงโหลดเสร็จ ข้อความอาจเปลี่ยนจำนวนบรรทัด ทำให้ปุ่ม รูปภาพ หรือส่วนอื่นของหน้าเว็บเคลื่อนที่ตาม
ปัญหานี้เกิดได้ทั้งภาษาไทยและภาษาอังกฤษ โดยเฉพาะเว็บไซต์ที่มีหัวข้อขนาดใหญ่หรือข้อความยาวบนหน้าแรก
4. Popup และแถบแจ้งเตือนที่ดันเนื้อหา
แถบโปรโมชั่น แถบคุกกี้ หรือระบบแจ้งเตือนที่เพิ่มเข้ามาด้านบนหน้าเว็บหลังโหลด อาจดันเนื้อหาทั้งหมดลงโดยไม่จำเป็น
สำหรับ WordPress ควรตรวจสอบปลั๊กอิน Popup, Cookie Consent และแถบประกาศต่าง ๆ ว่ามีการเพิ่มพื้นที่ในหน้าเว็บภายหลังหรือไม่
ตรวจสอบค่า CLS ของเว็บไซต์ได้อย่างไร?
ก่อนเริ่มแก้ไข คุณควรรู้ก่อนว่าปัญหาเกิดขึ้นที่หน้าไหน และองค์ประกอบใดเป็นต้นเหตุ เพราะการปรับแต่งเว็บไซต์โดยไม่ตรวจสอบอาจเสียเวลาและกระทบส่วนที่ทำงานดีอยู่แล้ว
ตรวจสอบด้วย Google PageSpeed Insights
เครื่องมือที่เริ่มต้นได้ง่ายที่สุดคือ Google PageSpeed Insights ซึ่งใช้ตรวจสอบประสิทธิภาพเว็บไซต์ได้ฟรี
- เข้าเว็บไซต์ PageSpeed Insights แล้วกรอก URL ที่ต้องการตรวจสอบ
- กด Analyze และรอผลการวิเคราะห์
- ดูค่า CLS ในส่วนข้อมูลผู้ใช้งานจริง หากมีข้อมูลเพียงพอ
- ตรวจสอบผลทดสอบในห้องปฏิบัติการและหัวข้อ Diagnostics
- พิจารณารายการ Layout Shift Culprits หรือคำแนะนำที่เกี่ยวข้อง หากเครื่องมือแสดงผล
จุดสำคัญคือ คะแนนจากการทดสอบจำลองกับข้อมูลผู้ใช้จริงอาจไม่ตรงกัน เพราะการทดสอบจำลองมักตรวจสอบช่วงโหลดหน้าเว็บ ขณะที่ผู้ใช้จริงอาจพบ Layout Shift หลังเลื่อนหน้า กดเมนู หรือใช้งานไปแล้วหลายนาที
หากต้องการดูภาพรวมทั้งเว็บไซต์ ให้เข้า Google Search Console แล้วเปิดรายงาน Core Web Vitals เพื่อดูว่ากลุ่ม URL ใดมีปัญหาบนอุปกรณ์มือถือหรือเดสก์ท็อป
วิธีแก้ CLS บน WordPress ให้หน้าเว็บไม่กระตุก
1. กำหนดขนาดรูปภาพและสัดส่วนให้ชัดเจน
เริ่มจากตรวจสอบภาพที่อยู่ด้านบนของเว็บไซต์ เช่น Hero Banner, Featured Image และรูปภาพสินค้า โดยเฉพาะภาพที่โหลดก่อนผู้ใช้เริ่มเลื่อนหน้า
ตัวอย่างเช่น หากใช้รูปภาพขนาด 1200 × 800 พิกเซล ควรกำหนด width=”1200″ และ height=”800″ ใน HTML เพื่อให้เบราว์เซอร์ทราบสัดส่วน 3:2 แม้จะย่อภาพให้พอดีกับหน้าจอมือถือก็ตาม
สำหรับภาพพื้นหลังที่ใช้ CSS สามารถกำหนด aspect-ratio ให้คอนเทนเนอร์ เช่น 16 / 9 เพื่อจองพื้นที่ก่อนภาพโหลดเสร็จได้ แต่ต้องตรวจสอบว่าขนาดบนมือถือเหมาะสมด้วย
WordPress รุ่นปัจจุบันมักเพิ่มข้อมูลขนาดให้ภาพที่แทรกผ่านระบบตามปกติอยู่แล้ว อย่างไรก็ตาม ภาพจาก Page Builder, Custom HTML หรือปลั๊กอินภายนอกยังควรตรวจสอบแยกต่างหาก
2. จองพื้นที่ให้โฆษณาและเนื้อหาที่โหลดภายหลัง
หากเว็บไซต์มีแบนเนอร์โฆษณาหรือเนื้อหาจากบริการภายนอก ควรกำหนดพื้นที่ขั้นต่ำไว้ก่อน เช่น พื้นที่สำหรับโฆษณาสี่เหลี่ยมขนาด 300 × 250 พิกเซลในตำแหน่งที่เหมาะสม
แต่ไม่ควรกำหนดความสูงตายตัวทุกหน้าจอโดยไม่ทดสอบ เพราะอาจทำให้เกิดช่องว่างขนาดใหญ่บนมือถือ ควรใช้ CSS Media Queries เพื่อปรับพื้นที่ตามขนาดอุปกรณ์
ในกรณีที่ไม่สามารถคาดการณ์ความสูงได้ ให้พิจารณาใช้ Placeholder หรือ Skeleton Loading ที่มีขนาดใกล้เคียงกับเนื้อหาจริง
3. ปรับการโหลดฟอนต์ให้เหมาะสม
ถ้าคุณใช้ Google Fonts หรือฟอนต์ที่ติดตั้งเอง ให้ตรวจสอบว่าฟอนต์สำรองมีรูปทรงและความกว้างใกล้เคียงกับฟอนต์หลักหรือไม่
การใช้ font-display: swap ช่วยให้ข้อความแสดงได้ระหว่างรอฟอนต์ แต่ไม่ได้รับประกันว่าจะไม่มี Layout Shift เพราะเมื่อเปลี่ยนฟอนต์ ขนาดข้อความยังอาจเปลี่ยนได้
วิธีที่ละเอียดขึ้นคือเลือกฟอนต์สำรองให้เหมาะสม และใช้คุณสมบัติ CSS อย่าง size-adjust, ascent-override และ descent-override เพื่อปรับเมตริกของฟอนต์สำรองให้ใกล้เคียงฟอนต์จริง
หากเว็บไซต์ใช้ฟอนต์หลายตระกูลโดยไม่จำเป็น การลดจำนวนฟอนต์และน้ำหนักฟอนต์ที่โหลดก็ช่วยให้จัดการประสิทธิภาพได้ง่ายขึ้น
4. ตรวจสอบปลั๊กอินและ Page Builder
เว็บไซต์ WordPress ที่ใช้ Elementor, Divi หรือ Page Builder อื่น ๆ อาจมีส่วนประกอบที่แสดงภายหลัง เช่น Slider, Tabs, Accordion หรือ Animated Section
คุณควรทดสอบทีละส่วน โดยเริ่มจากหน้าแรกและหน้า Landing Page ที่มีองค์ประกอบจำนวนมาก หากพบว่า Slider ทำให้ข้อความเลื่อน ควรกำหนดความสูงหรือสัดส่วนของพื้นที่แสดงผลไว้ตั้งแต่ต้น
อย่าปิดปลั๊กอินทั้งหมดบนเว็บไซต์จริงทันที ควรทดสอบบน Staging Site ก่อน และสำรองข้อมูลทุกครั้งก่อนแก้ไขโค้ดหรือเปลี่ยนการตั้งค่าที่มีผลต่อ Layout
5. หลีกเลี่ยง Animation ที่ทำให้ Layout เปลี่ยน
Animation ไม่ได้ทำให้ CLS สูงเสมอไป แต่การเคลื่อนไหวที่เปลี่ยนคุณสมบัติอย่าง top, left, width หรือ height อาจทำให้เกิดการจัด Layout ใหม่และสร้างการขยับที่ถูกนับเป็น CLS
สำหรับเอฟเฟกต์การเคลื่อนไหว ควรพิจารณาใช้ CSS transform และ opacity แทนเมื่อเหมาะสม เพราะสามารถสร้างการเคลื่อนไหวโดยไม่ต้องเปลี่ยนตำแหน่งขององค์ประกอบในโครงสร้าง Layout
ทำไมแก้ CLS แล้ว PageSpeed ยังไม่ผ่าน?
สถานการณ์ที่พบได้คือคุณแก้ภาพแบนเนอร์แล้ว ทดสอบ PageSpeed อีกครั้งได้ CLS เท่ากับ 0.02 แต่รายงาน Core Web Vitals ยังระบุว่าต้องปรับปรุง
สาเหตุหนึ่งคือข้อมูลภาคสนามจาก Chrome User Experience Report (CrUX) ใช้ข้อมูลการใช้งานย้อนหลังแบบช่วงเวลา 28 วัน ขณะที่ผลทดสอบจำลองเป็นผลจากการทดสอบในขณะนั้น
นอกจากนี้ ข้อมูลภาคสนามอาจแสดงระดับ URL หรือระดับ Origin หากหน้าเว็บนั้นมีข้อมูลไม่เพียงพอ คุณจึงควรตรวจสอบขอบเขตของข้อมูลก่อนสรุปผล
อีกสาเหตุคือเว็บไซต์อาจมี Layout Shift ระหว่างการใช้งานจริง เช่น เปิดเมนู เลื่อนอ่านบทความ หรือโหลดสินค้าเพิ่ม ซึ่งการทดสอบหน้าเว็บช่วงแรกอาจตรวจไม่พบ
หากต้องการวิเคราะห์ให้ลึกขึ้น สามารถใช้ Chrome DevTools ในส่วน Performance เพื่อตรวจสอบเหตุการณ์ Layout Shift และองค์ประกอบที่ได้รับผลกระทบได้
CLS ส่งผลต่อ SEO และยอดขายอย่างไร?
CLS เป็นหนึ่งใน Core Web Vitals ซึ่ง Google ใช้ประกอบระบบจัดอันดับการค้นหา อย่างไรก็ตาม การผ่าน Core Web Vitals ไม่ได้รับประกันว่าอันดับ SEO จะเพิ่มขึ้น เพราะ Google ยังพิจารณาความเกี่ยวข้อง คุณภาพเนื้อหา และปัจจัยอื่นร่วมด้วย
ในมุมธุรกิจ ความเสถียรของหน้าเว็บมีความสำคัญโดยตรงกับประสบการณ์ใช้งาน เช่น เว็บไซต์ร้านค้าที่ปุ่มเพิ่มสินค้าลงตะกร้าเคลื่อนตำแหน่ง หรือเว็บไซต์บริการที่แบบฟอร์มจองคิวขยับขณะลูกค้ากรอกข้อมูล
ปัญหาเหล่านี้อาจทำให้ผู้ใช้กดผิด เสียเวลา หรือไม่มั่นใจในการใช้งาน แม้ไม่สามารถระบุได้ว่า CLS เพียงอย่างเดียวทำให้ยอดขายลดลงเท่าไร แต่ก็เป็นปัญหาที่ควรแก้ไขก่อนเพิ่มงบโฆษณาเพื่อดึงคนเข้าเว็บไซต์
หากคุณกำลังปรับเว็บไซต์เพื่อเพิ่มประสิทธิภาพ ควรอ่านเพิ่มเติมเกี่ยวกับ วิธีปรับ Core Web Vitals และ ปัญหา Hosting ช้าส่งผลต่อเว็บไซต์อย่างไร เพื่อวางแผนปรับทั้งความเร็วและความเสถียรควบคู่กัน
ควรเริ่มแก้ CLS จากหน้าไหนก่อน?
หากเว็บไซต์มีหลายร้อยหน้า ไม่จำเป็นต้องไล่แก้ทุกหน้าพร้อมกัน ให้เริ่มจากหน้าที่มีผู้เข้าชมมากและมีความสำคัญทางธุรกิจสูง เช่น หน้าแรก หน้าสินค้าขายดี หน้า Landing Page จากโฆษณา และหน้าชำระเงิน
ตัวอย่างเช่น เว็บไซต์ขายสินค้า WordPress มีค่า CLS 0.32 บนมือถือ หลังตรวจสอบพบว่าแบนเนอร์โปรโมชั่นด้านบนไม่มีการจองพื้นที่ และรูปสินค้าบางส่วนไม่มีสัดส่วนที่แน่นอน
แนวทางแก้คือกำหนดพื้นที่แบนเนอร์ให้เหมาะกับมือถือและเดสก์ท็อป จากนั้นปรับรูปสินค้าให้มีขนาดหรือสัดส่วนที่ชัดเจน แล้วทดสอบซ้ำด้วย PageSpeed Insights และ DevTools
กรณีนี้เป็นตัวอย่างขั้นตอนการแก้ปัญหา ไม่ใช่ผลทดสอบจากเว็บไซต์จริง หลังปรับแล้วต้องวัดค่า CLS ใหม่ ไม่ควรคาดเดาว่าคะแนนจะลดลงเท่าไร
สำหรับเว็บไซต์ที่ใช้ธีมหรือเทมเพลตเดียวกันหลายหน้า การแก้ปัญหาที่ส่วนกลาง เช่น Header, Product Card หรือ Navigation อาจช่วยลด Layout Shift ได้หลาย URL พร้อมกัน จึงคุ้มค่ากว่าการแก้หน้าแยกโดยไม่มีแผน
คุณสามารถศึกษาเพิ่มเติมเกี่ยวกับ การอัปเดต WordPress อย่างปลอดภัย และ การปรับรูปภาพสำหรับ SEO เพื่อช่วยลดปัญหาจากธีม ปลั๊กอิน และการจัดการรูปภาพในระยะยาว
คำถามที่พบบ่อย
CLS เท่าไหร่ถึงถือว่าผ่าน Core Web Vitals?
ค่า CLS ที่ดีควรไม่เกิน 0.1 โดย Google ประเมินข้อมูลผู้ใช้งานจริงที่เปอร์เซ็นไทล์ 75 และพิจารณาประสบการณ์บนมือถือและเดสก์ท็อป หากค่าอยู่ระหว่างมากกว่า 0.1 ถึง 0.25 ถือว่าควรปรับปรุง และหากมากกว่า 0.25 ถือว่าอยู่ในระดับแย่
ใช้ปลั๊กอินเพิ่มความเร็ว WordPress แล้ว CLS จะลดลงไหม?
ไม่จำเป็นเสมอไป เพราะปลั๊กอินแคชหรือเพิ่มความเร็วอาจช่วยให้ทรัพยากรโหลดเร็วขึ้น แต่ไม่ได้แก้ปัญหาการไม่มีพื้นที่รองรับรูปภาพ โฆษณา หรือองค์ประกอบที่แทรกเข้ามาภายหลังโดยตรง บางการตั้งค่าที่เลื่อนโหลด JavaScript ยังอาจทำให้ Layout Shift เพิ่มขึ้นได้ จึงต้องทดสอบก่อนและหลังปรับทุกครั้ง
แก้ CLS แล้วต้องรอกี่วัน Google ถึงอัปเดตผล?
ผลทดสอบจำลองจาก PageSpeed Insights สามารถตรวจสอบใหม่ได้ทันทีหลังเว็บไซต์อัปเดต แต่ข้อมูล Core Web Vitals จากผู้ใช้จริงอาศัยข้อมูลย้อนหลัง 28 วัน จึงต้องใช้เวลาสะสมข้อมูลใหม่ และอาจไม่เปลี่ยนสถานะทันที คุณควรติดตามผลใน Google Search Console และตรวจสอบว่าปัญหาเดิมไม่เกิดขึ้นระหว่างการใช้งานจริง
เริ่มต้นวันนี้ด้วยการตรวจหน้าเว็บสำคัญเพียงหนึ่งหน้า เปิด PageSpeed Insights ดูค่า CLS แล้วตรวจภาพแบนเนอร์ ฟอนต์ และส่วนประกอบที่โหลดภายหลัง จากนั้นแก้สาเหตุที่พบและวัดผลซ้ำ วิธีนี้ช่วยให้คุณปรับเว็บไซต์อย่างมีหลักฐาน ลดการแก้ไขที่ไม่จำเป็น และสร้างประสบการณ์ที่ดีขึ้นให้ลูกค้าทุกครั้งที่เข้าชมเว็บไซต์