Cumulative Layout Shift: Nó là gì & Cách cải thiện điểm số của bạn

Cumulative Layout Shift (CLS) là gì?

Cumulative Layout Shift (CLS) đo lường sự ổn định hình ảnh của nội dung trên trang web khi người dùng xem. Chỉ số này tính đến sự dịch chuyển bất ngờ của các phần tử trong khung nhìn khi trang tải.

Những dịch chuyển bố cục như vậy có thể khiến người dùng khó chịu vì xảy ra mà không có cảnh báo, gây trải nghiệm người dùng kém.

Ví dụ, bạn đang muốn mua một đôi giày mới, nên bạn truy cập vào trang sản phẩm của đôi giày bạn thích. Trang bắt đầu tải và bạn biết mình muốn mua nên chuẩn bị nhấn nút mua.

Nhưng rồi một quảng cáo xuất hiện ở đầu màn hình, khiến nút mua bị đẩy xuống. Ngay lúc bạn chuẩn bị nhấn, bạn lại vô tình nhấn vào quảng cáo.

Đó chính là một dịch chuyển bố cục bất ngờ.

CLS chỉ quan tâm đến các dịch chuyển bố cục bất ngờ xảy ra trên phần hiển thị đầu tiên (above the fold). Những dịch chuyển ngoài khung nhìn sẽ không ảnh hưởng đến điểm CLS của bạn.

Cumulative Layout Shift là một trong những Core Web Vitals (CWVs) mà Google dùng để đo trải nghiệm người dùng trên website của bạn.

Ngoài CLS, còn có hai Core Web Vitals khác:

• Largest Contentful Paint (LCP)đo tốc độ tải cảm nhận của trang
• Interaction to Next Paint (INP)đánh giá độ phản hồi của trang

Core Web Vitals là các tín hiệu trải nghiệm trang có thể ảnh hưởng đến thứ hạng. Vì vậy, tuân theo khuyến nghị của Google để có điểm CWV tốt sẽ giúp cải thiện hiệu suất trên kết quả tìm kiếm.

Riêng với CLS, bạn nên hạn chế số lượng và mức độ dịch chuyển của các phần tử trên trang.

Lưu ý

CLS đo lường các dịch chuyển bố cục bất ngờ Nếu người dùng nhấn vào menu và nó mở rộng (trong vòng 500 milliseconds), đó là dịch chuyển bố cục có dự đoán vì phản hồi trực tiếp hành động người dùng. Điều này không ảnh hưởng đến điểm CLS.

Cách đo Cumulative Layout Shift

Có vài cách để đo điểm Cumulative Layout Shift của bạn:

Google’s PageSpeed Insights

PageSpeed Insights phân tích CLS của website bạn trên cả mobile và desktop.

Để xem điểm, bạn chỉ cần nhập URL website (hoặc trang cụ thể muốn kiểm tra) vào công cụ và nhấn nút “Analyze”.

Bạn sẽ nhận được báo cáo về hiệu suất CLS và các Core Web Vitals khác.

Kéo xuống phần “Diagnostics” và chọn mục “CLS” để lọc và xem các đề xuất cụ thể liên quan đến Cumulative Layout Shift.

Lưu ý rằng PageSpeed Insights chỉ có thể phân tích một trang web mỗi lần.

Bạn cũng có thể sử dụng Lighthouse trong DevTools của Chrome. Hãy nhớ rằng dữ liệu này có thể cho kết quả hơi khác một chút. Nhưng bạn có thể truy cập nó mà không cần rời khỏi trang bạn đang muốn phân tích.

Mẹo chuyên nghiệp

Bạn nên thử nghiệm trong cửa sổ ẩn danh để tránh lịch sử trang và các tiện ích mở rộng ảnh hưởng đến hiệu suất.

Chỉ cần nhấp chuột phải bất kỳ đâu trên trang và chọn “Inspect” (hoặc dùng Ctrl+Shift+I trên Windows, hoặc Cmd+Option+I trên Mac).

Trong cửa sổ hiện ra, nhấn vào tab “Lighthouse”. Thay đổi các cài đặt phù hợp rồi nhấn “Analyze page load.”

Bạn sẽ thấy một bộ kết quả tương tự như trong PageSpeed Insights.

Giống như công cụ PageSpeed Insights, bạn chỉ có thể dùng Lighthouse để phân tích một trang mỗi lần.

Công cụ Site Audit của Semrush

Semrush Site Audit cho phép bạn kiểm tra điểm Cumulative Layout Shift cho nhiều trang web cùng lúc.

Chỉ cần nhập tên miền của bạn và nhấn nút “Start Audit”.

Sau đó, cấu hình cài đặt của công cụ theo ý bạn. Rồi nhấn “Start Site Audit” để tạo báo cáo.

Trong widget “Thematic Reports”, nhấn “View details” dưới mục “Core Web Vitals.”

Kéo xuống để xem tổng quan điểm Cumulative Layout Shift của bạn.

Lưu ý

Site Audit hiển thị Total Blocking Time (TBT) thay vì Interaction to Next Paint (INP). Nhóm Chrome của Google cho biết TBT có sự tương quan tốt với INP như một chỉ số trong phòng thí nghiệm.

Nhấn vào một vấn đề trong khu vực “Top Improvements” để xem thêm thông tin và đề xuất. Công cụ cũng hiển thị số trang bị ảnh hưởng bởi mỗi vấn đề.

Kéo xuống bảng “Analyzed Pages” để xem những trang nào Site Audit đã phân tích cho Core Web Vitals của bạn. Nhấn “Edit list” và thêm tối đa 10 trang bạn muốn phân tích.

Các thay đổi sẽ có hiệu lực khi bạn chạy lại audit.

Điểm CLS tốt là bao nhiêu?

Điểm CLS tốt là 0.1 hoặc thấp hơn. Điều này có nghĩa bố cục của bạn ổn định khi tải. Vì vậy, khách truy cập có thể dễ dàng đọc, nhấn và tương tác với nội dung mà không bị gián đoạn bởi các thay đổi bất ngờ.

Dưới đây là thang đo hiệu suất:

Điểm Cumulative Layout Shift của bạn đo lường mức độ thay đổi bố cục lớn nhất do các thay đổi bất ngờ khi trang tải. Và điểm layout shift gồm hai thành phần:

1. Impact fraction
2. Distance fraction

Trong đó:

Layout shift score = impact fraction x distance fraction

Điều này có nghĩa là các phần tử càng lớn và di chuyển càng xa thì điểm CLS của bạn càng cao. Tương tự, nhiều lần chuyển đổi bố cục với bất kỳ kích thước nào xảy ra liên tiếp sẽ làm tăng điểm CLS.

Các vấn đề phổ biến gây điểm CLS thấp

Hình ảnh không có kích thước

Khi bạn thêm hình ảnh vào trang web mà không chỉ định chiều rộng và chiều cao, trình duyệt không biết phải dành bao nhiêu không gian cho đến khi hình ảnh tải xong. Điều này có thể khiến các phần tử khác trên trang bị dịch chuyển bất ngờ.

Hãy tưởng tượng bạn nhấp vào một liên kết bài blog. Tiêu đề và văn bản tải lên, và ngay khi bạn bắt đầu đọc, toàn bộ văn bản bị đẩy xuống vì một hình ảnh lớn tải phía dưới tiêu đề nhưng trên phần nội dung. Đây là một chuyển đổi bố cục bất ngờ do người tạo không chỉ định kích thước hình ảnh.

Quảng cáo, nhúng và iFrames không có kích thước

Quảng cáo, nhúng và iframe không có kích thước cố định cũng có thể gây ra chuyển đổi bố cục. Những phần tử này có thể đẩy nội dung xung quanh khi tải, dẫn đến trải nghiệm người dùng kém.

Điều này đặc biệt phổ biến với quảng cáo bên thứ ba vì bạn có thể không kiểm soát được kích thước quảng cáo mà mạng lưới chèn vào nội dung của bạn.

Nội dung được chèn động

Khi bạn thêm nội dung động (như banner bài viết liên quan hoặc widget form) vào trang mà không dựa vào tương tác của người dùng trước, bạn có thể gây ra các chuyển đổi bố cục bất ngờ.

Nội dung được thêm động có thể bao gồm:

• Hình ảnh hoặc video tải lên theo phản hồi hành động của người dùng
• Banner xuất hiện sau một khoảng thời gian nhất định trên trang
• Quảng cáo xuất hiện khi bạn cuộn trang
• Feed mạng xã hội tự động tải thêm bài viết
• Phần bình luận mở rộng

Khi nội dung được chèn động xuất hiện theo cách đẩy các phần tử khác trên trang, nó gây ra các chuyển đổi bố cục bất ngờ, ảnh hưởng đến điểm CLS của bạn.

Phông chữ web gây ra FOIT/FOUT

Flash of Invisible Text (FOIT) và Flash of Unstyled Text (FOUT) có thể xảy ra khi phông chữ web tùy chỉnh tải lên. Với FOIT, văn bản sẽ ẩn cho đến khi phông chữ chính tải xong. Nhưng không gian dành cho văn bản dựa trên phông chữ dự phòng (có thể khác kiểu so với phông bạn muốn hiển thị), dẫn đến bố cục có thể bị dịch chuyển.

Trong khi FOUT hiển thị văn bản bằng phông chữ dự phòng rồi chuyển sang phông chữ web khi tải xong. Nếu hai phông khác biệt nhiều về kiểu dáng, nó có thể ảnh hưởng đến bố cục các phần tử khác.

Hoạt ảnh triển khai không đúng cách

Một số thuộc tính CSS có thể gây ra sự thay đổi bố cục không mong muốn nếu bạn không sử dụng đúng cách. Thông thường, đó là các thuộc tính như “box-shadow” và “box-sizing,” cùng với “top” và “left.”

Một số thuộc tính có thể kích hoạt việc bố cục lại trang. Trong khi những thuộc tính khác có thể gây chuyển đổi bố cục ngay cả khi phần tử dịch chuyển nằm trên lớp riêng.

Cách cải thiện điểm Cumulative Layout Shift của bạn

Cải thiện điểm CLS có thể mang lại trải nghiệm tốt hơn cho người dùng. Đồng thời, nó cũng có thể ảnh hưởng đến thứ hạng của bạn. Dưới đây là một vài cách để làm điều này:

Xác định kích thước hình ảnh

Luôn đặt thuộc tính width và height cho hình ảnh, video nhúng và các phương tiện khác. Điều này giúp trình duyệt biết được bao nhiêu không gian cần dành riêng cho các phần tử này.

Việc xác định kích thước này cho phép trình duyệt phân bổ không gian trong bố cục tài liệu trước khi hình ảnh hoặc video chưa tải xong hoàn toàn. Giúp giảm thiểu các thay đổi bố cục bất ngờ.

Giả sử bạn thêm một banner website cho người dùng desktop. Nếu kích thước hình banner là 1200 x 400 pixel, hãy thêm đoạn mã dưới đây vào mã HTML của website bạn:

<img src="banner.jpg" width="1200" height="400" alt="Example banner image.">

Lưu ý

Nếu bạn đang sử dụng một CMS như WordPress hoặc plugin xây dựng trang, nền tảng thường sẽ tự động xác định kích thước hình ảnh cho bạn.

Sử dụng CSS Aspect Ratio Boxes

Áp dụng aspect ratio boxes trong CSS để giữ tỉ lệ chiều rộng và chiều cao cố định bất kể kích thước màn hình. Điều này đảm bảo nội dung của bạn co giãn mà không gây ra thay đổi bố cục. Rất phù hợp cho tối ưu trên mobile.

Aspect ratio boxes hoạt động bằng cách tạo một vùng chứa với tỉ lệ kích thước đã định trước. Điều này ngăn nội dung mở rộng hoặc co lại theo cách làm dịch chuyển các phần tử khác trên trang.

Để tạo một aspect ratio box đáp ứng cho video, bạn có thể dùng đoạn mã như sau:

.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Đoạn mã trên giữ cho video của bạn nằm trong khu vực xác định trên trang web và duy trì hình dạng đúng. Nó sẽ không dịch chuyển hay gây thay đổi bố cục khi trang tải.

Một cách tiếp cận hiện đại hơn (trên các trình duyệt mới hỗ trợ) sẽ là như sau:

.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
.video-container iframe {
width: 100%;
height: 100%;
}

Dành chỗ cho nội dung động

Dự đoán và dành chỗ cho nội dung động như quảng cáo để tránh việc chúng đẩy nội dung khác khi tải. Khi nội dung động tải xong, nó sẽ vừa khít trong không gian đã dành sẵn mà không ảnh hưởng đến bố cục các phần tử khác trên trang.

Ví dụ, nếu bạn định hiển thị quảng cáo ở đầu bài viết, hãy thêm một vùng giữ chỗ có kích thước bằng với quảng cáo đó.

Thêm một phần tử div vào vị trí bạn muốn quảng cáo xuất hiện trong bài viết. Gán ID hoặc class cho div này để bạn có thể tham chiếu trong CSS. Ví dụ như sau:

<div id="ad-placeholder"></div>

Đặt div này ở đầu bài viết, nơi quảng cáo sẽ tải lên.

Sử dụng các thuộc tính CSS để xác định kích thước của placeholder này. Đảm bảo kích thước này khớp với kích thước quảng cáo sẽ tải trong không gian này. Ví dụ, nếu quảng cáo có kích thước 728 x 90 pixel, hãy thêm đoạn mã CSS sau:

#ad-placeholder {
width: 728px;
height: 90px;
background-color: #f0f0f0;
}

Đoạn mã CSS trên sẽ khiến div placeholder chiếm đúng không gian dự kiến dành cho quảng cáo trước khi nó tải. Màu nền là dấu hiệu trực quan để thông báo với người dùng rằng sẽ có nội dung xuất hiện ở đó.

Để làm cho nó responsive, hãy dùng phần trăm cho chiều rộng và giữ tỷ lệ khung hình bằng padding. Thông thường, quảng cáo có kích thước cố định tùy theo thiết bị.

Sử dụng media queries để điều chỉnh kích thước placeholder dựa trên kích thước màn hình. Cách này giúp placeholder của bạn thích ứng với nhiều kích thước màn hình nhưng vẫn sẵn sàng cho một kích thước quảng cáo cụ thể khi xem trên màn hình lớn hơn.

#ad-placeholder {
width: 100%;
height: 0;
padding-bottom: 12.5%;
background-color: #f0f0f0;
}
@media (min-width: 768px) {
#ad-placeholder {
width: 728px;
height: 90px;
padding-bottom: 0;
}
}

Tránh Thêm Nội Dung Mới Lên Trên Nội Dung Đang Có

Thêm nội dung lên trên phần đang hiển thị có thể đẩy toàn bộ xuống dưới, làm gián đoạn trải nghiệm đọc hoặc duyệt web của người dùng.

Thay vì chèn banner quảng cáo động lên đầu trang mà người dùng đang xem, bạn nên thêm nó vào phần mà người dùng chưa cuộn tới. Hoặc, chèn sau một hành động của người dùng, ví dụ như nhấn nút.

Hãy nhớ rằng

Các layout shift xảy ra ngay sau khi người dùng tương tác với trang không nhất thiết là không mong đợi. CLS liên quan đến các layout shift mà người dùng không dự đoán trước.

Xử Lý Font Đúng Cách Để Ngăn Ngừa FOIT/FOUT

Giảm thiểu tác động của web fonts bằng cách preload các font quan trọng và sử dụng thuộc tính font-display trong CSS để kiểm soát cách và thời điểm font hiển thị.

Preload font và đặt font-display là "optional" để giảm khả năng văn bản bị ẩn (FOIT) hoặc thay đổi kiểu đột ngột (FOUT). Thuộc tính “optional” cho phép trình duyệt chọn dùng font dự phòng nếu font chính tải quá lâu.

Để preload các web font quan trọng, dùng đoạn mã như sau:

<link rel="preload" href="https://example.com/fonts/mywebfont.woff2" as="font" type="font/woff2" crossorigin>

Dùng đoạn mã sau trong CSS để đảm bảo văn bản luôn hiển thị trong khi font đang tải và ngăn layout shift:

@font-face {
font-family: 'MyWebFont';
src: url('/mywebfont.woff2') format('woff2');
font-display: optional;
}

Sử dụng thuộc tính Transform trong CSS cho các hiệu ứng animation

Cuối cùng, nếu bạn thấy các animation gây ra điểm CLS thấp, hãy cân nhắc sử dụng thuộc tính CSS “transform”. Thuộc tính này cho phép bạn tạo hiệu ứng động cho các phần tử trên trang mà không gây ra các thay đổi bố cục bất ngờ.

Tương tự như việc thêm kích thước ảnh, đây là điều mà trình tạo website của bạn có thể tự động làm. Nhưng nếu không, bạn có thể dùng “transform: scale()” thay vì thay đổi thuộc tính height và width.

Bạn cũng có thể di chuyển các phần tử bằng “transform: translate()” thay vì thay đổi các thuộc tính top, right, bottom hoặc left.

Cải thiện điểm CLS với Semrush

Bạn muốn có cái nhìn nhanh trước khi bắt đầu? Hãy chạy một kiểm tra SEO miễn phí từ Semrush để có kết quả ngay lập tức.

Để giám sát toàn bộ trang web, công cụ Site Audit sẽ xác định các vấn đề CLS trên website của bạn và cung cấp lời khuyên phù hợp để cải thiện điểm Cumulative Layout Shift. Công cụ cũng làm tương tự với các Core Web Vitals khác.

Ngoài ra, việc chạy các cuộc kiểm tra định kỳ giúp bạn theo dõi sự cải thiện theo thời gian.

Hãy thử Site Audit ngay hôm nay để nhận báo cáo hiệu suất toàn diện với hơn 140 kiểm tra SEO kỹ thuật và on-page.

Bài viết này được cập nhật vào năm 2024. Một số trích đoạn từ bài gốc của Luke Harsel có thể vẫn còn.