Font web vẫn là cải thiện hiệu năng dễ nhất trên hầu hết website

Mẫu hình cứ lặp lại

Nếu hôm nay bạn kiểm tra ngẫu nhiên mười website production, bạn sẽ thấy tình trạng font gần như giống nhau trên phần lớn trong số đó:

• Sáu đến mười tệp font được tải trên trang chủ
• Tất cả đều ở WOFF2 (tốt) nhưng không có chiến lược font-display (xấu)
• Nhiều độ đậm và kiểu chữ không được dùng ở bất kỳ đâu trên trang
• Toàn bộ stack được phục vụ từ một domain bên thứ ba (thường là Google Fonts), kéo theo mọi chi phí DNS, TLS và quyền riêng tư
• Không có phân tập con bằng unicode-range, nên mọi khách truy cập đều tải glyph Cyrillic và Greek ngay cả khi trang bằng tiếng Anh

Đây không phải là vấn đề riêng của các site nhỏ. Rất nhiều trang marketing được đầu tư tốt vẫn tải 600 KB font trước khi đoạn văn đầu tiên có thể được vẽ. Một khi đã bắt đầu nhận ra mẫu hình này, bạn sẽ khó mà không thấy nó nữa.

Cách khắc phục không hề lạ. Đó là một nhóm nhỏ các kỹ thuật đã được hiểu rõ và có trong trình duyệt nhiều năm qua.

Dùng một font biến thiên thay vì sáu font tĩnh

Nếu bạn đang tải Inter Regular, Inter Medium, Inter SemiBold, Inter Bold và các bản italic của chúng, bạn đang tải về số byte nhiều hơn khoảng sáu lần so với cần thiết. Một font Inter biến thiên duy nhất bao phủ toàn bộ trục độ đậm (và độ nghiêng, trong một số bản build) trong một tệp chỉ lớn hơn một chút so với hai độ đậm tĩnh.

Câu chuyện hỗ trợ trình duyệt đã được giải quyết từ nhiều năm trước — font biến thiên hoạt động ở mọi nơi quan trọng. Sự do dự còn lại chủ yếu là ký ức thói quen từ thời font tĩnh.

Một quy tắc thực tế dễ nhớ: một tệp font biến thiên cho mỗi hệ chữ, mỗi family. Latin trong một tệp, Cyrillic trong tệp khác, Greek trong tệp thứ ba, được tải có điều kiện bằng unicode-range. Chỉ vậy thôi.

Đặt font-display hợp lý

Hành vi mặc định khi font tùy chỉnh vẫn đang tải là hiển thị không gì cả — chữ vô hình — trong tối đa ba giây. Đây là mặc định tệ nhất có thể. Người dùng thấy một trang trống và cho rằng có gì đó bị hỏng.

Thêm phần này vào mọi quy tắc @font-face:

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

swap hiển thị font dự phòng ngay lập tức và thay bằng font tùy chỉnh khi font đó tải xong. Người dùng có thể đọc trang từ mili-giây đầu tiên. Đánh đổi là một dịch chuyển bố cục ngắn khi việc thay thế diễn ra, và bạn giảm nhẹ điều đó bằng kỹ thuật tiếp theo.

Khớp metric của font dự phòng

Hiện tượng chữ chưa được định kiểu lóe lên chỉ gây khó chịu khi font dự phòng và font tùy chỉnh có metric rất khác nhau. CSS hiện đại khắc phục điều này bằng size-adjust, ascent-override và các thuộc tính tương tự:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Khi metric dự phòng được tinh chỉnh, việc thay font gần như không thể nhận ra — các từ chiếm cùng một không gian ngang trước và sau khi font tùy chỉnh xuất hiện.

Công việc --allow-fallback-font-metrics của Google hiện đã có hỗ trợ trình duyệt nền tảng, và có cả pipeline công cụ (thư viện fontaine và các công cụ tương tự) để tính đúng các con số cho bạn trong vài giây.

Tự host

Google Fonts tiện lợi, miễn phí, và mang theo hai chi phí thật sự:

1. Một lần bắt tay TLS thứ hai. Ngay cả với HTTP/3 và connection coalescing, thêm một origin hiếm khi là miễn phí.
2. Một câu hỏi về quyền riêng tư và tuân thủ. Một số tòa án châu Âu đã phán quyết rằng việc tải Google Fonts từ fonts.gstatic.com cấu thành hành vi truyền dữ liệu cá nhân (địa chỉ IP) cho bên thứ ba. Tự host loại bỏ hoàn toàn câu hỏi này.

Pipeline tải về và host là:

1. Lấy tệp WOFF2 (bản build biến thiên nếu có)
2. Chia tập con theo các hệ chữ mà đối tượng người dùng của bạn thực sự dùng
3. Phục vụ tệp từ cùng origin với phần còn lại của site, với Cache-Control: max-age=31536000, immutable dài hạn
4. Preload độ đậm quan trọng nhất: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Đó là toàn bộ pipeline. Với một site hiện có, việc này mất một buổi chiều, và bạn gần như sẽ không bao giờ quay lại cách cũ.

Khi nào nên bỏ hẳn font tùy chỉnh

Cần nói rõ: không phải site nào cũng cần font tùy chỉnh. Stack font hệ thống hiện thực sự đẹp trên mọi hệ điều hành:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

Độ đậm đúng, metric đúng, cách render được tinh chỉnh cho thiết bị, và chi phí byte truyền qua mạng đúng bằng không. Với một site công cụ, ứng dụng nội bộ, portfolio ưu tiên nội dung, hoặc bất cứ thứ gì hướng tới người dùng trên mạng chậm, stack hệ thống là câu trả lời đúng.

<!-- tool-cta:start -->

💡 Hãy thử cách này: Chuyển đổi các tệp TTF hoặc OTF của bạn sang WOFF2 hiện đại kèm CSS sẵn dùng bằng Webfont Generator, đây là thay đổi định dạng mà bài viết khuyến nghị.

<!-- tool-cta:end -->

Tóm tắt thẳng thắn

Với một site nhỏ điển hình, bốn bước bao quát toàn bộ câu chuyện hiệu năng font web:

1. Một font biến thiên cho mỗi family, mỗi hệ chữ
2. font-display: swap với metric dự phòng được khớp
3. Tự host với header cache dài hạn và preload cho độ đậm quan trọng
4. Hoặc bỏ hẳn font tùy chỉnh và dùng stack hệ thống

Làm việc này một lần, bạn lấy lại vài trăm kilobyte từ trang chủ, cải thiện vài trăm mili-giây hiệu năng cảm nhận, và đồng thời loại bỏ một phụ thuộc bên thứ ba. Rất ít thay đổi có tỷ lệ công sức trên lợi ích tốt hơn.