CLS (Cumulative Layout Shift) là gì? Nguyên nhân và cách fix?

CLS đo mức layout shift ngoài ý muốn trong suốt vòng đời trang (không chỉ lúc loading). Good <0.1, poor >0.25.

Cách tính (định nghĩa hiện tại, từ 6/2021):
- Mỗi shift có điểm = impact fraction × distance fraction.
- Các shift được gom thành session window (tối đa 5s, ngắt khi có khoảng lặng 1s); điểm CLS của trang = window tệ nhất — không còn là tổng cộng dồn mọi shift như định nghĩa cũ.
- Shift trong vòng 500ms sau user input (hadRecentInput) không tính vào score.

Nguyên nhân và fix:
- Ảnh/video thiếu dimensions — luôn set width/height attribute hoặc CSS aspect-ratio để browser reserve chỗ trước khi load.
- Web font gây FOUT — font-display: swap + size-adjust khớp metrics fallback font; preload font critical.
- Content inject động (banner, cookie notice, ads) — reserve chỗ bằng min-height; không chèn content phía trên nội dung đã render.
- Infinite scroll — append item phía dưới viewport, không phía trên.
- Animation — dùng transform: translateY() thay top/margin (transform không trigger layout).

Debug: Chrome DevTools Performance panel, bật Layout Shift Regions trong Rendering tab.