ความพึงพอใจของผู้ใช้คือหัวใจสำคัญในการสร้างเว็บไซต์ที่ประสบความสำเร็จ โดยเฉพาะในยุคที่ Google ให้ความสำคัญกับประสบการณ์ผู้ใช้ (User Experience) มากขึ้นเรื่อย ๆ หนึ่งในตัวชี้วัดที่สำคัญที่นักพัฒนาเว็บไซต์และผู้ทำ SEO ต้องให้ความสนใจนั่นก็คือ CLS หรือ Cumulative Layout Shift ซึ่งเป็นส่วนหนึ่งของ Core Web Vitals ที่ Google ใช้เป็นปัจจัยในการจัดอันดับเว็บไซต์ บทความนี้จะพาคุณทำความเข้าใจกับเมทริกนี้ให้มากขึ้น
ทำความรู้จัก CLS (Cumulative Layout Shift)
รูปภาพจาก : BionicWP
Cumulative Layout Shift คือการวัดความเสถียรของการแสดงผลหน้าเว็บ โดยเฉพาะการเปลี่ยนแปลงตำแหน่งของเลย์เอาท์หรือองค์ประกอบต่าง ๆ บนหน้าเว็บที่เกิดขึ้นโดยไม่คาดคิด หรือไม่ได้เกิดจากการกระทำของผู้ใช้
ในกรณีที่เกิดความผิดปกติขณะที่มีผู้ใช้งานเข้าหน้าเว็บไซต์ เช่น หน้าเว็บเลื่อนลงเพราะมีรูปภาพหรือโฆษณาโหลดขึ้นมาจนทำให้ผู้ใช้กดผิดปุ่ม นั่นคือประสบการณ์ที่แย่ซึ่งเกิดจาก CLS ที่สูง
ซึ่ง Google มีเกณฑ์การประเมิน CLS ดังนี้
- น้อยกว่า 0.1 = ดี
- 0.1 ถึง 0.25 = ต้องปรับปรุง
- มากกว่า 0.25 = แย่
รูปภาพจาก : BionicWP
หากค่า CLS ยิ่งต่ำยิ่งดี เพราะหมายถึงเว็บไซต์มีความเสถียรในการแสดงผล ช่วยให้ผู้ใช้มีประสบการณ์ที่ดีในการใช้งานเว็บไซต์
CLS มีผลต่อ SEO อย่างไร?
เมทริกนี้ไม่เพียงแต่ส่งผลต่อประสบการณ์ผู้ใช้เท่านั้น แต่ยังมีผลโดยตรงต่อ SEO ของเว็บไซต์ด้วย เพราะ Google ได้ประกาศว่า Core Web Vitals เป็นปัจจัยที่ใช้ในการจัดอันดับเว็บไซต์ตั้งแต่ปี 2021 เป็นต้นมา
ความสัมพันธ์ระหว่าง CLS กับ Core Web Vitals
Core Web Vitals ประกอบด้วยตัวชี้วัดสามตัวที่สะท้อนประสบการณ์ผู้ใช้บนเว็บไซต์
- Largest Contentful Paint (LCP) – วัดความเร็วในการโหลดหน้าเว็บ
- First Input Delay (FID) – วัดความเร็วในการตอบสนองต่อการกระทำของผู้ใช้
- Cumulative Layout Shift (CLS) – วัดความเสถียรของการแสดงผลหน้าเว็บ
CLS จึงเป็น 1 ใน 3 องค์ประกอบที่สำคัญของ Core Web Vitals ที่ Google ใช้ประเมินคุณภาพของเว็บไซต์ หากเว็บไซต์ของคุณมีค่า CLS สูง แม้จะมีเนื้อหาที่มีคุณภาพ แต่ก็อาจส่งผลเสียต่ออันดับในผลการค้นหาได้เช่นกัน
Google ให้ความสำคัญกับ CLS อย่างไร?
Google มุ่งเน้นที่จะมอบประสบการณ์ที่ดีที่สุดให้กับผู้ใช้ในการค้นหาข้อมูล หากเว็บไซต์ที่มี CLS ต่ำ (ดี) จะได้รับความพึงพอใจจากผู้ใช้มากกว่า เพราะไม่มีการเลื่อนของเลย์เอาท์ที่ไม่คาดคิด ทำให้ผู้ใช้สามารถใช้งานเว็บไซต์ได้ราบรื่น และด้วยเหตุนี้ Google จึงใช้ CLS เป็นหนึ่งในตัวชี้วัดที่สำคัญในการประเมินคุณภาพของเว็บไซต์ เว็บไซต์ที่มี CLS ดีจะมีโอกาสติดอันดับที่ดีในผลการค้นหามากกว่า
อะไรเป็นสาเหตุที่ทำให้เกิด CLS สูง?
มีหลายปัจจัยที่ทำให้เกิด CLS สูง ซึ่งล้วนเกี่ยวข้องกับการพัฒนาเว็บไซต์และการจัดการทรัพยากรต่าง ๆ บนหน้าเว็บ
การโหลดภาพหรือวิดีโอแบบไม่มีขนาดที่กำหนด
เมื่อคุณไม่กำหนดขนาดของรูปภาพหรือวิดีโอในโค้ด HTML เช่น ไม่ระบุ width และ height เบราว์เซอร์ก็ไม่ทราบได้ว่าควรจัดสรรพื้นที่เท่าไรสำหรับองค์ประกอบเหล่านั้น และเมื่อรูปภาพหรือวิดีโอโหลดเสร็จ อาจทำให้เกิดการเปลี่ยนแปลงเลย์เอาท์ของหน้าเว็บ จนดันเนื้อหาอื่น ๆ ให้เลื่อนลงหรือเปลี่ยนตำแหน่ง
ฟอนต์เว็บที่เปลี่ยนแปลงหลังจากโหลด
การใช้ฟอนต์เว็บที่ต้องดาวน์โหลดจากแหล่งภายนอก (Web Fonts) โดยไม่มีการจัดการที่เหมาะสม อาจทำให้เกิดการเปลี่ยนแปลงของเลย์เอาท์เมื่อฟอนต์โหลดเสร็จ เพราะฟอนต์แต่ละแบบอาจมีขนาดและระยะห่างที่แตกต่างกัน
การโหลดโฆษณาหรือคอนเทนต์แบบไดนามิก
ไม่ว่าจะเป็นผลการค้นหา หรือข้อมูลที่อัพเดทแบบเรียลไทม์ อาจทำให้เกิดการเปลี่ยนแปลงของเลย์เอาท์ที่ไม่คาดคิดหากไม่มีการจัดสรรพื้นที่ไว้ล่วงหน้า
ป๊อปอัปและแบนเนอร์ที่เคลื่อนที่
ป๊อปอัป แบนเนอร์ หรือการแจ้งเตือนที่ปรากฏขึ้นหลังจากหน้าเว็บโหลดเสร็จ อาจทำให้เกิดการเปลี่ยนแปลงของเลย์เอาท์ โดยเฉพาะหากมีการผลักดันหรือเลื่อนเนื้อหาอื่น ๆ ออกไป
วิธีวัดค่า CLS และเครื่องมือที่ใช้ตรวจสอบ
การวัดค่า CLS เป็นสิ่งสำคัญเพื่อให้ทราบว่าเว็บไซต์ของคุณมีปัญหาด้านความเสถียรของการแสดงผลหรือไม่ Google ได้จัดเตรียมเครื่องมือที่ช่วยในการวัดค่า CLS ไว้หลายตัว ดังนี้
Google PageSpeed Insights
เป็นเครื่องมือที่ใช้งานง่าย เพียงกรอก URL ของเว็บไซต์ที่ต้องการตรวจสอบ คุณจะได้รับรายงานที่ละเอียดเกี่ยวกับ Core Web Vitals รวมถึงค่า CLS
Google Search Console
เป็นเครื่องมือที่ให้ข้อมูลเกี่ยวกับ Core Web Vitals ของเว็บไซต์คุณ โดยรวบรวมข้อมูลจากผู้ใช้จริง (Field Data)
Chrome DevTools
เครื่องมือที่ช่วยในการวิเคราะห์ปัญหา CLS โดยละเอียด แสดงให้เห็นว่าองค์ประกอบใดบนหน้าเว็บที่ก่อให้เกิดการเปลี่ยนแปลงของเลย์เอาท์
Lighthouse
เครื่องมือที่ช่วยตรวจสอบประสิทธิภาพของเว็บไซต์ รวมถึง Core Web Vitals และ CLS สามารถใช้งานผ่าน Chrome DevTools หรือเป็นส่วนเสริมของเบราว์เซอร์
Web Vitals Extension
ส่วนเสริมของ Chrome ที่ช่วยวัดค่า Core Web Vitals ในขณะที่คุณเรียกดูเว็บไซต์
วิธีลด CLS เพื่อให้เว็บโหลดเสถียรขึ้น
การลดค่า CLS จะช่วยปรับปรุงประสบการณ์ผู้ใช้และเพิ่มโอกาสในการจัดอันดับที่ดีบน Google มาดูวิธีที่มีประสิทธิภาพในการลดค่า CLS
กำหนดขนาดภาพและวิดีโอล่วงหน้า
การกำหนดขนาดของรูปภาพและวิดีโอในโค้ด HTML เป็นวิธีที่มีประสิทธิภาพที่สุดในการลดค่า CLS คุณควรระบุ width และ height ให้กับรูปภาพและวิดีโอเสมอ เพื่อให้เบราว์เซอร์สามารถจัดสรรพื้นที่ได้ถูกต้องตั้งแต่แรก
<img src=”image.jpg” width=”800″ height=”600″ alt=”Description”>
นอกจากนี้ คุณยังสามารถใช้ aspect-ratio ใน CSS เพื่อรักษาสัดส่วนของรูปภาพ
img {
aspect-ratio: attr(width) / attr(height);
}
ใช้ฟอนต์แบบ Preload เพื่อป้องกันการเปลี่ยนแปลง
การ Preload ฟอนต์จะช่วยให้ฟอนต์พร้อมใช้งานเร็วขึ้น ลดการเปลี่ยนแปลงของเลย์เอาท์เมื่อฟอนต์โหลดเสร็จ
<link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin>
นอกจากนี้ คุณยังสามารถใช้ font-display: swap ใน CSS เพื่อควบคุมพฤติกรรมของฟอนต์ในขณะที่กำลังโหลดได้อีกด้วย
@font-face {
font-family: ‘MyFont’;
src: url(‘font.woff2’) format(‘woff2’);
font-display: swap;
}
จัดการโฆษณาและแบนเนอร์ให้อยู่ในตำแหน่งที่แน่นอน
การจัดสรรพื้นที่สำหรับโฆษณาและแบนเนอร์ล่วงหน้าจะช่วยลดการเปลี่ยนแปลงของเลย์เอาท์ได้ ซึ่งควรกำหนดขนาดของพื้นที่สำหรับโฆษณาไว้ก่อน แม้ว่าโฆษณาจะยังไม่โหลด
.ad-container {
min-height: 250px;
width: 300px;
}
สำหรับป๊อปอัปหรือแบนเนอร์ ควรออกแบบให้ไม่ผลักดันเนื้อหาอื่น ๆ ออกไป เช่น แสดงผลที่ตำแหน่งคงที่หรือลอยอยู่ด้านบนของเนื้อหา
.popup {
position: fixed;
top: 20px;
right: 20px;
z-index: 999;
}
ใช้ CSS และ JavaScript อย่างเหมาะสมเพื่อลดการเปลี่ยนแปลงของ Layout
การใช้ CSS และ JavaScript อย่างเหมาะสมจะช่วยลดการเปลี่ยนแปลงของเลย์เอาท์ เช่น
- ใช้ transform แทนการเปลี่ยนแปลง width และ height
.element {
transform: scale(1.2);
}
- หลีกเลี่ยงการใช้ JavaScript เพื่อเปลี่ยนแปลงโครงสร้างของ DOM ในขณะที่หน้าเว็บกำลังโหลด
- ใช้ skeleton screens เพื่อแสดงโครงสร้างของเนื้อหาในขณะที่กำลังโหลด
- ใช้ Container Queries เพื่อปรับเปลี่ยนเลย์เอาท์ตามขนาดของคอนเทนเนอร์ แทนที่จะใช้ Media Queries ที่อาจทำให้เกิดการเปลี่ยนแปลงที่ไม่คาดคิด
สรุป
CLS เป็นตัวชี้วัดที่สำคัญในการประเมินคุณภาพของเว็บไซต์ ที่สะท้อนถึงความเสถียรของการแสดงผลและประสบการณ์ผู้ใช้ Google ให้ความสำคัญกับ CLS มากขึ้นเรื่อย ๆ เพราะเป็นส่วนหนึ่งของ Core Web Vitals ที่ใช้ในการจัดอันดับเว็บไซต์
นอกจากนี้การตรวจสอบและปรับปรุงค่า CLS ควรเป็นส่วนหนึ่งของกระบวนการพัฒนาและปรับปรุงเว็บไซต์อย่างต่อเนื่อง เพื่อให้เว็บไซต์มีประสิทธิภาพที่ดีและสามารถแข่งขันได้ หากคุณกำลังมองหาความช่วยเหลือในการพัฒนาเว็บไซต์เพื่อเพิ่มประสิทธิภาพการทำธุรกิจของคุณ เราขอแนะนำให้คุณติดต่อ Yes Web Design Studio ซึ่งเป็นผู้เชี่ยวชาญด้านการออกแบบเว็บไซต์ SEO และการตลาดออนไลน์ครบวงจร พร้อมช่วยพัฒนาเว็บไซต์ที่เหมาะสมกับความต้องการทางธุรกิจของคุณให้เติบโตได้อย่างยั่งยืน
Yes Web Design Studio
Tel. : 096-879-5445
LINE : @yeswebdesign
E-mail : [email protected]
Address : ชั้น 17 อาคารวิทยกิตติ์ ถนนพญาไท วังใหม่ ปทุมวัน กรุงเทพมหานคร 10330 (สถานี BTS สยาม)
