font-display: swap là gì là câu hỏi mà nhiều nhà phát triển web và SEO-er quan tâm khi đối mặt với cảnh báo “Ensure text remains visible during webfont load” trên Google PageSpeed Insights. Khi bạn sử dụng các font chữ tùy chỉnh (Custom Fonts) để làm đẹp giao diện, trình duyệt thường mất thời gian để tải chúng về. Nếu không được cấu hình đúng, nội dung văn bản trên trang web có thể bị ẩn đi hoàn toàn cho đến khi font chữ tải xong. Điều này tạo ra trải nghiệm người dùng cực kỳ tệ hại và ảnh hưởng trực tiếp đến các chỉ số quan trọng của Google.
Nội dung dưới đây sẽ giúp bạn hiểu rõ cơ chế vận hành của descriptor này. Bạn sẽ biết cách triển khai nó để loại bỏ tình trạng chữ bị biến mất, đồng thời tối ưu hóa tốc độ hiển thị nội dung cho dự án web của mình.
font-display: swap là gì?
Về mặt kỹ thuật, font-display là một descriptor thuộc quy tắc CSS @font-face. Nhiệm vụ chính của nó là xác định cách trình duyệt hiển thị các font chữ tùy chỉnh trong quãng thời gian tệp font đang được tải xuống từ máy chủ. Theo tài liệu chính thức từ MDN Web Docs, descriptor này quyết định việc hiển thị dựa trên trạng thái sẵn sàng của font.
Trong đó, giá trị swap là lựa chọn phổ biến và mạnh mẽ nhất hiện nay. Khi áp dụng font-display: swap, bạn đang ra lệnh cho trình duyệt thực hiện hai việc quan trọng. Thứ nhất, trình duyệt gần như không chờ đợi font tùy chỉnh mà sẽ hiển thị ngay văn bản bằng một font chữ dự phòng (fallback font) có sẵn trong hệ thống như Arial hoặc Roboto. Thứ hai, ngay khi font tùy chỉnh tải xong, trình duyệt sẽ thực hiện việc “hoán đổi” (swap) font dự phòng bằng font chính thức.
Mục tiêu cốt lõi của kỹ thuật này là triệt tiêu hoàn toàn hiện tượng FOIT (Flash of Invisible Text) – tình trạng người dùng thấy một trang web trắng trơn không có chữ dù nội dung đã tải về. Thay vào đó, chúng ta chấp nhận FOUT (Flash of Unstyled Text), nơi người dùng thấy chữ ngay lập tức nhưng kiểu dáng sẽ thay đổi nhẹ sau vài giây.
Cách font-display: swap hoạt động
Để hiểu sâu hơn, chúng ta cần phân tích “Font Display Timeline” – một khái niệm do trình duyệt quản lý gồm ba giai đoạn riêng biệt. Cơ chế này quyết định sự sống còn của trải nghiệm đọc trên trang web của bạn.
Giai đoạn 1: Font Block Period (Giai đoạn chặn)
Ở giai đoạn này, nếu font chữ chưa tải xong, trình duyệt sẽ render văn bản dưới dạng “vô hình”. Với các giá trị khác, giai đoạn này có thể kéo dài 3 giây hoặc hơn. Riêng với swap, giai đoạn chặn được thiết lập ở mức “cực ngắn” (extremely small), gần như bằng 0. Điều này đảm bảo người dùng không phải chờ đợi để thấy nội dung.
Giai đoạn 2: Font Swap Period (Giai đoạn hoán đổi)
Ngay sau khi giai đoạn chặn kết thúc, trình duyệt bước vào giai đoạn hoán đổi. Tại đây, text sẽ hiển thị bằng font dự phòng. Nếu font tùy chỉnh tải xong trong thời gian này, trình duyệt sẽ thực hiện việc thay thế. Với swap, thời gian này là vô hạn (infinite), nghĩa là bất cứ khi nào font tải xong, nó sẽ được áp dụng.
Giai đoạn 3: Font Failure Period (Giai đoạn lỗi)
Nếu vì lý do mạng yếu hoặc lỗi máy chủ mà font không thể tải về, trình duyệt sẽ coi như font đó bị hỏng. Lúc này, website sẽ giữ nguyên font dự phòng để người dùng vẫn có thể đọc nội dung mà không bị gián đoạn.
Ngưỡng hiệu suất và so sánh các giá trị font-display
Mỗi giá trị của font-display sẽ mang lại một kết quả hiển thị khác nhau. Việc lựa chọn giá trị nào phụ thuộc vào ưu tiên của bạn giữa “tốc độ” và “vẻ đẹp thẩm mỹ”.
| Giá trị | Thời gian chặn (Block) | Thời gian hoán đổi (Swap) | Trải nghiệm người dùng (UX) |
| auto | Tùy trình duyệt (thường 3s) | Vô hạn | Trung bình |
| block | Ngắn (3s) | Vô hạn | Dễ gây FOIT (Tệ) |
| swap | Cực ngắn (0s) | Vô hạn | Hiển thị nội dung ngay (Tốt) |
| fallback | Cực ngắn (0.1s) | Ngắn (3s) | Cân bằng |
| optional | Cực ngắn (0.1s) | Không có | Tốc độ tối đa |
Mặc dù optional cho tốc độ tốt nhất, nhưng swap vẫn là lựa chọn hàng đầu cho các blog kỹ thuật hoặc trang tin tức vì nó đảm bảo font chữ thương hiệu luôn được hiển thị cuối cùng.
Cách kiểm tra font-display: swap của website
Việc kiểm tra xem website đã tối ưu web font hay chưa là bước bắt buộc trong quy trình SEO Audit kỹ thuật. Bạn có thể sử dụng các công cụ miễn phí từ Google để thực hiện việc này.
Dùng Google PageSpeed Insights
Đây là cách đơn giản nhất. Bạn chỉ cần nhập URL vào công cụ. Nếu website chưa sử dụng swap, Google sẽ hiển thị lỗi trong phần “Opportunities” với tiêu đề “Ensure text remains visible during webfont load”. Khi lỗi này biến mất, nghĩa là bạn đã cấu hình thành công.
Dùng Chrome DevTools
Bạn nhấn F12, chọn thẻ Lighthouse và chạy phân tích. Ngoài ra, bạn có thể vào thẻ Network, giới hạn tốc độ mạng xuống “Slow 3G” và tải lại trang. Nếu bạn thấy chữ hiện ra ngay bằng font mặc định rồi mới đổi sang font đẹp, thì font-display: swap đang hoạt động chính xác.
Dùng Google Search Console
Trong mục “Core Web Vitals” (Trải nghiệm người dùng trên trang), hãy theo dõi biểu đồ LCP. Nếu LCP (Largest Contentful Paint) có xu hướng giảm sau khi bạn thêm thuộc tính swap, đó là minh chứng rõ ràng cho hiệu quả của việc tối ưu này.
Cách cải thiện tốc độ tải font hiệu quả
Triển khai font-display: swap không hề khó. Tùy vào cách bạn nhúng font mà chúng ta có các phương pháp thực hiện khác nhau.
Cách 1 — Sử dụng trong tệp CSS cục bộ
Nếu bạn tự lưu trữ font (Self-hosted), hãy thêm descriptor này trực tiếp vào quy tắc @font-face trong file CSS của bạn.
CSS
@font-face {
font-family: 'Open Sans';
src: url('/fonts/open-sans.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap; /* Thêm dòng này */
}
Cách 2 — Tối ưu cho Google Fonts
Nếu bạn sử dụng Google Fonts, hãy thêm tham số &display=swap vào cuối đường dẫn URL trong thẻ <link>. Hiện nay, Google đã mặc định thêm tham số này khi bạn lấy mã nhúng, nhưng bạn nên kiểm tra lại để chắc chắn.
HTML
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
Cách 3 — Kết hợp Preload để giảm thiểu CLS
Một vấn đề nhỏ khi dùng swap là hiện tượng nhảy bố cục (Layout Shift) khi font thay đổi. Để khắc phục, hãy kết hợp với kỹ thuật preload để trình duyệt ưu tiên tải font sớm hơn.
HTML
<link rel="preload" href="/fonts/open-sans.woff2" as="font" type="font/woff2" crossorigin>
Mặt khác, việc chọn một fallback font có kích thước tương đồng với font chính sẽ giúp giảm thiểu tối đa sự thay đổi vị trí của các phần tử trên trang.
font-display: swap ảnh hưởng SEO thế nào?
Trong thế giới SEO hiện đại, trải nghiệm người dùng là yếu tố xếp hạng quan trọng. Google đánh giá website dựa trên bộ chỉ số Core Web Vitals, và tối ưu font chữ đóng vai trò then chốt tại đây.
Đầu tiên là chỉ số First Contentful Paint (FCP). Khi dùng swap, trình duyệt không tốn thời gian “chặn” hiển thị, giúp nội dung đầu tiên xuất hiện nhanh hơn. Điều này tạo cảm giác trang web phản hồi tức thì, làm giảm tỷ lệ thoát (Bounce Rate).
Thứ hai là chỉ số Largest Contentful Paint (LCP). Nếu phần tử lớn nhất trên màn hình là một đoạn văn bản sử dụng web font, việc hiển thị nó ngay lập tức bằng font dự phòng sẽ giúp điểm LCP của bạn xanh hơn. Google luôn ưu tiên những trang web có nội dung hữu ích xuất hiện sớm nhất có thể.
Mặc dù việc thay đổi font có thể gây ảnh hưởng nhẹ đến chỉ số CLS (Cumulative Layout Shift), nhưng lợi ích về tốc độ và trải nghiệm đọc thường vượt trội hơn nhiều. Google sẽ đánh giá cao nỗ lực của bạn trong việc duy trì khả năng truy cập nội dung liên tục cho người dùng.
Câu hỏi thường gặp về font-display: swap
Điểm hiệu suất font-display: swap bao nhiêu là tốt?
Không có một con số cụ thể cho “điểm” của riêng thuộc tính này, nhưng việc áp dụng nó giúp bạn loại bỏ hoàn toàn lỗi hiển thị font trên PageSpeed Insights. Mục tiêu là đạt 100/100 ở hạng mục Performance bằng cách đảm bảo văn bản hiển thị trong vòng dưới 1 giây đầu tiên.
font-display: swap khác font-display: optional thế nào?
Giá trị swap luôn cố gắng hiển thị font tùy chỉnh sau khi tải xong, dù mất bao lâu. Ngược lại, optional chỉ cho phép font tùy chỉnh hiển thị nếu nó tải xong cực nhanh (khoảng 100ms), nếu không nó sẽ dùng font dự phòng mãi mãi cho phiên làm việc đó.
Làm sao cải thiện tốc độ tải font nhanh nhất?
Cách nhanh nhất là sử dụng định dạng file .woff2 (nén tốt nhất), áp dụng font-display: swap và sử dụng CDN để phân phối font. Ngoài ra, hãy chỉ tải các bộ ký tự (Subsets) cần thiết như Tiếng Việt để giảm dung lượng file xuống mức tối thiểu.
Sau khi nắm vững khái niệm font-display: swap là gì, chúng ta thấy rằng đây là một kỹ thuật tối ưu hóa đơn giản nhưng mang lại hiệu quả cực lớn. Nó không chỉ giúp trang web của bạn vượt qua các bài kiểm tra tốc độ khắt khe của Google mà còn mang lại sự hài lòng cho người dùng khi họ có thể tiếp cận thông tin ngay lập tức. Hãy kiểm tra lại tệp CSS của bạn ngay hôm nay để đảm bảo thuộc tính này đã được áp dụng đúng cách.
Đọc tiếp: Minification là gì?
Tham khảo thêm tài liệu kỹ thuật chi tiết tại MDN Web Docs hoặc hướng dẫn tối ưu Web Font https://web.dev/articles/font-display.
