Chỉ số Cumulative Layout Shift (CLS) là gì? [phần một]

Chú thích: vì bài dài & nhiều thông tin kỹ thuật nên tôi chia làm hai phần cho bạn tiện theo dõi & tôi cũng dễ biên tập hơn. So với các chỉ số khác của PageSpeed Insights, chỉ số này ít mang yếu tố tốc độ nhất (nếu không muốn nói là không có!). Nhưng mức độ quan trọng của nó thì không hề nhỏ, bởi nó ảnh hưởng rất lớn đến trải nghiệm người dùng, và suy cho cùng, tốc độ cao mà các trải nghiệm khác thì tệ thì tổng lại có khi lại tệ hơn trước. Chỉ số này là một cảnh báo quan trọng với người tối ưu tốc độ, hiệu suất website. Nó nói với chúng ta rằng cần phải biết cân đối, và đặt trọng tâm vào người dùng.

OK, giờ chúng ta vào bài thôi.


Chỉ số Cumulative Layout Shift (CLS) là một thông tin quan trọng, lấy người dùng làm trung tâm để đo độ ổn định về mặt hiển thị (visual stability), vì nó giúp định lượng tần suất người dùng phải trải qua sự thay đổi bố cục bất ngờ (không lường trước & sẽ gây khó chịu) — CLS (chỉ số thay đổi bố cục tích lũy) thấp giúp đảm bảo rằng trang của bạn thân thiện hơn.

Bạn đã bao giờ gặp chuyện thế này chưa: đang đọc một bài báo trên mạng thì đột nhiên có cái gì đó thay đổi trên trang? Nếu không có cảnh báo nào, văn bản sẽ di chuyển và bạn đánh mất vị trí đọc / xem của mình. Hoặc thậm chí tệ hơn: bạn chuẩn bị nhấn vào một liên kết hoặc một nút nào đấy, nhưng ngay trước thời điểm ngón tay của bạn chạm vào màn hình thì — BÙM — liên kết di chuyển và cuối cùng bạn nhấp vào một thứ hoàn toàn khác!

Thông thường, những trải nghiệm kiểu này chỉ gây khó chịu, nhưng trong một số trường hợp khác, chúng có thể gây ra thiệt hại thực sự đáng kể. Xem video về một ví dụ như vậy:

Chuyển động không mong muốn của nội dung trang web thường xảy ra do tài nguyên được tải không đồng bộ (loaded asynchronously) hoặc các phần tử DOM được thêm động (vào trang) ở phía trên nội dung hiện có. Thủ phạm có thể là hình ảnh hoặc video có kích thước không xác định, phông chữ hiển thị lớn hơn hoặc nhỏ hơn so với dự phòng của nó, hoặc quảng cáo, tiện ích của bên thứ ba tự động thay đổi kích thước.

Cái làm cho vấn đề này trở nên khó khăn hơn là chức năng của website trong quá trình phát triển thường khác tương đối nhiều với cách người dùng trải nghiệm nó trên thực tế. Nội dung được cá nhân hóa hoặc của bên thứ ba thường không hoạt động giống trong quá trình phát triển như khi được tạo ra, hình ảnh thử nghiệm thường đã có trong bộ nhớ cache trình duyệt của nhà phát triển và các lệnh gọi API chạy cục bộ thường nhanh đến mức độ trễ không đáng kể chút nào.

Số liệu Cumulative Layout Shift (CLS) giúp bạn giải quyết vấn đề này bằng cách đo lường mức độ trải nghiệm tệ này xảy ra đối với người dùng thực.


1. CLS là gì? 

CLS đo lường tổng điểm của tất cả các điểm thay đổi bố cục (layout shift scores) riêng lẻ cho mọi thay đổi bố cục không mong muốn (unexpected layout shift) xảy ra trong toàn bộ thời gian tồn tại của trang.

Sự thay đổi bố cục xảy ra bất cứ khi nào một phần tử hiển thị thay đổi vị trí của nó từ một khung được hiển thị sang khung kế tiếp. (Xem thông tin chi tiết bên dưới để biết cách tính điểm thay đổi bố cục riêng lẻ).


Điểm CLS tốt là gì?

Để cung cấp trải nghiệm người dùng tốt, các trang web nên cố gắng có điểm CLS từ 0,1 trở xuống. Nhằm đảm bảo bạn đạt được mục tiêu này cho hầu hết người dùng của mình, ngưỡng tốt để đo lường là phân vị tải trang thứ 75 , được phân đoạn trên các thiết bị di động và máy tính để bàn.

Để tìm hiểu thêm về nghiên cứu và phương pháp đằng sau đề xuất này, hãy tìm đọc bài viết: Xác định ngưỡng chỉ số Core Web Vitals.


2. Bố cục thay đổi được tính toán như thế nào?

Thay đổi bố cục được xác định bởi API đo lường mức độ ổn định của bố cục, công cụ này sẽ báo cáo layout-shift cho các mục nhập bất kỳ lúc nào một phần tử hiển thị trong viewport (khung nhìn) thay đổi vị trí bắt đầu của nó (ví dụ: vị trí trên cùng và bên trái của nó trong writing mode mặc định) giữa hai khung. Các phần tử như vậy được coi là phần tử không ổn định (unstable elements).

Lưu ý rằng thay đổi bố cục chỉ xảy ra khi các phần tử hiện có thay đổi vị trí bắt đầu (start position) của chúng. Nếu một phần tử mới được thêm vào DOM hoặc một phần tử hiện có thay đổi kích thước thì phần tử đó không được tính là thay đổi bố cục — miễn là thay đổi đó không khiến các phần tử đã hiển thị khác thay đổi vị trí bắt đầu của chúng.


A. Điểm số dịch chuyển bố cục 

Để tính toán điểm số dịch chuyển bố cục (layout shift score), trình duyệt xem xét kích thước khung nhìn (viewport) và sự di chuyển của các phần tử không ổn định trong viewport giữa hai khung được kết xuất. Điểm số dịch chuyển bố cục là kết quả của hai thước đo của chuyển động đó: phần bị tác động và phần khoảng cách (cả hai đều được định nghĩa bên dưới).

layout shift score = impact fraction (diện tích phần tác động) * distance fraction (phần khoảng cách dịch chuyển)

B. Chỉ số tác động (impact fraction)

Chỉ số tác động đo lường mức độ tác động của các yếu tố không ổn định đến diện tích khu vực khung nhìn giữa hai frame.

Sự kết hợp của các vùng hiển thị của tất cả các phần tử không ổn định cho khung trước  khung hiện tại — như một phần của tổng diện tích của khung nhìn — là chỉ số tác động đối với khung hiện tại (current frame).

chỉ số tác động

Ví dụ trong hình trên, có một phần tử chiếm một nửa khung nhìn trong một khung hình. Sau đó, trong khung tiếp theo, phần tử dịch chuyển xuống 25% chiều cao khung nhìn. Hình chữ nhật có chấm chấm màu đỏ bao quanh cho biết sự kết hợp của vùng nhìn thấy của phần tử trong cả hai khung, trong trường hợp này là 75% diện tích của tổng khung nhìn, do đó, phần ảnh hưởng của nó là 0.75.


C. Chỉ số khoảng cách (distance fraction)

Phần khác của phương trình điểm dịch chuyển bố cục đo khoảng cách mà các phần tử không ổn định đã di chuyển, tương quan với viewport. Phần khoảng cách là khoảng cách lớn nhất mà bất kỳ phần tử không ổn định nào đã di chuyển trong khung (theo chiều ngang hoặc chiều dọc) chia cho kích thước lớn nhất của khung nhìn (chiều rộng hoặc chiều cao, tùy theo giá trị nào lớn hơn).

chỉ số dịch chuyển

Trong ví dụ trên, kích thước khung nhìn lớn nhất là chiều cao và phần tử không ổn định đã di chuyển 25% chiều cao khung nhìn, điều này làm cho chỉ số khoảng cách là 0,25.

Vì vậy, trong ví dụ này, chỉ số tác động là 0.75chỉ số khoảng cách là 0.25, do đó điểm dịch chuyển bố cục là 0.75 * 0.25 = 0.1875.

Ban đầu, điểm dịch chuyển bố cục chỉ được tính toán dựa trên chỉ số tác động. Việc bổ sung chỉ số khoảng cách được đưa ra để tránh các trường hợp phạt quá mức trong trường hợp các phần tử lớn chỉ thay đổi một lượng nhỏ (và do vậy cũng chỉ có ảnh hưởng nhỏ đến trải nghiệm người dùng).


Ví dụ tiếp theo minh họa cách thêm nội dung vào một phần tử hiện có ảnh hưởng đến điểm thay đổi bố cục như thế nào:

Một ví dụ khác về Cumulative Layout Shift

Nút bấm “Click Me!” được nối vào cuối hộp màu xám với văn bản màu đen, sẽ đẩy hộp màu xanh lục có văn bản màu trắng xuống (và một phần ở đáy ra khỏi viewport).

Trong ví dụ này, hộp màu xám thay đổi kích thước, nhưng vị trí bắt đầu của nó không thay đổi nên nó không phải là một phần tử không ổn định.

Nút “Click Me!” trước đó không có trong DOM, vì vậy vị trí bắt đầu của nó cũng không thay đổi (tức là nó cũng không phải là một phần từ không ổn định).

Tuy nhiên, vị trí bắt đầu của ô màu xanh lục đã thay đổi, nhưng vì nó đã được di chuyển một phần ra khỏi khung nhìn, nên vùng vô hình không được xem xét khi tính toán chỉ số tác động (impact fraction). Sự kết hợp của các vùng nhìn thấy cho hộp màu xanh lá cây trong cả hai khung (được minh họa bằng hình chữ nhật có chấm màu đỏ) giống với diện tích của hộp màu xanh lá cây trong khung đầu tiên — 50% của viewport. Chỉ số tác động là 0.5.

Chỉ số khoảng cách (distance fraction) được minh họa bằng mũi tên màu tím. Hộp màu xanh lá cây đã di chuyển xuống khoảng 14% của khung nhìn, do đó chỉ số khoảng cách là 0.14 .

Điểm dịch chuyển bố cục này là: 0.5 x 0.14 = 0.07.


Ví dụ cuối cùng dưới đây minh họa trường hợp có nhiều yếu tố không ổn định cùng xuất hiện trên trang:

Ví dụ về việc có nhiều phần tử làm thay đổi bố cục

Trong khung đầu tiên ở trên, có bốn kết quả của một yêu cầu API cho thông tin về động vật, được sắp xếp theo thứ tự bảng chữ cái. Trong khung thứ hai, nhiều kết quả hơn được thêm vào danh sách đã sắp xếp từ trước đó.

Mục đầu tiên trong danh sách (“Cat”) không thay đổi vị trí bắt đầu của nó giữa các khung, vì vậy nó là thành phần ổn định. Tương tự, các mục mới được thêm vào danh sách trước đây không có trong DOM, vì vậy vị trí bắt đầu của chúng cũng không thay đổi. Nhưng các thông tin có nhãn “Dog”, “Horse” và “Zebra” đều thay đổi vị trí ban đầu của chúng, khiến chúng trở thành các yếu tố không ổn định.

Một lần nữa, các hình chữ nhật có chấm chấm màu đỏ thể hiện sự kết hợp của ba phần tử không ổn định này trước và sau, trong trường hợp này là khoảng 38% diện tích của khung nhìn (chỉ số tác động chiếm 0.38 viewport).

Ba mũi tên thể hiện khoảng cách mà các phần tử không ổn định đã di chuyển từ vị trí ban đầu của chúng theo thứ tự. Phần tử “Zebra”, được biểu thị bằng mũi tên màu xanh lam, đã di chuyển nhiều nhất, khoảng 30% chiều cao khung nhìn. Điều đó làm cho giá trị dịch chuyển distance fraction trong ví dụ này 0.3 (chỉ số dịch chuyển cao nhất của phần từ được lấy).

Cuối cùng điểm dịch chuyển bố cục là: 0.38 x 0.3 = 0.1172.

Mẹo – làm chậm quá trình tải trang để đánh giá CLS bằng mắt dễ hơn:


PS của Speed Family: như vậy để tối ưu chỉ số Cumulative Layout Shift chúng ta phải giảm thiểu diện tích của phần dịch chuyển, độ dài của phần dịch chuyển cũng như số lượng các phần tử dịch chuyển. Lý thuyết là như vậy, chúng ta còn chặng đường dài cho việc áp dụng và thực hành.


Còn tiếp phần 2, mời bạn đón đọc.

Chuỗi bài viết về các chỉ số tăng tốc:


(Dịch từ bài viết Cumulative Layout Shift (CLS) của hai tác giả Philip Walton & Milica Mihajlija trên trang web[.]dev)

Leave a Comment