Cumulative Layout Shift (CLS)

Milica Mihajlija

Philip Walton

การเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดอาจรบกวนประสบการณ์ของผู้ใช้ได้หลายวิธี ตั้งแต่ทำให้ผู้ใช้เสียตำแหน่งขณะอ่านหากข้อความเลื่อนไปอย่างกะทันหัน ไปจนถึงทำให้ผู้ใช้คลิกลิงก์หรือปุ่มที่ไม่ถูกต้อง ซึ่งในบางกรณีอาจทำให้เกิดความเสียหายร้ายแรง

การเคลื่อนไหวของเนื้อหาหน้าเว็บที่ไม่คาดคิดมักเกิดขึ้นเมื่อทรัพยากรโหลดแบบไม่พร้อมกันหรือมีการเพิ่มองค์ประกอบ DOM ลงในหน้าเว็บแบบไดนามิกก่อนเนื้อหาที่มีอยู่ สาเหตุที่เลย์เอาต์เปลี่ยนอาจเกิดจากรูปภาพหรือวิดีโอที่มีขนาดที่ไม่รู้จัก แบบอักษรที่แสดงผลใหญ่กว่าหรือเล็กกว่าแบบอักษรสำรองแรก หรือโฆษณาหรือวิดเจ็ตของบุคคลที่สามที่ปรับขนาดตัวเองแบบไดนามิก

ความแตกต่างระหว่างวิธีที่เว็บไซต์ทํางานในระหว่างการพัฒนากับประสบการณ์การใช้งานของผู้ใช้ทําให้ปัญหานี้แย่ลง เช่น

• เนื้อหาที่ปรับตามโปรไฟล์ของผู้ใช้หรือเนื้อหาของบุคคลที่สามมักจะทำงานแตกต่างกันระหว่างการพัฒนาและเวอร์ชันที่ใช้งานจริง
• รูปภาพทดสอบมักจะอยู่ในแคชของเบราว์เซอร์ของนักพัฒนาแอปอยู่แล้ว แต่ผู้ใช้ปลายทางจะใช้เวลาโหลดนานกว่า
• การเรียก API ที่ทำงานในเครื่องมักจะเร็วมากจนความล่าช้าที่มองไม่เห็นในการพัฒนาอาจกลายเป็นปัญหาสำคัญในเวอร์ชันที่ใช้งานจริง

เมตริกการเปลี่ยนเลย์เอาต์แบบสะสม (CLS) ช่วยคุณแก้ไขปัญหานี้โดยการวัดความถี่ที่ปัญหานี้เกิดขึ้นกับผู้ใช้จริง

CLS คืออะไร

CLS คือค่าที่วัดคะแนนการเปลี่ยนเลย์เอาต์ที่พุ่งขึ้นสูงสุดสําหรับการเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดทุกครั้งซึ่งเกิดขึ้นตลอดอายุการใช้งานของหน้าเว็บ

การเปลี่ยนเลย์เอาต์จะเกิดขึ้นทุกครั้งที่องค์ประกอบที่มองเห็นได้เปลี่ยนตำแหน่งจากเฟรมที่แสดงผลเฟรมหนึ่งไปยังอีกเฟรมหนึ่ง (โปรดดูรายละเอียดเกี่ยวกับวิธีคํานวณคะแนนการเปลี่ยนเลย์เอาต์แต่ละรายการในบทถัดไปของคู่มือนี้)

การเปลี่ยนเลย์เอาต์อย่างรวดเร็วซึ่งเรียกว่ากรอบเวลาเซสชันคือการเปลี่ยนเลย์เอาต์อย่างน้อย 1 ครั้งที่เกิดขึ้นอย่างต่อเนื่องภายในเวลาไม่ถึง 1 วินาทีระหว่างการเปลี่ยนแต่ละครั้ง และระยะเวลาของกรอบเวลาทั้งหมดไม่เกิน 5 วินาที

ช่วงที่มีการเพิ่มขึ้นสูงสุดคือกรอบเวลาเซสชันที่มีคะแนนสะสมสูงสุดของการเปลี่ยนเลย์เอาต์ทั้งหมดภายในกรอบเวลานั้น

คะแนน CLS ที่ดีคืออะไร

เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี เว็บไซต์ต้องพยายามให้มีคะแนน CLS ไม่เกิน 0.1 เกณฑ์การวัดที่ดีเพื่อให้มั่นใจว่าคุณบรรลุเป้าหมายนี้สําหรับผู้ใช้ส่วนใหญ่คือเปอร์เซ็นต์ไทล์ที่ 75 ของการโหลดหน้าเว็บ ซึ่งแบ่งกลุ่มตามอุปกรณ์เคลื่อนที่และเดสก์ท็อป

ดูข้อมูลเพิ่มเติมเกี่ยวกับการวิจัยและวิธีการที่แนะนํานี้ได้ที่การกำหนดเกณฑ์เมตริก Core Web Vitals

รายละเอียดการเปลี่ยนแปลงเลย์เอาต์

การเปลี่ยนแปลงของเลย์เอาต์จะกำหนดโดย Layout Instability API ซึ่งจะรายงานรายการ layout-shift รายการทุกครั้งที่องค์ประกอบที่มองเห็นได้ภายในวิวพอร์ตเปลี่ยนตำแหน่งเริ่มต้น (เช่น ตำแหน่งด้านบนและซ้ายในโหมดการเขียนเริ่มต้น) ระหว่าง 2 เฟรม องค์ประกอบดังกล่าวถือเป็นองค์ประกอบที่ไม่เสถียร

โปรดทราบว่าการเปลี่ยนเลย์เอาต์จะเกิดขึ้นก็ต่อเมื่อองค์ประกอบที่มีอยู่เปลี่ยนตำแหน่งเริ่มต้นเท่านั้น หากมีการเพิ่มองค์ประกอบใหม่ลงใน DOM หรือองค์ประกอบที่มีอยู่เปลี่ยนขนาด ระบบจะไม่นับเป็นการเปลี่ยนแปลงเลย์เอาต์ ตราบใดที่การเปลี่ยนแปลงดังกล่าวไม่ทําให้องค์ประกอบอื่นๆ ที่มองเห็นได้เปลี่ยนตําแหน่งเริ่มต้น

คะแนนการเปลี่ยนเลย์เอาต์

ในการคํานวณคะแนนการเปลี่ยนเลย์เอาต์เบราว์เซอร์จะดูขนาดวิวพอร์ตและการเคลื่อนไหวขององค์ประกอบที่ไม่เสถียรในวิวพอร์ตระหว่างเฟรมที่แสดงผล 2 เฟรม คะแนนการเปลี่ยนแปลงเลย์เอาต์คือผลคูณของค่าการวัดการเคลื่อนไหว 2 ค่า ได้แก่ เศษส่วนของผลลัพธ์และเศษส่วนของระยะทาง (ทั้ง 2 ค่ามีคำจำกัดความอยู่ด้านล่าง)

layout shift score = impact fraction * distance fraction

เศษส่วนของผลกระทบ

เศษส่วนของผลลัพธ์จะวัดว่าองค์ประกอบที่ไม่เสถียรส่งผลต่อพื้นที่ในวิวพอร์ตระหว่าง 2 เฟรมอย่างไร

ส่วนที่เป็นผลกระทบของเฟรมหนึ่งๆ คือพื้นที่ที่มองเห็นได้ขององค์ประกอบที่ไม่เสถียรทั้งหมดของเฟรมนั้นและเฟรมก่อนหน้า โดยคิดเป็นเศษส่วนของพื้นที่ทั้งหมดของวิวพอร์ต