Rate this post

Người dùng truy cập trang web rồi bấm vào một nút, nhưng ngay lúc đó nội dung bất ngờ nhảy xuống vì banner hoặc quảng cáo vừa tải xong. Trải nghiệm này gây khó chịu, làm tăng tỷ lệ thoát và ảnh hưởng trực tiếp đến chuyển đổi. Với các website WordPress, landing page hoặc ứng dụng SPA hiện đại, câu hỏi “CLS bao nhiêu là tốt? Cách fix điểm CLS” đang trở thành chủ đề quan trọng vì Google xem đây là một phần của Core Web Vitals. Hiểu đúng cách CLS hoạt động giúp xử lý tận gốc vấn đề thay vì chỉ chạy theo điểm PageSpeed.

Table of Contents

CLS bao nhiêu là tốt? Cách fix điểm CLS là gì?

CLS (Cumulative Layout Shift) là chỉ số đo tổng mức độ dịch chuyển bố cục không mong muốn xảy ra trong suốt vòng đời của một trang web.

Nói đơn giản: khi nội dung trên màn hình tự động nhảy vị trí mà người dùng không chủ động tương tác, trình duyệt ghi nhận một “layout shift”. CLS sẽ cộng dồn toàn bộ các lần dịch chuyển đó.

Ví dụ:

Hình ảnh tải xong mới xuất hiện
Quảng cáo chèn muộn
Font chữ thay đổi kích thước sau khi tải
Widget hoặc popup xuất hiện bất ngờ

Bảng tóm tắt:

Thuộc tính	Giá trị
Tên đầy đủ	Cumulative Layout Shift
Thuộc nhóm	Core Web Vitals
Mục tiêu	Đo tính ổn định trực quan
Đơn vị	Không có đơn vị
Giá trị tốt	≤ 0.1
Giá trị kém	> 0.25

CLS không đo tốc độ tải trang như LCP mà tập trung vào độ ổn định giao diện khi hiển thị.

CLS bao nhiêu là tốt? Cách fix điểm CLS hoạt động như thế nào?

Google tính CLS dựa trên hai thành phần:

Impact Fraction: phần diện tích màn hình bị ảnh hưởng
Distance Fraction: khoảng cách phần tử di chuyển

Công thức:

CLS Score = Impact Fraction × Distance Fraction

Ví dụ:

Một banner chiếm 50% màn hình
Banner dịch xuống khoảng 20%

Kết quả:

CLS = 0.5 × 0.2 = 0.1

Trình duyệt sẽ theo dõi toàn bộ quá trình hiển thị:

Trang bắt đầu tải
      ↓
Hiển thị HTML ban đầu
      ↓
Ảnh / CSS / JS tải thêm
      ↓
Phần tử thay đổi kích thước
      ↓
Ghi nhận Layout Shift
      ↓
Cộng dồn thành CLS

Ví dụ mã HTML dễ gây CLS:

<div class="hero">
   <img src="banner-large.webp">
</div>

<p>Nội dung bài viết</p>

Do ảnh chưa khai báo kích thước, trình duyệt không biết phải dành bao nhiêu khoảng trống.

Phiên bản tối ưu:

<div class="hero">
   <img
      src="banner-large.webp"
      width="1200"
      height="675"
      alt="Banner"
   >
</div>

Trình duyệt xác định trước không gian hiển thị và tránh việc nhảy bố cục.

Ngưỡng chuẩn CLS 2025

Google chia CLS thành ba mức đánh giá tiêu chuẩn.

CLS	Trạng thái	Màu
≤ 0.1	Tốt	🟢
0.1–0.25	Cần cải thiện	🟠
>0.25	Kém	🔴

Một số dữ liệu từ Chrome UX Report cho thấy khoảng 78% website toàn cầu hiện đạt chuẩn CLS.

Mục tiêu thực tế:

Website doanh nghiệp: ≤0.1
Blog WordPress: ≤0.1
Ecommerce: ≤0.05 nếu có thể
Landing page quảng cáo: gần 0

Cách đo CLS: Công cụ & hướng dẫn

1. PageSpeed Insights

Truy cập:

https://pagespeed.web.dev/

Các bước:

Nhập URL
Chạy phân tích
Xem mục Core Web Vitals
Kiểm tra chỉ số CLS

Ưu tiên phần:

Field Data (CrUX)

vì đây là dữ liệu người dùng thực tế.

2. Lighthouse

Mở Chrome:

F12
→ Lighthouse
→ Analyze Page Load

Lighthouse cung cấp:

CLS
LCP
TBT
Danh sách cơ hội tối ưu

3. Chrome DevTools Performance

Mở:

F12
→ Performance
→ Record

DevTools sẽ hiển thị:

Layout Shift

Nhấn vào từng sự kiện để xem phần tử nào gây ra CLS.

Đây là công cụ rất hữu ích khi debug website lớn.

Nguyên nhân CLS kém: 5 lỗi phổ biến nhất

Hình ảnh không khai báo width và height

Đây là nguyên nhân phổ biến nhất.

Khi ảnh tải xong, trình duyệt mới xác định kích thước và đẩy nội dung xuống.

Quảng cáo tải động

Các mạng quảng cáo thường chèn iframe sau khi nội dung đã hiển thị.

Ví dụ:

<div id="ads"></div>

Khi quảng cáo xuất hiện:

<iframe></iframe>

toàn bộ giao diện bị dịch chuyển.

Web font gây FOUT hoặc FOIT

Font tải chậm khiến văn bản thay đổi kích thước sau khi render.

Ví dụ:

@font-face{
   font-family:'Roboto';
   src:url('roboto.woff2');
}

Widget bên thứ ba

Chatbot, analytics hoặc popup thường tải muộn và gây thay đổi layout.

Ví dụ:

Messenger Chat
LiveChat
Popup marketing

Chèn nội dung phía trên màn hình

Ví dụ:

Banner khuyến mãi
Popup cookie
Sticky header

Khi xuất hiện muộn, các phần tử phía dưới sẽ bị đẩy xuống.

Cách tối ưu CLS: Hướng dẫn từng bước

Đây là phần quan trọng nhất nếu muốn fix điểm CLS triệt để.

Bước 1: Luôn khai báo kích thước ảnh

Sai:

<img src="hero.webp">

Đúng:

<img
src="hero.webp"
width="1200"
height="675"
alt="Hero Image"
>

Hoặc dùng CSS:

img{
   aspect-ratio:16/9;
   width:100%;
   height:auto;
}

aspect-ratio giúp trình duyệt giữ đúng tỷ lệ trước khi ảnh tải xong.

Bước 2: Dành sẵn không gian cho quảng cáo

Sai:

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

Đúng:

.ad-container{
   min-height:250px;
}

HTML:

<div class="ad-container">
   <div id="ad"></div>
</div>

Ngay cả khi quảng cáo tải chậm, bố cục vẫn ổn định.

Bước 3: Sử dụng font-display

Ví dụ:

@font-face{
font-family:'Roboto';
src:url('roboto.woff2');
font-display:swap;
}

font-display:swap cho phép trình duyệt hiển thị font hệ thống trước thay vì chờ tải.

Điều này giảm mạnh hiện tượng:

FOIT
FOUT

Bước 4: Hạn chế nội dung chèn động phía trên màn hình

Không nên:

<body>

<div id="promo"></div>

<main>
Nội dung chính
</main>

</body>

Nên đặt:

<body>

<main>
Nội dung chính
</main>

<div id="promo"></div>

</body>

Hoặc hiển thị dạng overlay:

.popup{

position:fixed;
bottom:20px;
right:20px;

}

Overlay không làm thay đổi bố cục.

Bước 5: Tối ưu WordPress

Nếu dùng WordPress:

Plugin nên dùng:

LiteSpeed Cache
Perfmatters
FlyingPress

Thiết lập quan trọng:

Tắt lazy-load với ảnh LCP
Kích hoạt preload font
Bật WebP
Loại bỏ widget không cần thiết

Nếu dùng Cloudflare:

Bật Brotli
Bật APO
Tắt Rocket Loader

Rocket Loader đôi khi thay đổi thứ tự tải script và gây lỗi hiển thị.

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

CLS thuộc bộ Core Web Vitals, cùng với:

Google sử dụng Core Web Vitals như một tín hiệu xếp hạng trong hệ thống Page Experience.

Tác động thực tế:

Tăng tỷ lệ thoát nếu giao diện nhảy liên tục
Giảm tỷ lệ chuyển đổi
Tăng số lần click nhầm
Ảnh hưởng trải nghiệm trên di động

Google không thưởng trực tiếp cho website có CLS hoàn hảo, nhưng website có trải nghiệm quá tệ sẽ dễ mất lợi thế khi cạnh tranh với đối thủ có nội dung tương đương.

Các case study thực tế từng ghi nhận:

Yahoo Japan giảm 98% số trang CLS kém
Rakuten tăng hơn 61% chuyển đổi sau khi tối ưu
AliExpress giảm đáng kể tỷ lệ thoát

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