Cumulative Layout Shift (CLS)

Mức độ tải chậm của hình ảnh/quảng cáo, hoạt động bất đồng bộ, thay đổi DOM động, v.v.

là một chỉ số hiệu năng lấy người dùng làm trung tâm để kiểm tra mức độ bất ổn định về mặt thị giác có thể khiến người dùng nhấp nhầm,

bằng cách đo xem bố cục của trang web thay đổi nhiều đến mức nào.

"Điểm CLS tốt là từ 0.1 trở xuống"

API Layout Instability cung cấp một giá trị đo gọi là Layout Shift Score

- Layout Shift Score = impact fraction (đối tượng có kích thước lớn đến mức nào khi bị di chuyển) * distance fraction (di chuyển nhiều đến mức nào)

- Bố cục thay đổi do hành động của người dùng là chấp nhận được - nếu có đầu vào của người dùng trong vòng 500ms thì `hadRecentInput` sẽ được thiết lập nên có thể loại khỏi phép tính

- Thay vì thay đổi `height`/`width`, hãy dùng `transform:scale()`

- Thay vì thay đổi `top,right,bottom,left`, hãy dùng `transform: translate()`

Cách cải thiện CLS

- Luôn chỉ định kích thước cho ảnh/video hoặc giữ chỗ trước bằng CSS Aspect Ratio Boxes, v.v.

- Ngoại trừ tương tác của người dùng, không thêm nội dung mới phía trên nội dung hiện có

- Với thay đổi giữa các trạng thái, hãy xử lý animation bằng CSS Transform, v.v.

[kunggom]

Đúng vào lúc định bấm thì bố cục lại bất ngờ xê dịch nhẹ khiến mình chạm nhầm khá thường xuyên, nên nhiều lúc bực thật sự; giờ cuối cùng cũng đã có cách để đo lường việc này một cách định lượng rồi. Cá nhân mình nghĩ nếu đem cái này đi đo trên trang chủ của các tòa soạn báo thì chắc sẽ ra những con số thảm hại.

[xguru]

Các cơ quan báo chí trong nước có quá nhiều quảng cáo, mà bản thân các quảng cáo đó cũng chậm và nhấp nháy nên có lẽ việc đo lường tự nó đã là vô nghĩa...

Nói chuyện khác một chút, tôi dùng https://github.com/disjukr/just-news và Tampermonkey nên với báo chí trong nước tôi chỉ xem phần nội dung bài viết. Website quá lộn xộn.

[kunggom]

Trước đây tôi cũng từng định viết bằng Python một [chương trình tự động đổi liên kết bài báo của cơ quan báo chí thành liên kết bài báo trên cổng tin tức]. Nhưng khá trớ trêu là tôi đã làm mất mã nguồn (do lỡ lưu vào RAM drive rồi khởi động lại), sau đó rơi vào trạng thái kiểu như "ngộ ra chân lý"(?) nên bỏ luôn.

[xguru]

Các chỉ số hiệu năng lấy người dùng làm trung tâm

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

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

load, DOMContentLoaded hiện có không phải là các chỉ số tốt

First Contentful Paint (FCP): thời điểm nội dung đầu tiên bắt đầu được hiển thị trên màn hình

Largest Contentful Paint (LCP): khi khối văn bản hoặc hình ảnh lớn nhất của trang được hiển thị

First Input Delay (FID): khoảng thời gian từ lúc có thể nhận đầu vào của người dùng đến khi trình duyệt thực sự phản hồi

Time to Interactive (TTI): thời gian từ lúc bắt đầu tải cho đến khi người dùng có thể tương tác

Total Blocking Time (TBT): tổng thời gian giữa FCP và TTI

Cumulative Layout Shift (CLS): chỉ số về mức độ thay đổi bố cục