Cumulative Layout Shift (CLS)

การโหลดรูปภาพ/โฆษณาที่ช้า, การทำงานแบบอะซิงโครนัส, การเปลี่ยนแปลง DOM แบบไดนามิก ฯลฯ

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

เพื่อตรวจสอบความไม่เสถียรทางภาพที่อาจทำให้ผู้ใช้คลิกผิดพลาด

"คะแนน CLS ที่ดีคือ 0.1 หรือต่ำกว่า"

Layout Instability API ให้ค่าการวัดที่เรียกว่า Layout Shift Score

- Layout Shift Score = impact fraction ( วัตถุที่เคลื่อนที่มีขนาดมากน้อยเพียงใด ) * distance fraction ( เคลื่อนที่ไปมากแค่ไหน )

- หากเลย์เอาต์เปลี่ยนจากการกระทำของผู้ใช้ถือว่าไม่เป็นไร - ถ้ามีอินพุตจากผู้ใช้ภายใน 500ms จะมีการตั้งค่า `hadRecentInput` จึงสามารถตัดออกจากการคำนวณได้

- แทนที่จะเปลี่ยน `height/width` ให้ใช้ `transform:scale()`

- แทนที่จะเปลี่ยน `top,right,bottom,left` ให้ใช้ `transform: translate()`

วิธีปรับปรุง CLS

- กำหนดขนาดให้รูปภาพ/วิดีโอเสมอ หรือจองตำแหน่งไว้ล่วงหน้าด้วย CSS Aspect Ratio Boxes เป็นต้น

- อย่าเพิ่มเนื้อหาใหม่ไว้เหนือเนื้อหาที่มีอยู่ ยกเว้นในกรณีของการโต้ตอบจากผู้ใช้

- ใช้อนิเมชันด้วย CSS Transform เป็นต้น สำหรับการเปลี่ยนผ่านระหว่างสถานะต่าง ๆ

[kunggom]

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

[xguru]

สื่อในประเทศมีโฆษณามากเกินไป แถมตัวโฆษณาเองก็โหลดช้าและกะพริบอีก เลยรู้สึกว่าการวัดมันแทบไม่มีความหมาย...

พูดถึงอีกเรื่อง ผมใช้ https://github.com/disjukr/just-news กับ Tampermonkey เพื่อดูเฉพาะเนื้อหาบทความของสื่อในประเทศ เว็บไซต์รกเกินไปครับ

[kunggom]

ผมเองก็เคยคิดจะเขียน [โปรแกรมที่ถ้าใส่ลิงก์บทความของสำนักข่าวเข้าไปแล้วจะแปลงเป็นลิงก์ข่าวในพอร์ทัลโดยอัตโนมัติ] ด้วย Python เหมือนกันครับ แต่ก็น่าอึดอัดตรงที่ดันทำซอร์สโค้ดหายไปหมดอย่างงง ๆ (เผลอบันทึกไว้ใน RAM drive แล้วรีบูต) แล้วก็เข้าสู่โหมดปลงชีวิต(?) เลยเลิกไปครับ

[xguru]

ตัวชี้วัดประสิทธิภาพที่ยึดผู้ใช้เป็นศูนย์กลาง

https://web.dev/user-centric-performance-metrics

https://developers.google.com/web/fundamentals/…

ตัวชี้วัดเดิมอย่าง load และ DOMContentLoaded ไม่ใช่ตัวชี้วัดที่ดี

First contentful paint (FCP): เวลาที่คอนเทนต์ชิ้นแรกเริ่มแสดงบนหน้าจอ

Largest contentful paint (LCP): เวลาที่บล็อกข้อความหรือรูปภาพที่ใหญ่ที่สุดของหน้าแสดงขึ้นมา

First input delay (FID): เวลาที่ใช้ตั้งแต่ผู้ใช้สามารถป้อนข้อมูลได้จริง จนเบราว์เซอร์ตอบสนองต่ออินพุตนั้น

Time to Interactive (TTI): เวลาตั้งแต่เริ่มโหลดจนสามารถโต้ตอบกับผู้ใช้ได้

Total blocking time (TBT): เวลารวมระหว่าง FCP กับ TTI

Cumulative layout shift (CLS): ตัวชี้วัดการเปลี่ยนแปลงของเลย์เอาต์