Cumulative Layout Shift (CLS) đo lường tổng tất cả các điểm số về sự dịch chuyển bố cục đột ngột của các phần tử trên trang trong suốt quá trình tải. Một điểm số CLS cao khiến người dùng nhấp nhầm link, gây ức chế và trực tiếp làm giảm thứ hạng trên Google.
Mục tiêu: Đạt mức CLS $\le 0.1$.
1. Nguyên nhân hàng đầu gây lỗi CLS #
Sự xê dịch xảy ra khi trình duyệt chưa biết kích thước của một phần tử (ảnh, video, quảng cáo) nên nó đặt kích thước bằng 0. Khi phần tử đó tải xong, nó “đẩy” các nội dung phía dưới xuống để lấy chỗ.
1.1. Hình ảnh không khai báo kích thước #
Đây là lỗi phổ biến nhất. Trình duyệt không biết giữ chỗ (reserve space) cho ảnh.
- Kỹ thuật khắc phục: Luôn khai báo thuộc tính
widthvàheighttrực tiếp trong thẻ HTML.
HTML
<img src="san-pham.webp" width="800" height="600" alt="Ten san pham">
- CSS hiện đại: Sử dụng thuộc tính
aspect-ratiođể giữ khung hình ổn định trên mọi thiết bị.
CSS
img {
max-width: 100%;
height: auto;
aspect-ratio: 4 / 3;
}
1.2. Quảng cáo, Iframe và Embeds #
Các khung quảng cáo (như Adsense) thường hiện ra sau cùng và đẩy nội dung bài viết xuống.
- Kỹ thuật khắc phục: Bao bọc quảng cáo trong một thẻ
divcó chiều cao cố định (min-height).
HTML
<div class="ad-slot" style="min-height: 250px;">
</div>
2. Font chữ và hiện tượng FOIT/FOUT #
Khi trình duyệt tải font chữ tùy chỉnh từ Google Fonts hoặc Server, nó có thể gây ra hiện tượng:
- FOIT (Flash of Invisible Text): Chữ biến mất cho đến khi font tải xong.
- FOUT (Flash of Unstyled Text): Chữ hiện ra bằng font hệ thống, sau đó nhảy kích thước khi font tùy chỉnh được áp dụng.
Kỹ thuật khắc phục: #
- Font-display: swap: Cho phép trình duyệt dùng font hệ thống ngay lập tức và chỉ thay đổi “vỏ” khi font xịn tải xong.font-display: swap;
- Preload Critical Fonts: Tải trước các tệp font quan trọng nhất của phần đầu trang.<link rel=”preload” href=”font-chinh.woff2″ as=”font” type=”font/woff2″ crossorigin>
3. Nội dung chèn động (Dynamic Content) #
Việc dùng JavaScript để chèn thêm thông báo (Banner khuyến mãi, Newsletter) ở phía trên nội dung chính sau khi trang đã tải xong là “kẻ thù” của CLS.
- Quy tắc: Chỉ chèn nội dung động bên dưới khung hình đang hiển thị (below the fold) hoặc sử dụng các lớp phủ (Overlay/Pop-up) không làm thay đổi vị trí của các phần tử hiện có.
4. Animation và Transform #
Khi tạo hiệu ứng chuyển động, nếu bạn thay đổi các thuộc tính như top, left, margin, trình duyệt phải tính toán lại toàn bộ bố cục (Reflow).
- Kỹ thuật khắc phục: Chỉ sử dụng thuộc tính
transform(nhưtranslate(),scale()) để tạo hiệu ứng. Thuộc tính này được xử lý bởi GPU và không gây xê dịch bố cục.
5. Checklist thực hành đạt điểm xanh CLS #
- [ ] 1. Ảnh & Video: 100% phần tử Multimedia đã có thuộc tính
widthvàheightchưa? - [ ] 2. Ads Slot: Các vị trí đặt quảng cáo đã được cố định khung sườn (Placeholder) chưa?
- [ ] 3. Web Fonts: Đã sử dụng
font-display: swapvà preload các font chính chưa? - [ ] 4. Layout Shift Debugger: Đã dùng Chrome DevTools (Lighthouse) hoặc tính năng “Layout Shift Regions” để tìm chính xác phần tử nào đang nhảy chưa?
- [ ] 5. Transition: Các hiệu ứng hiện ra (như menu mobile) đã dùng
transformthay vì thay đổi kích thước trực tiếp chưa?
6. Kết luận: CLS và sự ổn định của Thực thể (Entity) #
Một website có CLS thấp không chỉ giúp người dùng dễ chịu mà còn giúp Google AI trích xuất dữ liệu chính xác hơn.
- Khả năng đọc hiểu của AI: Khi bố cục ổn định, Google Bot có thể xác định chính xác mối quan hệ giữa các thẻ tiêu đề (H1, H2) và đoạn văn mà không bị nhầm lẫn bởi các phần tử chèn ngang.
- Tín hiệu uy tín: Một trang web “nhảy lung tung” thường bị AI coi là có chất lượng thấp hoặc chứa quảng cáo độc hại. Sự ổn định là chìa khóa để giữ chân người dùng và thăng hạng trên AI Overview.
Lời kết: Khắc phục CLS là một bài kiểm tra về sự tỉ mỉ. Khi bạn giữ cho website luôn “tĩnh” trong quá trình tải, bạn đang tạo ra một trải nghiệm chuyên nghiệp và đáng tin cậy nhất cho khách hàng của mình.
Ung Ho SEO Wiki
