CLS xảy ra khi nội dung đang hiển thị dịch chuyển sau khi đã được paint, làm xê dịch đúng thứ người dùng đang nhìn. Nguyên nhân gần như luôn là nội dung tải vào mà không chừa sẵn chỗ.
CLS xảy ra khi nội dung đang hiển thị dịch chuyển sau khi đã được paint, làm xê dịch đúng thứ người dùng đang nhìn. Nguyên nhân gần như luôn là nội dung tải vào mà không chừa sẵn chỗ.
top, height) thay vì transform.width/height (hoặc aspect-ratio) để chừa chỗ trước khi tải:<img src="/photo.jpg" width="1200" height="800" alt="..."> <!-- chừa sẵn khung -->
.hero { aspect-ratio: 16 / 9; } /* chừa tỉ lệ cho media responsive */
font-display: optional hoặc swap kèm size-adjust/preload để giảm reflow khi web font tới.position: absolute) hoặc đẩy từ dưới lên.transform/opacity — chúng được composite và không kích hoạt layout.CLS là Core Web Vital dễ sửa nhất — thường chỉ là vài kích thước còn thiếu. Người phỏng vấn dùng nó để kiểm tra bạn có hiểu render pipeline không: chừa chỗ trước nghĩa là trình duyệt không phải reflow, đó là lý do transform hơn hẳn việc animate top.
Thư viện câu hỏi phỏng vấn IT với đáp án chi tiết — từ Junior đến Senior.
Ủng hộ