Khi tối ưu hiệu suất website, việc kiểm soát cách trình duyệt hiển thị font chữ là yếu tố quan trọng nhưng thường bị bỏ qua. Cách cấu hình font display quyết định hành vi của trình duyệt khi tải font chữ tùy chỉnh, ảnh hưởng trực tiếp đến tốc độ hiển thị nội dung và trải nghiệm đọc của người dùng. Thuộc tính font-display trong CSS giúp bạn kiểm soát thời gian chờ font, từ đó cải thiện điểm số Core Web Vitals và giảm tỷ lệ thoát trang.
Font display là một thuộc tính CSS được thiết kế để kiểm soát cách trình duyệt xử lý font chữ web trong quá trình tải trang. Khi website sử dụng font tùy chỉnh, trình duyệt phải tải file font về trước khi hiển thị văn bản. Nếu không cấu hình font display, trình duyệt có thể ẩn văn bản trong vài giây cho đến khi font được tải xong, gây ra hiện tượng Flash of Invisible Text (FOIT).
Việc cấu hình font display đúng cách giúp loại bỏ FOIT, thay vào đó cho phép trình duyệt hiển thị font dự phòng ngay lập tức, sau đó thay thế bằng font chính khi tải xong. Điều này cải thiện đáng kể thời gian hiển thị nội dung đầu tiên (First Contentful Paint) và mang lại trải nghiệm mượt mà hơn cho người dùng trên mọi thiết bị.
Các giá trị của thuộc tính font display
Thuộc tính font-display trong CSS hỗ trợ năm giá trị chính, mỗi giá trị định nghĩa một hành vi khác nhau trong quá trình tải font. Hiểu rõ từng giá trị giúp bạn chọn cách cấu hình font display phù hợp với mục tiêu hiệu suất và thiết kế của website.
Giá trị
Thời gian chờ font
Hành vi hiển thị
Ứng dụng phù hợp
auto
Phụ thuộc trình duyệt
FOIT mặc định, thường 3 giây
Không khuyến khích sử dụng
block
3 giây
Ẩn văn bản trong 3 giây, sau đó hiển thị font dự phòng
Font thương hiệu cần hiển thị chính xác
swap
0 giây
Hiển thị font dự phòng ngay, đổi font khi tải xong
Tối ưu tốc độ, ưu tiên trải nghiệm
fallback
100ms
Chờ 100ms, hiển thị font dự phòng, đổi font nếu tải xong trong 3 giây
Cân bằng giữa thẩm mỹ và hiệu suất
optional
100ms
Chờ 100ms, nếu font không tải xong thì dùng font dự phòng vĩnh viễn
Kết nối chậm, ưu tiên hiển thị nhanh
Giá trị auto
Đây là giá trị mặc định khi không khai báo font-display. Trình duyệt tự quyết định thời gian chờ, thường là 3 giây. Trong thời gian này, văn bản bị ẩn hoàn toàn, gây ra FOIT. Nếu font tải xong trong 3 giây, văn bản hiển thị với font chính. Nếu không, trình duyệt chuyển sang font dự phòng. Giá trị này không phù hợp cho các website cần tối ưu hiệu suất.
Giá trị block ẩn văn bản trong tối đa 3 giây để chờ font chính. Nếu font tải xong trong khoảng thời gian này, văn bản hiển thị ngay với font mong muốn. Sau 3 giây, nếu font chưa tải xong, trình duyệt hiển thị font dự phòng. Giá trị này phù hợp khi bạn muốn đảm bảo font thương hiệu xuất hiện chính xác, nhưng có thể ảnh hưởng đến trải nghiệm người dùng trên kết nối chậm.
Giá trị swap
Swap là giá trị được khuyến nghị cho hầu hết các website. Trình duyệt hiển thị font dự phòng ngay lập tức, không chờ đợi. Khi font chính tải xong, trình duyệt thay thế font dự phòng bằng font chính. Quá trình này tạo ra hiện tượng Flash of Unstyled Text (FOUT), nhưng người dùng có thể đọc nội dung ngay từ đầu. Cách cấu hình font display với giá trị swap giúp cải thiện đáng kể thời gian hiển thị nội dung.
Giá trị fallback
Fallback là sự dung hòa giữa swap và block. Trình duyệt chờ 100ms để font chính tải, nếu không kịp thì hiển thị font dự phòng. Sau đó, nếu font chính tải xong trong vòng 3 giây, trình duyệt thay thế font dự phòng. Nếu quá 3 giây, font dự phòng được giữ nguyên. Giá trị này phù hợp khi bạn muốn giảm thiểu FOUT nhưng vẫn ưu tiên tốc độ hiển thị.
Giá trị optional
Optional là giá trị khắt khe nhất về hiệu suất. Trình duyệt chờ 100ms, nếu font chính không tải xong trong thời gian này, font dự phòng được sử dụng vĩnh viễn cho phiên làm việc đó. Font chính chỉ được tải nếu trình duyệt đánh giá kết nối mạng đủ nhanh. Giá trị này phù hợp cho người dùng di động hoặc kết nối chậm, nơi tốc độ hiển thị nội dung được ưu tiên hàng đầu.
Cách cấu hình font display trong CSS
Việc cấu hình font display được thực hiện trực tiếp trong file CSS hoặc trong khai báo @font-face.
Cấu hình trong @font-face
Cách phổ biến nhất là thêm thuộc tính font-display vào khối @font-face. Mỗi font chữ cần được khai báo riêng với giá trị font-display tương ứng.
Ví dụ cấu hình font display với giá trị swap cho font Google Fonts:
Khi sử dụng Google Fonts, family=Roboto:wght@400;700&display=swap
Cấu hình trong CSS global
Bạn cũng có thể áp dụng font-display cho toàn bộ font chữ trên website bằng cách sử dụng quy tắc CSS global. Tuy nhiên, cách này chỉ hoạt động nếu font được khai báo trong @font-face mà không có thuộc tính font-display riêng.
Google Fonts cung cấp tham số display trong URL để kiểm soát hành vi font-display. Các giá trị hỗ trợ gồm auto, block, swap, fallback, optional. Tham số này được thêm vào cuối URL trước khi nhúng vào website.
Ví dụ các cách cấu hình font display cho Google Fonts:
display=swap: Hiển thị font dự phòng ngay lập tức
display=block: Ẩn văn bản trong 3 giây chờ font chính
display=fallback: Chờ 100ms, sau đó hiển thị font dự phòng
display=optional: Chờ 100ms, dùng font dự phòng nếu không tải kịp
Khi nhúng Google Fonts qua link tag, bạn chỉ cần thêm tham số display vào URL. Ví dụ:
Việc áp dụng cách cấu hình font display phù hợp mang lại nhiều lợi ích cho cả hiệu suất website và trải nghiệm người dùng.
Thời gian hiển thị nội dung đầu tiên được cải thiện rõ rệt. Khi sử dụng giá trị swap, văn bản xuất hiện ngay lập tức với font dự phòng, giúp người dùng bắt đầu đọc nội dung mà không phải chờ đợi. Điều này làm giảm tỷ lệ thoát trang và tăng thời gian tương tác.
Điểm số Core Web Vitals được cải thiện, đặc biệt là Largest Contentful Paint (LCP). Google sử dụng LCP như một yếu tố xếp hạng, và việc hiển thị văn bản nhanh hơn giúp cải thiện chỉ số này. Các website cấu hình font display swap thường đạt điểm LCP tốt hơn so với website sử dụng giá trị auto hoặc block.
Trải nghiệm người dùng trên thiết bị di động được tối ưu. Kết nối mạng di động thường chậm và không ổn định, việc chờ font chính tải có thể khiến người dùng rời bỏ trang. Cấu hình font display với giá trị optional hoặc swap giúp nội dung hiển thị ngay lập tức trên mọi thiết bị.
Hạn chế và rủi ro khi cấu hình font display
Mặc dù cấu hình font display mang lại nhiều lợi ích, nhưng cũng tồn tại một số hạn chế cần cân nhắc.
Hiện tượng FOUT có thể gây mất thẩm mỹ tạm thời. Khi sử dụng giá trị swap, người dùng thấy font dự phòng trước khi font chính được tải xong. Sự thay đổi font đột ngột có thể gây khó chịu nếu font dự phòng và font chính có kích thước hoặc khoảng cách khác nhau.
Font dự phòng không phù hợp có thể làm hỏng bố cục trang. Nếu font dự phòng có chiều rộng ký tự khác biệt lớn so với font chính, văn bản có thể bị nhảy layout khi font chính được tải. Điều này ảnh hưởng đến Cumulative Layout Shift (CLS), một chỉ số Core Web Vitals quan trọng.
Giá trị optional có thể khiến font chính không bao giờ được tải trên một số thiết bị. Trình duyệt quyết định dựa trên tốc độ kết nối và lịch sử duyệt web, điều này có thể dẫn đến việc font thương hiệu không xuất hiện trên một số phiên làm việc.
So sánh các giá trị font display trong thực tế
Để chọn cách cấu hình font display phù hợp, cần hiểu rõ sự khác biệt giữa các giá trị trong điều kiện thực tế.
Tiêu chí
swap
fallback
optional
block
Thời gian hiển thị văn bản
Ngay lập tức
100ms
100ms
3 giây
Khả năng hiển thị font chính
Luôn luôn
Cao
Thấp
Cao
Ảnh hưởng đến LCP
Tích cực
Tích cực
Rất tích cực
Tiêu cực
Ảnh hưởng đến CLS
Có thể cao
Trung bình
Thấp
Thấp
Phù hợp cho font thương hiệu
Có
Có
Không
Có
Ứng dụng thực tế cách cấu hình font display cho từng loại website
Mỗi loại website có yêu cầu khác nhau về hiệu suất và thẩm mỹ, do đó cách cấu hình font display cần được điều chỉnh phù hợp.
Website thương mại điện tử
Đối với website bán hàng, tốc độ hiển thị sản phẩm và nội dung là yếu tố sống còn. Sử dụng giá trị swap cho tất cả font chữ, ngoại trừ font hiển thị tên thương hiệu có thể dùng block. Cấu hình font display swap giúp khách hàng đọc thông tin sản phẩm ngay lập tức, giảm tỷ lệ thoát và tăng tỷ lệ chuyển đổi.
Blog và website nội dung
Blog cần ưu tiên trải nghiệm đọc. Sử dụng giá trị swap cho font nội dung chính để đảm bảo văn bản hiển thị nhanh. Font tiêu đề có thể dùng fallback để cân bằng giữa thẩm mỹ và hiệu suất. Cách cấu hình font display này giúp người đọc tiếp cận nội dung ngay mà không bị gián đoạn.
Website thương hiệu cao cấp
Các website tập trung vào thương hiệu có thể chấp nhận thời gian chờ ngắn để đảm bảo font chính xuất hiện. Sử dụng giá trị block cho font chính và swap cho các font phụ. Tuy nhiên, cần đảm bảo font dự phòng có kích thước tương tự để giảm thiểu layout shift.
Website di động và PWA
Progressive Web App và website di động cần tối ưu hiệu suất tối đa. Sử dụng giá trị optional cho tất cả font chữ. Cách cấu hình font display này đảm bảo nội dung hiển thị nhanh nhất có thể, font chính chỉ được tải khi kết nối mạng đủ mạnh.
Sai lầm thường gặp khi cấu hình font display
Nhiều nhà phát triển mắc phải những sai lầm phổ biến khi áp dụng font-display, dẫn đến hiệu suất không được cải thiện hoặc thậm chí tệ hơn.
Không khai báo font-display trong @font-face là sai lầm phổ biến nhất. Khi không khai báo, trình duyệt sử dụng giá trị auto mặc định, gây ra FOIT kéo dài. Luôn thêm font-display vào mỗi khai báo @font-face để kiểm soát hành vi.
Sử dụng font dự phòng không phù hợp với font chính. Font dự phòng cần có kích thước và khoảng cách tương tự font chính để giảm layout shift. Sử dụng font system-ui hoặc font có sẵn trên hệ điều hành giúp giảm thiểu sự khác biệt.
Áp dụng font-display cho font icon. Font icon thường có kích thước nhỏ và không ảnh hưởng nhiều đến trải nghiệm đọc. Sử dụng font-display block cho font icon có thể gây ẩn icon trong vài giây. Tốt nhất nên sử dụng SVG icon thay vì font icon để tránh vấn đề này.
Không kiểm tra hiệu suất sau khi cấu hình. Sau khi áp dụng font-display, cần kiểm tra lại các chỉ số Core Web Vitals bằng Google PageSpeed Insights hoặc Lighthouse. Đôi khi việc thay đổi font-display có thể ảnh hưởng đến CLS nếu font dự phòng không được chọn cẩn thận.
Lưu ý quan trọng khi cấu hình font display
Để đạt hiệu quả tối ưu khi cấu hình font display, cần lưu ý một số điểm quan trọng sau đây.
Luôn sử dụng định dạng font hiện đại như WOFF2 để giảm kích thước file và tăng tốc độ tải. WOFF2 có tỷ lệ nén tốt hơn WOFF và TTF, giúp font tải nhanh hơn đáng kể. Kết hợp font-display swap với WOFF2 là giải pháp tối ưu cho hầu hết website.
Preload font chính để tăng tốc độ tải. Sử dụng thẻ link rel=”preload” cho font chính giúp trình duyệt tải font sớm hơn trong quá trình render trang. Kết hợp preload với font-display swap giúp font chính xuất hiện nhanh hơn, giảm thời gian FOUT.
Kiểm tra font dự phòng trên nhiều trình duyệt và hệ điều hành. Mỗi hệ điều hành có bộ font dự phòng khác nhau, cần đảm bảo font dự phòng hiển thị tốt trên Windows, macOS, iOS và Android. Sử dụng font stack với nhiều font dự phòng để tăng khả năng tương thích.
Theo dõi hiệu suất thường xuyên sau khi cấu hình. Sử dụng Google Search Console và PageSpeed Insights để theo dõi các chỉ số Core Web Vitals. Nếu phát hiện CLS tăng cao, cần điều chỉnh font dự phòng hoặc chuyển sang giá trị fallback.
Câu hỏi thường gặp về cách cấu hình font display
Font display swap có ảnh hưởng đến SEO không?
Có, font-display swap ảnh hưởng tích cực đến SEO thông qua việc cải thiện Core Web Vitals. Google sử dụng LCP và CLS làm yếu tố xếp hạng, và font-display swap giúp cải thiện cả hai chỉ số này. Tuy nhiên, cần kết hợp với font dự phòng phù hợp để tránh layout shift.
Có nên sử dụng font display block cho font thương hiệu không?
Có thể sử dụng block cho font thương hiệu nếu bạn chấp nhận thời gian chờ 3 giây. Tuy nhiên, cần cân nhắc trải nghiệm người dùng trên kết nối chậm. Nếu font thương hiệu có kích thước nhỏ, nên sử dụng swap để tránh ẩn văn bản quá lâu.
Làm thế nào để giảm layout shift khi dùng font display swap?
Để giảm layout shift, chọn font dự phòng có kích thước và khoảng cách tương tự font chính. Sử dụng font system-ui hoặc font có sẵn trên hệ điều hành. Ngoài ra, có thể sử dụng font-display fallback thay vì swap để giảm thời gian FOUT.
Font display có hoạt động trên tất cả trình duyệt không?
Font-display được hỗ trợ trên tất cả trình duyệt hiện đại bao gồm Chrome, Firefox, Safari, Edge và Opera. Trên các trình duyệt cũ không hỗ trợ, thuộc tính này bị bỏ qua và trình duyệt sử dụng hành vi mặc định.
Có cần cấu hình font display cho từng font riêng lẻ không?
Có, mỗi font chữ cần được cấu hình font-display riêng trong khai báo @font-face. Tuy nhiên, khi sử dụng Google Fonts qua URL, tham số display được áp dụng cho tất cả font trong cùng một request.
Kết luận
Cách cấu hình font display là kỹ thuật quan trọng trong tối ưu hiệu suất website hiện đại. Việc chọn đúng giá trị font-display giúp cải thiện thời gian hiển thị nội dung, nâng cao điểm số Core Web Vitals và mang lại trải nghiệm người dùng tốt hơn. Giá trị swap là lựa chọn an toàn cho hầu hết website, trong khi fallback và optional phù hợp cho các trường hợp cần cân bằng giữa thẩm mỹ và hiệu suất. Luôn kiểm tra hiệu suất sau khi cấu hình và điều chỉnh font dự phòng phù hợp để đạt kết quả tối ưu.
