Cumulative Layout Shift หรือ CLS นั้นเป็นตัวชี้วัดที่สำคัญมากในการวัดความเสถียรของเลย์เอาต์บนหน้าเว็บไซต์ โดยวัดการเปลี่ยนแปลงที่ไม่คาดคิดของตำแหน่งองค์ประกอบบนหน้าจอขณะที่กำลังโหลด ค่า CLS
CLS คืออะไร
CLS วัดการเปลี่ยนแปลงที่ไม่คาดคิดของตำแหน่งองค์ประกอบบนหน้าจอขณะที่กำลังโหลด ซึ่งอาจทำให้ผู้ใช้รู้สึกหงุดหงิดและรำคาญได้ ตัวอย่างเช่น
-ภาพหรือข้อความเลื่อน ขณะที่ผู้ใช้กำลังอ่านเนื้อหาอยู่ดีๆ ภาพหรือข้อความที่อยู่ด้านล่างก็เลื่อนขึ้นมาทับ ทำให้ต้องเลื่อนหน้าจอใหม่
-ปุ่มเปลี่ยนตำแหน่ง ผู้ใช้เล็งจะคลิกปุ่ม A แต่พอจะคลิก ปุ่ม A กลับเลื่อนไปอยู่ที่ตำแหน่งของปุ่ม B ทำให้คลิกผิด
ทำไม CLS ถึงสำคัญ
-CLS ที่สูง บ่งบอกว่าหน้าเว็บไม่เสถียร ทำให้ผู้ใช้รู้สึกสับสนและหงุดหงิด อาจนำไปสู่การออกจากเว็บไซต์
-Google ให้ความสำคัญกับ CLS ในการจัดอันดับผลการค้นหา ดังนั้นการมี CLS ที่ดีจะช่วยให้เว็บไซต์ติดอันดับบนหน้าแรกของ Google ได้
ปัจจัยที่ทำให้เกิด CLS
-ภาพโหลดช้า เพราะมีขนาดใหญ่ ใช้เวลาโหลดนานอาจทำให้เนื้อหาอื่นๆ เลื่อนลงมา
-โฆษณาที่โหลดช้าหรือมีขนาดใหญ่สามารถทำให้เลย์เอาต์เปลี่ยนแปลงได้
-ฟอนต์ที่ใช้เวลานานในการโหลดอาจทำให้ข้อความเปลี่ยนตำแหน่ง
-JavaScript ที่ทำงานช้า ไม่สมบูรณ์อาจทำให้เกิดการเปลี่ยนแปลงของเลย์เอาต์
วิธีลด CLS
-บีบอัดภาพและไฟล์ CSS, JavaScript เพื่อลดขนาดไฟล์ที่ต้องดาวน์โหลด
-โหลดสคริปต์ที่ไม่จำเป็นสำหรับการแสดงผลหน้าเว็บในตอนแรก เพื่อให้หน้าเว็บโหลดได้เร็วขึ้น
-แสดง placeholder หรือพื้นที่ว่างไว้ก่อนที่เนื้อหาจะโหลดเสร็จ เพื่อป้องกันการเปลี่ยนแปลงของเลย์เอาต์
-ตรวจสอบ CSS เพื่อให้แน่ใจว่าไม่มีการใช้คำสั่งที่ทำให้เกิดการเปลี่ยนแปลงของเลย์เอาต์
-โหลดภาพหรือเนื้อหาอื่นๆ ที่อยู่ด้านล่างของหน้าจอเมื่อผู้ใช้เลื่อนลงมาถึงเท่านั้น
สรุป
CLS เป็นตัวชี้วัดที่สำคัญในการวัดประสบการณ์ของผู้ใช้ การลด CLS จะช่วยให้เว็บไซต์มีความเสถียร และเป็นที่น่าพอใจของผู้ใช้มากขึ้น ส่งผลต่อเว็บการจัดอันดับเว็บไซต์
---Wynnsoft Solution รับทำเว็บไซต์ รับทำ SEO รับทำการตลาดออนไลน์ รับทำโฆษณา Facebook รับทำเว็บไซต์ ขอนแก่น และรับทำเว็บไซต์ทั่วประเทศ—
ข้อมูลจาก: นักเขียนนิรนาม