Tối ưu hóa tải Web Fonts và Ảnh: Loại bỏ hoàn toàn Layout Shift (CLS = 0)

Hiện tượng chữ nhảy nhót và bố cục xô lệch (FOIT & FOUT)#

Chắc hẳn bạn đã nhiều lần trải nghiệm cảm giác: Đang chuẩn bị bấm vào một đường link trên điện thoại thì bỗng nhiên font chữ hoặc ảnh tải xong, đẩy toàn bộ nội dung thụt xuống, khiến bạn bấm nhầm vào một banner quảng cáo khác.

Đây là lỗi Cumulative Layout Shift (CLS) – kẻ thù số 1 của trải nghiệm người dùng di động.

Dưới đây là phương pháp đưa chỉ số CLS về tuyệt đối bằng 0.000.

1. Tối ưu Web Font với font-display: swap và size-adjust#

Khi dùng font ngoài (như Inter hoặc Roboto), luôn khai báo font fallback hệ thống với thông số điều chỉnh kích thước (size-adjust) để font dự phòng có cùng chiều cao dòng chính xác:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  font-weight: 400 700;
}

/* Tinh chỉnh font hệ thống để không bị giật khi font Inter tải xong */
@font-face {
  font-family: 'Inter-Fallback';
  src: local('Arial');
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 107%;
}

2. Loại bỏ Layout Shift cho Ảnh bằng CSS aspect-ratio#

Không bao giờ chèn thẻ <img> mà không khai báo kích thước hoặc tỷ lệ khung hình:

<!-- Khai báo thuộc tính width và height chuẩn -->
<img 
  src="/images/post-cover.webp" 
  alt="Ảnh minh họa" 
  width="800" 
  height="450" 
  class="w-full h-auto aspect-video rounded-xl bg-gray-100 dark:bg-gray-800"
  loading="lazy"
  decoding="async"
/>

Trình duyệt sẽ tự động tính toán tỷ lệ $800 / 450 = 16:9$ và giữ chỗ sẵn một khoảng trống chính xác trước khi ảnh kịp tải về.

Góc thảo luận#

Bạn đã từng dùng công cụ tự động generate fallback font (như @next/font hoặc Astro Font) chưa? Bạn đánh giá điểm CLS trên website của mình thế nào?

Xem thêm nội dung liên quan:

• Học Thiết kế Web Chuẩn SEO
• Review công cụ lập trình web