Cumulative Layout Shift Là Gì? Toàn Tập Về Chỉ Số Dịch Chuyển Bố Cục Và Cách Tối Ưu Core Web Vitals

Cumulative Layout Shift (CLS) là một trong ba chỉ số cốt lõi của Core Web Vitals do Google công bố, đo lường mức độ ổn định của bố cục trang web trong quá trình tải. Khi bạn đọc một bài báo hoặc chuẩn bị nhấp vào một nút, nội dung bất ngờ nhảy sang vị trí khác khiến bạn click nhầm – đó chính là dấu hiệu của CLS cao. Chỉ số này ảnh hưởng trực tiếp đến trải nghiệm người dùng và xếp hạng tìm kiếm. Bài viết này sẽ giải thích chi tiết cumulative layout shift là gì, cách nó được tính toán, nguyên nhân gây ra và chiến lược tối ưu để đạt điểm số dưới 0.1 theo khuyến nghị của Google.

Cumulative Layout Shift Là Gì? Định Nghĩa Chi Tiết

Cumulative layout shift là thước đo định lượng sự dịch chuyển không mong muốn của các phần tử trên trang web khi người dùng đang tương tác. Không giống như Largest Contentful Paint (LCP) đo tốc độ tải hay First Input Delay (FID) đo độ trễ tương tác, CLS tập trung vào sự ổn định thị giác. Một trang có CLS thấp có nghĩa là người dùng có thể đọc và tương tác mà không bị gián đoạn bởi các phần tử di chuyển đột ngột.

Google định nghĩa CLS là tổng điểm của tất cả các lần dịch chuyển bố cục không mong muốn xảy ra trong suốt vòng đời của trang. Mỗi lần dịch chuyển được tính bằng tích của hai yếu tố: phân số tác động (impact fraction) và phân số khoảng cách (distance fraction). Công thức cụ thể: CLS score = impact fraction × distance fraction.

Cách Tính Điểm Cumulative Layout Shift

Phân số tác động đo lường phần trăm diện tích viewport bị ảnh hưởng bởi sự dịch chuyển. Ví dụ, nếu một banner quảng cáo cao 200px bất ngờ xuất hiện ở đầu trang và đẩy toàn bộ nội dung xuống 300px, thì impact fraction là tỷ lệ giữa diện tích banner so với viewport. Phân số khoảng cách đo lường khoảng cách di chuyển của phần tử so với vị trí ban đầu, tính theo đơn vị viewport.

Một điểm CLS lý tưởng là dưới 0.1. Từ 0.1 đến 0.25 được coi là cần cải thiện, và trên 0.25 là kém. Google sử dụng phần trăm thứ 75 của tất cả các lượt truy cập vào trang để xác định điểm tổng thể. Điều này có nghĩa là ngay cả khi trang của bạn tải ổn định trong hầu hết các trường hợp, một vài phiên bị lỗi nặng cũng có thể kéo điểm xuống.

Nguyên Nhân Gây Ra Cumulative Layout Shift Cao

Có nhiều yếu tố có thể làm tăng điểm CLS trên website. Khi ảnh tải xong, bố cục đột ngột mở rộng, đẩy các phần tử khác xuống dưới.

• Quảng cáo và iframe được chèn động: Các mạng quảng cáo thường tải nội dung không đồng bộ và không dành sẵn không gian. Khi quảng cáo xuất hiện, nó chiếm diện tích và làm dịch chuyển nội dung.
• Web font hiển thị muộn: Khi font chữ tùy chỉnh tải chậm, trình duyệt sẽ hiển thị font dự phòng trước. Khi font chính tải xong, văn bản có thể thay đổi kích thước, dẫn đến dịch chuyển.
• Nội dung được chèn sau khi trang đã hiển thị: Các widget bên thứ ba, mã nhúng mạng xã hội hoặc các phần tử JavaScript động thường chèn vào DOM sau khi layout đã được vẽ.
• Hoạt ảnh và hiệu ứng CSS không được kiểm soát: Các hiệu ứng như slide-in, fade-in có thể làm thay đổi kích thước hoặc vị trí của phần tử nếu không được khóa layout.

Ví Dụ Thực Tế Về Ảnh Hưởng Của CLS

Giả sử bạn đang đọc một bài viết dài trên điện thoại di động. Một banner quảng cáo ở cuối bài bất ngờ mở rộng, đẩy nút “Đọc thêm” xuống dưới. Bạn định nhấp vào nút đó nhưng lại vô tình nhấp vào banner quảng cáo. Đây không chỉ là trải nghiệm tồi tệ mà còn làm tăng tỷ lệ thoát và giảm chuyển đổi.

Một nghiên cứu của Google cho thấy các trang có CLS cao (trên 0.25) thường có tỷ lệ thoát cao hơn 32% so với các trang có CLS dưới 0.1. Đối với các trang thương mại điện tử, mỗi 0.1 điểm CLS tăng thêm có thể làm giảm 10% doanh thu do người dùng click nhầm hoặc bỏ qua sản phẩm.

Cách Kiểm Tra Cumulative Layout Shift Trên Website

Có nhiều công cụ miễn phí giúp bạn đo lường và phân tích CLS. PageSpeed Insights Lab + Field data Kết hợp dữ liệu từ Lighthouse và dữ liệu thực tế từ Chrome User Experience Report. CrUX (Chrome User Experience Report) Field data Dữ liệu tổng hợp từ hàng triệu người dùng Chrome thực tế.

Khi sử dụng Lighthouse, tab “Diagnostics” sẽ liệt kê từng phần tử gây ra dịch chuyển, kèm theo ảnh chụp màn hình và thời điểm xảy ra.

Cumulative layout shift đo lường mức độ ổn định của bố cục trang web. Nó quan trọng vì ảnh hưởng trực tiếp đến trải nghiệm người dùng, tỷ lệ chuyển đổi và thứ hạng SEO.

Làm thế nào để giảm điểm CLS xuống dưới 0.1?

Bạn cần khai báo kích thước cho tất cả hình ảnh và video, dành sẵn không gian cho quảng cáo, tối ưu web font, tránh chèn nội dung động sau khi trang đã tải, và sử dụng transform thay vì các thuộc tính gây reflow.

CLS có ảnh hưởng đến xếp hạng Google không?

Có. Core Web Vitals là tín hiệu xếp hạng chính thức. Tuy nhiên, nó chỉ là một trong nhiều yếu tố. Nội dung chất lượng và backlink vẫn quan trọng hơn.

Làm sao để kiểm tra CLS trên website của tôi?

Sử dụng Lighthouse trong Chrome DevTools, PageSpeed Insights, Google Search Console (báo cáo Core Web Vitals) hoặc CrUX API.

Có cần phải đạt CLS bằng 0 không?

Không. Google khuyến nghị dưới 0.1 là tốt. Một số dịch chuyển nhỏ do tương tác người dùng (ví dụ: mở menu) được coi là chấp nhận được.

Kết Luận

Cumulative layout shift là một chỉ số không thể bỏ qua trong chiến lược tối ưu hóa trải nghiệm người dùng và SEO. Việc hiểu rõ cumulative layout shift là gì, cách nó hoạt động và các phương pháp tối ưu sẽ giúp website của bạn đạt điểm cao hơn trong mắt Google và người dùng. Bắt đầu bằng cách kiểm tra điểm CLS hiện tại bằng PageSpeed Insights, xác định các phần tử gây dịch chuyển, và áp dụng các kỹ thuật như khai báo kích thước, dành sẵn không gian cho quảng cáo, tối ưu font chữ.

Việc tối ưu CLS không chỉ là một nhiệm vụ kỹ thuật mà còn là đầu tư chiến lược vào sự hài lòng của khách hàng. Một trang web ổn định, không giật lag sẽ giữ chân người dùng lâu hơn, tăng tỷ lệ quay lại và cuối cùng là thúc đẩy doanh thu. Hãy bắt đầu ngay hôm nay để không bỏ lỡ cơ hội cạnh tranh.