Làm thế nào để khắc phục hiện tượng nhảy layout khi tải trang (Cumulative Layout Shift - CLS) do hình ảnh và font chữ chưa được định hình kích thước trong CSS?

Question

Accepted Answer

Cumulative Layout Shift (CLS) là một trong những chỉ số Core Web Vitals quan trọng ảnh hưởng trực tiếp đến trải nghiệm người dùng và điểm số SEO của doanh nghiệp.
1. Nguyên nhân gây lỗi

Hình ảnh thiếu kích thước: Khi trình duyệt tải xong file HTML, nó chưa biết kích thước thực tế của hình ảnh nên phân bổ chiều cao bằng 0. Khi ảnh tải xong, nội dung bên dưới bị đẩy đột ngột xuống dưới.
Font chữ chưa tải kịp (FOUT/FOIT): Khi font tùy chỉnh tải về chậm, trình duyệt thay thế bằng font hệ thống có kích thước khác, gây hiện tượng giật khung hình.

2. Giải pháp khắc phục bằng CSS

Luôn khai báo rõ thuộc tính width và height cho thẻ <img> hoặc sử dụng kỹ thuật giữ chỗ tỷ lệ khung hình (Aspect Ratio) trong CSS.
Sử dụng thuộc tính font-display: swap trong @font-face để hiển thị font dự phòng ngay lập tức và hoán đổi khi font chính tải xong.

3. Ví dụ code minh họa thực tế
/* Sử dụng aspect-ratio để giữ chỗ cho hình ảnh trước khi tải xong */
.responsive-image-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
  background-color: #f0f0f0; /* Màu nền chờ (Skeleton placeholder) */
  overflow: hidden;
}

.responsive-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Định nghĩa font chữ chuẩn để giảm thiểu dịch chuyển */
@font-face {
  font-family: 'EnterpriseFont';
  src: url('/fonts/enterprise.woff2') format('woff2');
  font-display: swap;
}
4. Lưu ý kinh nghiệm thực chiến

Tránh chèn các banner quảng cáo hoặc nội dung động chèn ngang vào phía trên cùng của trang web mà không cố định trước chiều cao khung chứa (Container Height), đây là nguyên nhân phổ biến nhất gây điểm CLS kém.

Làm thế nào để khắc phục hiện tượng nhảy layout khi tải trang (Cumulative Layout Shift - CLS) do hình ảnh và font chữ chưa được định hình kích thước trong CSS?

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi css liên quan cùng chủ đề