Cách tối ưu Font chữ Google Fonts bằng next/font giảm 100ms thời gian chờ
Một trong những nguyên nhân âm thầm khiến website của bạn bị **chậm 100-300ms thời gian hiển thị đầu tiên** là do trình duyệt phải gửi yêu cầu kết nối ra các máy chủ bên ngoài (như fonts.googleapis.com) để tải phông chữ. Thêm vào đó, hiện tượng chữ bị nhấp nháy đổi phông (FOUT - Flash of Unstyled Text) gây khó chịu cực kỳ cho người dùng. Tính năng next/font trong Next.js sẽ giúp bạn giải quyết triệt để vấn đề này.
1. Công nghệ next/font trong Next.js hoạt động thế nào?
Khi bạn dùng next/font/google, Next.js sẽ **tự động tải toàn bộ các file font chữ về và lưu trữ ngay tại máy chủ Edge Network của bạn tại thời điểm Build time**.
- 0% Request ra bên ngoài: Trình duyệt không cần kết nối tới máy chủ Google Fonts nữa.
- Tự động nén định dạng WOFF2 siêu nhẹ: Chỉ tải đúng tập ký tự (Subsetting) tiếng Việt/tiếng Anh cần thiết.
- Triệt tiêu lỗi nhấp nháy phông chữ: Sử dụng thuộc tính CSS
font-display: swapđược tinh chỉnh tự động.
2. Hướng dẫn khai báo next/font trong Next.js App Router
Khai báo phông chữ Inter hoặc Outfit trong file app/layout.js:
import { Outfit } from 'next/font/google';
const outfit = Outfit({
subsets: ['latin', 'vietnamese'],
display: 'swap',
variable: '--font-outfit',
});
export default function RootLayout({ children }) {
return (
<html lang="vi" className={outfit.variable}>
<body className="font-sans">{children}</body>
</html>
);
}Kết luận
Tối ưu phông chữ bằng next/font là bước tối ưu cơ bản nhưng mang lại hiệu quả tốc độ hiển thị cực kỳ ấn tượng. Uwmee Software tối ưu sẵn 100% phông chữ chuẩn WOFF2 cho mọi website bàn giao. Đọc thêm bài viết tối ưu Core Web Vitals.
Cần vượt Closed Testing nhanh chóng?
Đội 12+ tester thật của Uwmee tương tác hằng ngày đủ 14 ngày — trọn gói chỉ 300.000đ, chạy lại miễn phí nếu không đạt.