CLS và cách chặn xê dịch bố cục bất ngờ trên web (tổng quan nguyên nhân)

Bạn đang đọc một đoạn văn, đưa tay định bấm nút, thì cả khối nội dung trượt xuống vì một tấm ảnh hay banner quảng cáo vừa tải xong. Cú nhảy đó chính là thứ mà chỉ số này đo lại, và nó khiến trải nghiệm đọc trở nên khó chịu hơn bất kỳ con số tốc độ nào.

CLS đo cái gì, tính ra sao

Khác với hai chỉ số còn lại trong bộ Core Web Vitals (bộ ba chỉ số sức khoẻ web của Google) là LCP đo tốc độ hiện nội dung và INP đo độ mượt khi tương tác, CLS đo độ ổn định thị giác — mức xê dịch bất ngờ của bố cục.

Điểm của mỗi cú nhảy được tính bằng công thức:

layout shift score = impact fraction × distance fraction

Trong đó impact fraction (phần ảnh hưởng) là tỷ lệ diện tích màn hình bị tác động, còn distance fraction (phần khoảng cách) là quãng đường xa nhất mà một phần tử dịch chuyển so với chiều lớn nhất của màn hình. Google không cộng dồn vô hạn mọi cú nhảy: chỉ số lấy cụm nhảy nặng nhất trong một session window (cửa sổ phiên — nhóm các cú nhảy cách nhau dưới 1 giây, tối đa kéo dài 5 giây).

Lưu ý quan trọng: chỉ những cú nhảy bất ngờ mới bị tính. Nếu người dùng vừa bấm nút “Xem thêm” rồi nội dung mở ra, trình duyệt xem đó là dịch chuyển có chủ đích trong vòng 500ms sau tương tác và không phạt.

Ngưỡng “tốt” cần đạt

Con số được đo ở phân vị 75 (p75) trên cả thiết bị di động lẫn máy tính, từ dữ liệu người dùng thật. Nghĩa là 75% lượt tải phải đạt dưới 0,1 thì trang mới qua ngưỡng — không phải lấy trung bình.

Những nguyên nhân hay gặp nhất

1. Ảnh và video không khai báo kích thước

Đây là thủ phạm số một. Theo Web Almanac 2025, 62% trang di động có ít nhất một ảnh thiếu kích thước. Khi thẻ <img> không có width/height, trình duyệt không biết chừa chỗ bao nhiêu, nên khi ảnh tải xong nó đẩy mọi thứ bên dưới trượt đi.

<!-- Đặt đúng tỷ lệ thật của ảnh -->
<img src="anh.webp" width="1200" height="675" alt="...">

Trình duyệt hiện đại tự suy ra aspect-ratio (tỷ lệ khung) từ hai thuộc tính này và chừa sẵn ô trống. Với ảnh responsive co giãn theo màn hình, kỹ thuật xử lý sâu hơn được trình bày trong bài dùng aspect-ratio CSS để chống layout shift.

2. Font web đổi kích thước khi tải xong (FOUT)

Trình duyệt vẽ tạm bằng font dự phòng, rồi khi font chính tải xong và có chiều cao chữ khác đi, cả đoạn văn co lại hoặc giãn ra. Cách xử lý gồm khai báo font-display: swap đúng cách và chỉnh font dự phòng khớp font chính bằng size-adjust, ascent-override. Chi tiết ở bài font-display swap và cách tránh nhảy chữ khi tải font.

3. Quảng cáo, iframe, widget chèn động

Banner ad, khung nhúng YouTube, ô bình luận, widget mạng xã hội thường tải bất đồng bộ và tự quyết chiều cao của mình. Cách chặn là đặt sẵn một ô chứa có kích thước tối thiểu cố định bằng CSS, để dù nội dung chưa về thì chỗ vẫn được giữ:

.ad-slot {
  min-height: 280px; /* đúng cỡ banner sẽ chèn */
  display: block;
}

Đừng để khoảng chừa trống bằng 0 rồi chờ quảng cáo “tự đẩy” nội dung — đó chính là cú nhảy bị phạt.

4. Nội dung chèn vào đầu trang sau khi đã tải

Thanh thông báo cookie, banner khuyến mãi, hoặc dữ liệu lấy từ API rồi chèn lên trên cùng sẽ đẩy toàn bộ phần thân xuống. Nếu buộc phải có, hãy đặt nó ở vị trí cố định (overlay) hoặc dành sẵn không gian thay vì chèn vào luồng tài liệu.

5. Hiệu ứng và animation sai cách

Animation làm thay đổi các thuộc tính bố cục như top, height, margin sẽ kích hoạt reflow và bị tính là layout shift. Thay vào đó hãy dùng transform: translate() và scale() — chúng chạy trên lớp compositor, không đụng tới bố cục.

Checklist sửa CLS nhanh

1. Khai báo width và height (hoặc aspect-ratio) cho mọi ảnh, video, iframe.
2. Chừa sẵn ô có min-height cho mọi vị trí quảng cáo và widget chèn động.
3. Preload font chính, chỉnh font dự phòng khớp metric để tránh nhảy chữ.
4. Không chèn nội dung lên phía trên nội dung người dùng đang xem.
5. Chỉ dùng transform cho chuyển động, tránh đổi thuộc tính bố cục.
6. Đo lại bằng PageSpeed Insights và panel Performance của Chrome DevTools để tìm chính xác phần tử nào gây nhảy.

Đo và soi đúng thủ phạm

Điểm CLS trên Lighthouse là số liệu phòng thí nghiệm — nó tải trang một lần, không cuộn, nên thường thấp hơn thực tế. Số liệu đáng tin là dữ liệu người dùng thật từ CrUX hiển thị trong PageSpeed Insights. Để biết phần tử nào nhảy, mở Chrome DevTools tab Performance, ghi lại quá trình tải, rồi tìm các mục đánh dấu “Layout Shift” — DevTools tô đỏ đúng vùng dịch chuyển.

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

CLS bao nhiêu là đạt?

Từ 0,1 trở xuống là tốt, đo ở phân vị 75 người dùng thật. Trên 0,25 bị xếp loại kém.

Vì sao CLS đo thực tế cao hơn trên Lighthouse?

Lighthouse đo trong môi trường thí nghiệm, tải một lần và không cuộn. Người dùng thật cuộn trang, mạng chậm hơn, ảnh và quảng cáo về trễ nên nhảy nhiều hơn. Hãy tin dữ liệu CrUX trong PageSpeed Insights.

Cuộn trang có làm tăng CLS không?

Không. Cú dịch do người dùng cuộn không bị tính. Chỉ những thay đổi bố cục bất ngờ mà người dùng không chủ động gây ra mới bị phạt.

Nếu site của bạn liên tục rớt ngưỡng CLS dù đã sửa ảnh và font, thường là do tầng quảng cáo hoặc nội dung động khó khoanh vùng — đây là lúc một lượt audit hiệu năng web chỉ ra đúng phần tử thủ phạm sẽ tiết kiệm rất nhiều thời gian dò tay.