Cumulative Layout Shift (CLS) Là Gì? Hướng Dẫn Tối Ưu

Cumulative Layout Shift là gì?

Một layout shift xảy ra khi phần tử đang nhìn thấy trong viewport thay đổi vị trí bắt đầu giữa hai khung hình. Ví dụ, đoạn văn bị đẩy xuống vì ảnh chưa được giữ chỗ, nút mua hàng đổi vị trí khi banner xuất hiện hoặc font mới làm dòng chữ thay đổi kích thước.

CLS không cộng vô hạn mọi dịch chuyển trong suốt phiên như định nghĩa cũ. Các dịch chuyển gần nhau được gom thành session window. Một cụm tiếp tục khi khoảng cách giữa hai dịch chuyển nhỏ hơn một giây và dừng khi tổng thời lượng đạt tối đa năm giây. Điểm CLS là tổng điểm lớn nhất của một session window.

Cách tính theo cụm giúp một trang được sử dụng lâu không bị phạt chỉ vì có nhiều dịch chuyển nhỏ cách xa nhau. Nó vẫn ghi nhận nghiêm túc những đợt bố cục “nhảy” liên tiếp gây khó chịu cho người dùng.

CLS đo điều gì và không đo điều gì?

Core Web Vitals hiện gồm LCP, INP và CLS. Ba chỉ số đo ba khía cạnh khác nhau: tải nội dung, phản hồi tương tác và ổn định thị giác.

Công thức tính một layout shift

Điểm của một dịch chuyển riêng lẻ được tính bằng:

Impact fraction là tỷ lệ viewport bị ảnh hưởng bởi vị trí cũ và mới của các phần tử không ổn định. Distance fraction là quãng đường lớn nhất mà phần tử di chuyển, chia cho chiều lớn nhất của viewport.

Ví dụ, một khối nội dung chiếm vùng tương đương 50% viewport và bị đẩy một khoảng bằng 20% chiều lớn nhất của viewport có điểm dịch chuyển tham khảo là 0,5 × 0,2 = 0,1.

Điểm không có đơn vị. Giá trị càng gần 0, bố cục càng ổn định. Một trang hoàn toàn không có dịch chuyển ngoài dự kiến có CLS bằng 0.

Session window của CLS hoạt động thế nào?

Các layout shift được gom thành từng cụm. Một cụm mới bắt đầu khi có dịch chuyển đầu tiên. Những dịch chuyển tiếp theo được đưa vào cùng cụm nếu cách dịch chuyển trước dưới một giây và toàn cụm chưa vượt năm giây.

Khi debug, nên ưu tiên session window lớn nhất trước. Sửa vài dịch chuyển nhỏ nằm ngoài cụm lớn nhất có thể không làm giá trị CLS cuối cùng thay đổi.

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

Google khuyến nghị đạt CLS không quá 0,1 ở phân vị 75 của lượt truy cập, được đánh giá riêng cho thiết bị di động và máy tính. Không nên lấy một lần chạy Lighthouse tốt để kết luận toàn bộ người dùng đều có trải nghiệm tốt.

Dịch chuyển nào không được tính vào CLS?

Dịch chuyển xảy ra ngay sau một số tương tác của người dùng có thể được xem là dự kiến. Layout Instability API dùng thuộc tính hadRecentInput để nhận biết tương tác loại trừ xảy ra trong khoảng 500 mili giây trước đó.

Cuộn trang không phải tương tác loại trừ theo cách này. Nếu người dùng cuộn xuống và ảnh lazy-load không được giữ chỗ làm nội dung nhảy, dịch chuyển vẫn có thể được tính.

Nếu nội dung phải gọi mạng và xuất hiện sau hơn 500 mili giây, hãy giữ chỗ trước hoặc thiết kế chuyển đổi không đẩy nội dung đang xem.

Tại sao CLS quan trọng với trải nghiệm người dùng?

CLS ảnh hưởng SEO thế nào?

Core Web Vitals là một phần của page experience và phù hợp với những gì hệ thống xếp hạng cốt lõi muốn khuyến khích. Tuy nhiên, Google không nói rằng CLS là yếu tố đơn lẻ có thể tự động đẩy một trang lên hoặc xuống hạng.

Một trang có CLS kém không mặc nhiên bị “đánh tụt không thương tiếc”. Nội dung, mức liên quan, liên kết, khả năng crawl, thiết bị, vị trí người dùng và nhiều hệ thống khác vẫn ảnh hưởng kết quả tìm kiếm.

Technical SEO cần kết hợp Core Web Vitals với indexability, canonical, render, internal link, nội dung và khả năng hoàn thành nhiệm vụ của người dùng.

CLS có làm tăng tỷ lệ chuyển đổi không?

Giao diện ổn định có thể giảm ma sát và bấm nhầm, nhưng không có tỷ lệ tăng conversion chung cho mọi website. Kết quả phụ thuộc sản phẩm, audience, tốc độ, nội dung, giá, thiết bị và chất lượng triển khai.

Bài nguồn từng nêu các dự án sau tối ưu CLS có time-on-site tăng 15–20%, nhưng không kèm phương pháp, mẫu, thời gian hoặc dữ liệu đối chứng. Con số này không nên được dùng làm cam kết.

CLS là chỉ số trải nghiệm, không phải chỉ số doanh thu. SEO Onpage nên kết hợp nội dung, HTML, media và trải nghiệm thay vì chỉ chạy theo điểm kỹ thuật. Chỉ số này cần được kết nối với hành vi và kết quả kinh doanh bằng dữ liệu của chính website.

Nguyên nhân CLS phổ biến nhất

Ảnh không có width và height gây CLS thế nào?

Khi trình duyệt chưa biết tỷ lệ ảnh, nó có thể bố trí trang như thể ảnh chưa chiếm không gian. Khi file tải xong và kích thước được xác định, phần nội dung phía dưới bị đẩy đi.

<img
  src="anh-san-pham.jpg"
  width="800"
  height="600"
  alt="Sản phẩm được đặt trên bàn">

Trình duyệt hiện đại dùng cặp width và height để tính tỷ lệ khung hình trước khi ảnh tải. CSS vẫn có thể làm ảnh responsive:

img {
  max-width: 100%;
  height: auto;
}

Hai thuộc tính HTML không bắt buộc ảnh phải hiển thị đúng 800 × 600 pixel. Chúng cung cấp tỷ lệ nội tại để trình duyệt giữ chỗ.

Responsive Images cần bảo đảm các ứng viên trong srcset dùng cùng tỷ lệ, hoặc khai báo tỷ lệ phù hợp cho từng nguồn art direction.

Lazy loading có gây CLS không?

Lazy loading không tự gây CLS. Lỗi xảy ra khi ảnh hoặc iframe được tải muộn nhưng không có không gian dành sẵn.

Với WordPress hiện đại, native lazy loading và kích thước ảnh thường được thêm tự động. Theme, page builder hoặc plugin tối ưu vẫn có thể ghi đè markup và làm mất tỷ lệ.

Cách giữ chỗ cho quảng cáo

Quảng cáo có thể có nhiều kích thước và được quyết định sau khi phiên đấu giá hoàn tất. Nếu slot ban đầu cao 0 pixel rồi mở rộng, toàn bộ nội dung phía dưới có thể dịch chuyển.

Không nhất thiết phải cố định mọi quảng cáo ở 300 × 250 pixel. Slot responsive cần kích thước linh hoạt nhưng phải có mức không gian ban đầu hợp lý.

Embed và iframe cần tối ưu thế nào?

Video YouTube, bản đồ, social post và widget thường tải sau nội dung HTML. Website nên tạo khung có tỷ lệ trước khi iframe xuất hiện.

.embed-frame {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.embed-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Với embed có chiều cao thay đổi, có thể dùng placeholder, skeleton hoặc min-height dựa trên dữ liệu thực tế. Nếu nội dung bên thứ ba tự thay đổi kích thước trong iframe, trang cha có thể khó truy nguyên đầy đủ bằng Web API.

Banner, cookie notice và nội dung chèn động

Thông báo cookie, khuyến mại, app install hoặc form đăng ký thường được chèn ở đầu trang sau khi nội dung đã hiển thị. Cách này đẩy mọi thứ xuống và tạo session window CLS lớn.

Web font gây layout shift thế nào?

FOUT xảy ra khi fallback font hiển thị trước rồi được thay bằng web font. FOIT xảy ra khi chữ tạm thời không hiện nhưng trình duyệt vẫn bố trí theo font fallback. Nếu metric hai font khác nhau, chiều rộng dòng, chiều cao khối và vị trí phần tử có thể đổi.

font-display: swap giúp chữ xuất hiện sớm nhưng không tự động loại bỏ CLS. Việc swap vẫn có thể làm bố cục dịch chuyển.

Trong workflow XVM, không nên đổi font theme chỉ để “sửa CLS” nếu chưa đo nguyên nhân. Font mặc định có thể đang ổn định hơn một font tải từ bên thứ ba.

Animation nào tạo layout shift?

Animation dùng top, left, kích thước hoặc thuộc tính làm thay đổi layout có thể đẩy các phần tử khác. Animation dùng transform và opacity thường được xử lý ở bước composite và không tạo layout shift theo cách tương tự.

Carousel và slider thường gây CLS ở đâu?

Slider có thể gây CLS khi JavaScript khởi tạo muộn, slide đầu chưa có kích thước, ảnh mỗi slide khác tỷ lệ hoặc dấu chấm điều hướng được chèn sau.

CLS trên mobile và desktop khác nhau thế nào?

Ngưỡng giống nhau nhưng CLS được đánh giá riêng theo thiết bị. Màn hình mobile nhỏ khiến cùng một phần tử có thể chiếm tỷ lệ viewport lớn hơn và tạo impact fraction cao hơn.

Mobile còn thường gặp thanh địa chỉ thay đổi, keyboard, orientation, quảng cáo kích thước khác và mạng chậm. Mobile-first indexing không biến CLS mobile thành một công thức xếp hạng riêng, nhưng phiên bản mobile vẫn cần đầy đủ nội dung và trải nghiệm ổn định. Không nên giả định lỗi chỉ xảy ra trên mobile hoặc mọi dịch chuyển mobile “gấp nhiều lần” desktop.

Cách đo CLS bằng PageSpeed Insights

Google PageSpeed Insights có thể hiển thị hai lớp dữ liệu:

Nếu field CLS cao nhưng Lighthouse thấp, lỗi có thể xảy ra sau tải: cuộn, tương tác, SPA transition, quảng cáo hoặc nội dung động. Nếu hai giá trị gần nhau, lỗi thường xuất hiện trong quá trình tải ban đầu.

PageSpeed Insights có thể dùng dữ liệu URL khi đủ mẫu và chuyển sang dữ liệu origin khi URL không đủ. Cần kiểm tra nhãn dữ liệu trước khi kết luận một trang cụ thể bị lỗi.

Cách đọc CLS trong Google Search Console

Báo cáo Core Web Vitals của Search Console dùng dữ liệu thực từ CrUX và nhóm các URL có trải nghiệm tương tự. Báo cáo không liệt kê chính xác mọi URL có lỗi và không chỉ ra phần tử DOM gây dịch chuyển.

Search Console dùng cửa sổ dữ liệu thực nên không phản ánh thay đổi ngay lập tức. URL không đủ dữ liệu có thể không xuất hiện trong báo cáo.

Cách tìm phần tử gây CLS bằng Chrome DevTools

DevTools hiện có thể nhóm layout shift theo session window. Hãy sửa cụm lớn nhất trước và kiểm tra lại bằng trace mới.

Đo CLS bằng JavaScript và RUM

Dữ liệu RUM giúp phát hiện lỗi chỉ xảy ra với một thiết bị, quảng cáo, tài khoản hoặc hành trình cụ thể. Thư viện web-vitals cung cấp triển khai tham chiếu cho việc đo CLS trong thực tế.

import { onCLS } from 'web-vitals/attribution';

onCLS((metric) => {
  console.log(metric.value);
  console.log(metric.attribution);
});

Khi gửi dữ liệu về hệ thống phân tích, nên lưu:

RUM dựa trên Web API có thể không truy nguyên layout shift bên trong iframe khác origin, trong khi CrUX vẫn phản ánh trải nghiệm mà người dùng nhìn thấy.

Case study Vodafone cần hiểu đúng thế nào?

Vodafone thực hiện A/B test trên landing page và báo cáo phiên bản tối ưu Web Vitals có LCP tốt hơn 31%, đi kèm doanh số tăng 8%, lead-to-visit tăng 15% và cart-to-visit tăng 11%.

Đây là case study chủ yếu về LCP và tổng thể Web Vitals, không phải bằng chứng rằng “giảm CLS tạo doanh số tăng 8%”. Bài nguồn đã gộp LCP và CLS thành một quan hệ nhân quả không đúng với thiết kế case study.

Kết quả của Vodafone cho thấy giá trị của thử nghiệm có kiểm soát. Nó không tạo benchmark để mọi website dự báo doanh số theo cùng tỷ lệ.

Case study Yahoo! JAPAN News cho thấy điều gì?

Yahoo! JAPAN News báo cáo việc cải thiện CLS khoảng 0,2 có tương quan với pageviews mỗi session tăng 15,1%, session duration tăng 13,3% và bounce rate giảm 1,72 điểm phần trăm.

Đây là ví dụ trực tiếp hơn về CLS, nhưng vẫn phải giữ đúng bối cảnh: website tin tức rất lớn, quy trình đo riêng và nhiều thay đổi kỹ thuật có thể cùng diễn ra. Không nên dùng kết quả làm cam kết cho landing page, website dịch vụ hoặc thương mại điện tử tại Việt Nam.

Quy trình audit CLS cho WordPress

WP Rocket và plugin tối ưu có thể hỗ trợ hiệu suất, nhưng CLS thường cần sửa markup, CSS và component chứ không chỉ bật cache.

Các lỗi CLS thường gặp trên WordPress

Checklist sửa CLS theo thứ tự ưu tiên

Những sai lầm khi tối ưu CLS

Góc nhìn thực tế từ Xuyên Việt Media

“CLS không chỉ xuất hiện lúc tải trang. Nhiều website đạt điểm Lighthouse đẹp nhưng người dùng vẫn gặp bố cục nhảy khi cuộn, mở menu hoặc tải quảng cáo. Muốn sửa đúng, cần tìm session window lớn nhất, truy nguyên component gây dịch chuyển và theo dõi dữ liệu thực sau triển khai.”

Anh Thắng Giấu Tên – CEO Xuyên Việt Media

Khi nào doanh nghiệp cần hỗ trợ kỹ thuật?

Website nhỏ có thể tự sửa ảnh thiếu kích thước và banner chèn muộn. Hỗ trợ chuyên môn hữu ích khi CLS đến từ quảng cáo động, SPA, WordPress builder, nhiều plugin, checkout đa domain hoặc chỉ xuất hiện trong dữ liệu thực.

Dịch vụ SEO tổng thể của Xuyên Việt Media kiểm tra CLS trong bối cảnh Core Web Vitals, crawl, index và chuyển đổi. Dịch vụ quản trị website hỗ trợ theo dõi theme, plugin, hình ảnh và các thay đổi có thể gây hồi quy.

Câu hỏi thường gặp về CLS

Kết luận

Cumulative Layout Shift đo cụm dịch chuyển bố cục ngoài dự kiến lớn nhất trong vòng đời trang. Ngưỡng tốt là không quá 0,1 ở phân vị 75 của lượt truy cập, đánh giá riêng trên mobile và desktop.

Để cải thiện CLS, doanh nghiệp cần giữ kích thước cho ảnh, video, quảng cáo và embed; ổn định nội dung động; tối ưu web font; tránh animation làm thay đổi layout; đồng thời đo cả load CLS lẫn post-load CLS. Việc sửa nên bắt đầu từ session window lớn nhất và component dùng chung, không phải chạy theo một điểm Lighthouse riêng lẻ.