CSSNguyên nhân chính là không đặt trước chỗ cho nội dung tải bất đồng bộ, nên khi nó xuất hiện, mọi thứ bên dưới bị đẩy xuống.
Ảnh / video / iframe — luôn khai báo kích thước nội tại để trình duyệt tính sẵn tỉ lệ:
<img src="/hero.jpg" width="1200" height="675" alt="" />img { max-width: 100%; height: auto; } /* giữ responsive mà vẫn có tỉ lệ */
.embed { aspect-ratio: 16 / 9; }Đặt width/height trên thẻ <img> không khoá cứng kích thước — trình duyệt suy ra aspect-ratio từ hai số này và giữ chỗ ngay từ lúc parse HTML.
Font: font-display: swap tránh chữ vô hình nhưng gây nhảy khi đổi font. Giảm bằng size-adjust, ascent-override trên @font-face để font fallback có metric gần với font thật, và preload font quan trọng.
Nội dung chèn động (banner, quảng cáo, thông báo): chừa sẵn slot có min-height thay vì chèn vào đầu luồng; skeleton phải cùng kích thước với nội dung thật.
Animation: chỉ animate transform/opacity — đổi top, height, margin vừa gây reflow vừa tính vào CLS.
Đo bằng Lighthouse hoặc PerformanceObserver với entry type layout-shift; ngưỡng tốt là CLS ≤ 0.1.