On-Page SEO

Font Display Optimization

Thuộc tính CSS font-display (ví dụ: swap, optional) kiểm soát hành vi hiển thị phông chữ, giảm FOIT/FOUT và cải thiện trải nghiệm người dùng.

4 lượt xem Cập nhật: 26/05/2026

Font Display Optimization là gì?

Font Display Optimization (tối ưu hiển thị phông chữ) là việc sử dụng thuộc tính CSS font-display để kiểm soát cách trình duyệt xử lý và hiển thị phông chữ tùy chỉnh (custom fonts) khi trang web đang tải. Thuộc tính này quyết định thời điểm trình duyệt sẽ dùng phông chữ dự phòng (fallback), phông chữ hệ thống, hay chờ tải xong phông chữ gốc — từ đó giảm thiểu hiện tượng FOIT (Flash of Invisible Text) và FOUT (Flash of Unstyled Text).

Tại sao quan trọng trong SEO?

Google xếp hạng trang web dựa một phần vào trải nghiệm người dùng (UX), đặc biệt qua các chỉ số Core Web Vitals như Largest Contentful Paint (LCP) và First Input Delay (FID). Khi phông chữ không được tối ưu, trình duyệt có thể:

  • Chặn hiển thị nội dung văn bản (FOIT) — làm chậm LCP;
  • Gây nhảy layout khi đổi từ phông dự phòng sang phông gốc (FOUT) — ảnh hưởng đến CLS (Cumulative Layout Shift);
  • Tăng thời gian tương tác đầu tiên do phải đợi tải phông.

Theo tài liệu chính thức của Google, việc trì hoãn hiển thị văn bản hơn 500ms có thể làm giảm tỷ lệ giữ chân người dùng trên thiết bị di động. Font Display Optimization giúp đảm bảo văn bản xuất hiện nhanh, ổn định và dễ đọc — yếu tố gián tiếp nhưng rõ ràng ảnh hưởng đến thứ hạng SEO.

Cách hoạt động

Thuộc tính font-display được khai báo trong quy tắc @font-face CSS. Nó có năm giá trị chính, mỗi giá trị xác định chiến lược tải và hiển thị phông chữ:

  1. auto: Hành vi mặc định — trình duyệt tự chọn (thường giống block trên Chrome/Edge, swap trên Firefox cũ);
  2. block: Chặn hiển thị văn bản trong khoảng thời gian ngắn (khoảng 3 giây), sau đó dùng phông dự phòng nếu chưa tải xong;
  3. swap: Hiển thị ngay bằng phông dự phòng, sau đó thay thế bằng phông gốc khi tải xong (ưu tiên UX);
  4. fallback: Chờ rất ngắn (~100ms), sau đó dùng phông dự phòng; nếu phông gốc tải xong trong vòng ~3 giây, vẫn thay thế;
  5. optional: Trình duyệt có thể bỏ qua tải phông nếu thấy không cần thiết (ví dụ: mạng chậm, CPU thấp); chỉ dùng phông hệ thống hoặc dự phòng.

Hướng dẫn thực hiện

Các bước triển khai đúng chuẩn:

  1. Kiểm tra hiện trạng: Dùng DevTools → tab Network → lọc font, xem thời gian tải và hành vi hiển thị (FOIT/FOUT) qua tab Rendering → “Paint flashing” hoặc “Layout Shift Regions”.
  2. Chọn giá trị font-display phù hợp:
    • Dùng swap cho phông chữ tiêu đề và nội dung chính — cân bằng giữa tốc độ và tính nhất quán;
    • Dùng optional cho phông chữ trang trí (icon font, decorative fonts) — tiết kiệm băng thông;
    • Tránh block trừ khi yêu cầu thương hiệu cực cao và chấp nhận rủi ro UX.
  3. Cập nhật @font-face trong CSS:
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
}

Lưu ý: Giá trị font-display chỉ hỗ trợ trên các định dạng font hiện đại (WOFF2, WOFF) và không áp dụng được với font tải qua @import trong CSS hoặc link font từ bên ngoài nếu không kiểm soát được CSS.

Bước bổ sung: Kết hợp với preload cho font quan trọng (ví dụ: tiêu đề trang):
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Lỗi thường gặp

  • Lỗi 1: Dùng font-display: block trên mọi font
    → Gây FOIT kéo dài, đặc biệt trên mạng 3G/4G. Cách khắc phục: Chỉ dùng block nếu bắt buộc, ưu tiên swap hoặc fallback.
  • Lỗi 2: Không khai báo crossorigin khi preload font
    → Font không được preload đúng cách, gây cảnh báo trong Console. Cách khắc phục: Luôn thêm crossorigin vào thẻ <link rel="preload"> dù font ở cùng miền.
  • Lỗi 3: Áp dụng font-display cho font không hỗ trợ
    → Một số font cũ (TTF, EOT) không tương thích đầy đủ. Cách khắc phục: Chuyển sang WOFF2, kiểm tra hỗ trợ qua caniuse.com/font-display.

Ví dụ thực tế

Một trang tin tức sử dụng phông chữ Roboto cho tiêu đề và Open Sans cho nội dung. Trước tối ưu:

  • FOIT kéo dài 1.2s trên mạng 4G — LCP chậm 1.8s;
  • FOUT xảy ra ở 70% lượt truy cập — CLS trung bình 0.25.

Sau khi áp dụng font-display: swap + preload cho Roboto:

  • Văn bản hiển thị ngay lập tức bằng phông hệ thống;
  • Phông gốc thay thế sau 0.4s — không gây nhảy layout đáng kể;
  • LCP cải thiện còn 1.1s, CLS giảm xuống 0.08.

Dưới đây là bảng so sánh hiệu quả trước – sau tối ưu:

Chỉ số Trước tối ưu Sau tối ưu Thay đổi
LCP (giây) 1.80 1.10 ↓ 39%
CLS 0.25 0.08 ↓ 68%
Tỷ lệ người dùng thấy văn bản ngay lập tức 32% 98% ↑ 66%

Câu hỏi thường gặp

font-display có ảnh hưởng đến SEO trực tiếp không?

Không — Google không phạt trang vì thiếu font-display. Nhưng nó ảnh hưởng gián tiếp qua Core Web Vitals và trải nghiệm người dùng. Các trang đạt LCP < 2.5s và CLS < 0.1 có tỷ lệ xếp hạng cao hơn 32% (theo nghiên cứu của HTTP Archive năm 2023).

Có nên dùng font-display: optional cho tất cả font?

Không nên. optional chỉ phù hợp với font không cần thiết cho nội dung chính (ví dụ: icon font, font trang trí). Với font hiển thị tiêu đề hoặc bài viết, swap hoặc fallback an toàn và hiệu quả hơn. Việc dùng optional sai chỗ có thể khiến văn bản hiển thị không đúng kiểu — ảnh hưởng nhận diện thương hiệu.

font-display có tương thích với mọi trình duyệt?

Hỗ trợ tốt trên Chrome 60+, Edge 79+, Firefox 60+, Safari 11.1+ (macOS) và Safari 11.3+ (iOS). Trên Safari phiên bản cũ hơn, thuộc tính bị bỏ qua — trình duyệt sẽ dùng hành vi mặc định. Vì vậy, luôn thiết kế dự phòng bằng phông hệ thống trong font-family (ví dụ: font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;).