CLS là gì? Cách giảm Cumulative Layout Shift để website không bị “nhảy layout”

I. CLS là gì?

CLS (Cumulative Layout Shift) là một trong 3 chỉ số quan trọng thuộc Core Web Vitals, dùng để đo mức độ ổn định của giao diện website trong quá trình tải trang.

Nói đơn giản hơn:
👉 CLS đo xem website của bạn có bị “nhảy lung tung” khi đang load hay không.

Ví dụ rất quen thuộc:

• Bạn đang định bấm nút “Đặt hàng”
• Đột nhiên banner quảng cáo load lên
• Nút bị đẩy xuống → bấm nhầm chỗ khác

👉 Trường hợp này CLS cao.

II. Vì sao CLS cực kỳ quan trọng?

1. CLS ảnh hưởng trực tiếp đến trải nghiệm người dùng

Không ai thích một website:

• Text đang đọc → nhảy
• Ảnh đang xem → lệch
• Nút bấm → đổi vị trí

Người dùng khó chịu – rời trang nhanh

---

2. CLS là yếu tố xếp hạng Google

Từ khi Google đưa Core Web Vitals vào thuật toán:

• Website CLS kém → tụt thứ hạng SEO
• Website ổn định → được ưu tiên hơn

CLS không chỉ là UX, mà là SEO thực sự.

---

3. CLS ảnh hưởng mạnh tới chuyển đổi (conversion)

Đặc biệt với:

• Website bán hàng
• Landing page chạy quảng cáo
• Website form đăng ký

CLS cao = mất tiền quảng cáo

III. Chỉ số CLS bao nhiêu là tốt?

CLS score	Đánh giá
≤ 0.1	✅ Tốt
0.1 – 0.25	⚠️ Cần cải thiện
> 0.25	❌ Kém

🎯 Mục tiêu tối ưu: CLS ≤ 0.1

IV. Nguyên nhân phổ biến gây CLS cao

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

Trình duyệt không biết trước chiều cao, nên khi ảnh load:

• Layout bị đẩy
• Gây shift

---

2. Quảng cáo / iframe load trễ

Quảng cáo Google Ads, Facebook Pixel, iframe:

• Load sau
• Đẩy toàn bộ nội dung xuống

---

3. Font chữ load chậm (FOIT / FOUT)

• Font chưa load → dùng font mặc định
• Font load xong → text đổi kích thước

Layout bị thay đổi

---

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

Ví dụ:

• Popup
• Thanh thông báo
• Banner khuyến mãi

Xuất hiện sau khi trang đã hiển thị

V. Cách đo CLS chính xác

1. Google PageSpeed Insights

• Xem CLS Field Data & Lab Data
• Có gợi ý lỗi chi tiết

---

2. Google Search Console

Vào: Trải nghiệm → Core Web Vitals → CLS

👉 Xem URL nào CLS kém / cần cải thiện

---

3. Chrome DevTools

• Tab Performance
• Bật Layout Shift Regions

VI. Cách tối ưu CLS hiệu quả (quan trọng nhất)

1. Luôn khai báo width & height cho ảnh/video

<img src="image.jpg" width="600" height="400">

Hoặc dùng CSS:

img {
  aspect-ratio: 3 / 2;
}

---

2. Dành sẵn không gian cho quảng cáo

❌ Đừng để ads load rồi mới chiếm chỗ
✅ Tạo khung cố định từ đầu

---

3. Tối ưu font chữ

• Dùng font-display: swap
• Preload font chính

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

---

4. Tránh chèn nội dung mới phía trên

Nếu cần popup / banner:

• Đặt dưới viewport
• Hoặc overlay (position: fixed)

---

5. Dùng skeleton loading

Thay vì để trống:

• Dùng khung giả (loading skeleton)
• Giữ layout ổn định

VII.Tổng kết

CLS không làm website chậm, nhưng làm website “khó chịu”
Website đẹp + nhanh mà nhảy layout = fail UX
Tối ưu CLS = SEO tốt hơn + chuyển đổi cao hơn

Nếu bạn đang:

• Làm website doanh nghiệp
• Chạy quảng cáo
• Làm SEO lâu dài

CLS là thứ bắt buộc phải tối ưu