Khắc phục triệt để lỗi giật nhảy phông chữ (FOUT/FOIT) và dịch chuyển giao diện CLS với @next/font & font-display: optional
Một trong những nguyên nhân phổ biến nhất khiến website bị dính điểm phạt chỉ số CLS (Cumulative Layout Shift - Dịch chuyển Bố cục Giao diện) trên Google PageSpeed chính là Sự cố tải Phông chữ Web (Web Font Loading Bottleneck).
Hiện tượng này diễn ra như sau: Khi trang web nạp về, trình duyệt chưa kịp tải xong file phông chữ Google Fonts (như Inter hay Roboto), nên nó tạm thời hiển thị phông chữ hệ thống mặc định (như Times New Roman hay Arial). Vài giây sau khi file Google Fonts tải xong, trình duyệt đột ngột đổi phông chữ, khiến toàn bộ kích thước chữ biến đổi và giật nảy giao diện bài viết xuống dưới! Bài viết này sẽ hướng dẫn bạn kỹ thuật triệt tiêu 100% lỗi giật phông với @next/font và font-display: optional.
1. Phân biệt 2 Hiện tượng Giật phông chữ: FOUT vs FOIT
- FOUT (Flash of Unstyled Text): Trình duyệt hiển thị tạm thời phông chữ hệ thống rùng rợn, sau đó giật nảy đổi sang phông đẹp khi tải xong. Đây là nguyên nhân hàng đầu gây ra lỗi CLS! Read Lỗi CLS Dịch chuyển giao diện là gì.
- FOIT (Flash of Invisible Text): Trình duyệt giấu biệt văn bản (chữ bị tàng hình) trong lúc chờ phông chữ tải về. Người dùng phải nhìn màn hình trống chữ trong 2-3 giây.
2. So sánh các Chiến lược font-display trong CSS
| Cấu hình font-display | Thời gian giấu chữ (Block Period) | Thời gian đổi phông (Swap Period) | Tác động chỉ số CLS & UX |
|---|---|---|---|
font-display: auto |
Trình duyệt tự quyết định (Thường giấu chữ 3 giây). | Không giới hạn. Giật phông liên tục. | ❌ Rất kém. Dễ bị hạ điểm CLS và FCP. |
font-display: swap |
0 millisecond (Hiển thị ngay phông hệ thống). | Không giới hạn (Đổi sang phông đẹp ngay khi nạp xong). | ⚠️ Tránh được lỗi giấu chữ nhưng vẫn dính lỗi giật nảy giao diện CLS! |
font-display: optional (Khuyên dùng 100%) |
100 millisecond (Chờ phông đẹp trong 0.1s). | 0 millisecond (Nếu phông đẹp nạp không kịp trong 0.1s, giữ nguyên phông hệ thống và KHÔNG BAO GIỜ giật đổi phông nữa!) | ✅ ĐỈNH CAO ZERO CLS: Loại bỏ 100% rủi ro giật nhảy giao diện! |
3. Triển khai Phông chữ Tối ưu 0ms CLS với @next/font trong Next.js
Next.js tích hợp sẵn thư viện @next/font tự động tải phông chữ về nạp trực tiếp từ Server (Zero External Network Request tới Google Fonts) và tự động tính toán kích thước phông tương đương (Font Metric Overrides) giúp loại bỏ triệt để CLS.
Khai báo phông chữ chuẩn trong app/layout.jsx:
import { Inter, Outfit } from 'next/font/google';
// Cấu hình phông chữ Inter chuẩn Zero CLS với display: 'optional'
const inter = Inter({
subsets: ['vietnamese'],
display: 'optional', // Triệt tiêu hoàn toàn lỗi giật đổi phông CLS
variable: '--font-inter',
fallback: ['system-ui', 'arial'], // Phông dự phòng có kích thước tương đồng
});
const outfit = Outfit({
subsets: ['latin'],
display: 'optional',
variable: '--font-outfit',
});
export default function RootLayout({ children }) {
return (
<html lang="vi" className={inter.variable + ' ' + outfit.variable}>
<body className="font-sans antialiased">
{children}
</body>
</html>
);
}
Read thêm bài hướng dẫn Dynamic Metadata API và Layout Next.js.
4. Kỹ thuật Tự động Cân bằng Kích thước Phông hệ thống (Font Metric Overrides)
Nếu bạn tự nạp tệp phông chữ .woff2 nội bộ trong CSS, hãy sử dụng các thuộc tính toán học Font Metric Overrides để ép trình duyệt chỉnh kích thước phông hệ thống vừa khít 100% với phông chữ tùy chỉnh của bạn:
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2');
font-display: optional;
/* Các thông số cân bằng chiều cao và khoảng cách chữ */
size-adjust: 98%;
ascent-override: 90%;
descent-override: 20%;
line-gap-override: 0%;
}
5. Kiểm tra Chỉ số CLS trên Google Search Console & PageSpeed Insights
- Mở Chrome DevTools (F12) ➔ Chuyển sang tab Performance ➔ Tích chọn mục Web Vitals.
- Nạp lại trang và xem báo cáo Layout Shifts: Nếu không có bất kỳ vệt đỏ nào xuất hiện khi phông chữ hiển thị, chỉ số CLS của bạn đã đạt mức 0.000 (Hoàn hảo)!
- Theo dõi báo cáo Core Web Vitals trong Google Search Console để xác nhận 100% các đường link đều đạt trạng thái màu xanh lá cây mượt mà.
Kết luận
Tối ưu hóa Phông chữ web với @next/font và thuộc tính font-display: optional là chìa khóa vàng triệt tiêu hoàn toàn lỗi giật nhảy giao diện CLS. Sự mượt mà của giao diện và tốc độ hiển thị chữ tức thì sẽ mang lại trải nghiệm đọc hoàn hảo cho độc giả và đưa website của bạn bứt phá lên vị trí dẫn đầu Google.
Câu hỏi thường gặp
Bạn cần giải pháp phần mềm chuyên nghiệp?
Uwmee Software cung cấp dịch vụ 12 tester Google Play & thiết kế website cao cấp giúp nâng tầm thương hiệu của bạn.