Sửa lỗi Flash of Invisible Text (FOIT) trong WordPress

Nếu bạn phân tích website thông qua Google PageSpeed Insights, bạn có thể thấy lỗi như “Đảm bảo văn bản vẫn hiển thị trong khi tải phông chữ web / Ensuare text remains visible during web font load“. Trong bài viết này tôi sẽ nêu nguyên nhân gốc rẽ của vấn đề trên và cách để sửa nó.

lỗi hiển thị văn bản trong khi tải web font

Ở trên là thông báo về dùng font Google, còn bên dưới là font tải từ hosting của bạn:

đảm bảo hiển thị phông chữ web

Cách phông chữ hoạt động trong trình duyệt?

Trước khi sửa lỗi này, chúng ta cần phải hiểu cách phông chữ hoạt động trong trình duyệt như thế nào đã.

Phông chữ là một file có phần mở rộng như woff2 (tốt nhất), woff, ttt, otf, vân vân. Những file này được tải thông qua CSS với @font-face. Đoạn mã sẽ trông giống như thế này:

@font-face {
font-family: 'Lobster'; 
font-style: normal; 
font-weight: 400; 
src: local('Lobster Regular'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v21/neILzCirqoswsqX9zo-mM5Ez.woff2) format('woff2'); 
}

Với cụm mã trên, giờ bạn có thể áp dụng phông chữ đó cho đoạn văn bản (paragraph) hoặc các thẻ HTML tương tự, sử dụng cú pháp sau:

p {
font-family: Lobster, sans-serif; 
}

Điều này nói với trình duyệt rằng nó phải áp dụng phông chữ Lobster nếu có thể (mà nó vừa tải về), còn không được thì sử dụng phông chữ mặc định kiểu sans-serif (không chân) có sẵn trên máy tính hoặc di động của người dùng.

Hiện tượng FOIT nghĩa là như thế nào?

Để hiểu rõ hơn về nguyên nhân của lỗi “Đảm bảo văn bản hiển thị trong khi phông chữ web được tải“, chúng ta cần hiểu rõ hơn về cái gọi là “Flash of Invisible Text“.

Khi trình duyệt thấy một phông chữ tùy chỉnh được áp dụng cho văn bản, nó sẽ đợi cho đến khi font được tải xong. Cho đến khi phông chữ chưa tải xong thì văn bản sẽ bị ẩn. Một khi nó tải xong, phông chữ tùy chỉnh được áp dụng ngay lập tức. Điều này được gọi là hiện tượng FOIT (hiểu nôm na là văn bản đột nhiên xuất hiện).

Để cảm nhận rõ hơn hiện tượng này trong thực tế, bạn hãy xem kỹ video sau đây (video của tác giả Gijo):

Làm thế nào để sửa lỗi FOIT?

Sửa lỗi FOIT tương đương với việc bạn sửa lỗi “đảm bảo văn bản vẫn hiển thị trong khi phông chữ web tải về”.

@font-face có một thuộc tính gọi là font-display và có thể có các giá trị như auto, block, swap, fallback, optional. Cái mà chúng là muốn sử dụng là swap. Đoạn mã sẽ trông như thế này font-display: swap;

font-display: swap nói với trình duyệt rằng hãy sử dụng font mặc định cho đến khi font tải xong, sau đó mới chuyển font hiện tại sang font tùy chỉnh.

Cú pháp đầy đủ trông giống như thế này:

@font-face { 
font-family: 'Lobster'; 
font-display: swap; // ----> đây là đoạn dùng để sửa lỗi! 
font-style: normal; font-weight: 400; 
src: local('Lobster Regular'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v21/neILzCirqoswsqX9zo-mM5Ez.woff2) format('woff2'); }

Cách để sửa lỗi “đảm bảo văn bản vẫn hiển thị trong khi web font tải về” trong WordPress?

Sửa Google Fonts

Google Fonts (ban đầu) không thêm font-display: swap vào phông chữ của họ. Tuy nhiên, kể từ Google I/O 19, họ giờ đã hỗ trợ một tham số truy vấn mới để thiết lập font-display.

Nếu bạn là nhà phát triển theme, hoặc nếu bạn thoải mái với chuyện chỉnh sửa mã, bạn chỉ cần thêm &display=swap vào vị trí cuối của URL Google Font. Xem ví dụ bên dưới.

thêm mã vào link font Google

Nhưng nếu bạn không thoải mái với các đoạn mã hoặc nhà phát triển theme của bạn không cập nhật điều này, bạn vẫn khắc phục được vấn đề trên thông qua plugin mà tôi phát triển (của tác giả Gijo Varghese, không phải của người dịch) có tên Swap Google Fonts Display. Nó sẽ tìm kiếm bất kỳ đoạn script Google Fonts nào và sẽ nối thêm display=swap vào URL.

Sửa các font khác

Có thể các các font khác chẳng hạn như font-awesome hoặc font icon được chèn vào bởi plugin hoặc bản thân theme.

Không may, không có cách dễ dàng hoặc plugin để khắc phục chuyện này. Cách duy nhất ở thời điểm hiện tại là vào thẳng Plugin > Sửa Plugin (Plugin Editor) và chọn plugin mà chèn phông chữ vào (phân tích trang của bạn thông qua Google PageSpeed Insights).

Sau đó tìm file CSS có đoạn mã @font-face bên trong và thêm font-display: swap; vào bên trong nó.

sửa @font-face

Mẹo: Sử dụng plugin String Locator để tìm tất cả file bao gồm “@font-face“.

Kết luận

Mặc dù đây chỉ là lỗi dễ sửa, nhưng nó đem lại trải nghiệm người dùng tốt hơn nhiều. Đặc biệt nếu họ sử dụng thiết bị di động có kết nối chậm. Đó là lý do vì sao các công cụ như Google PageSpeed Insights khuyến khích sửa lỗi này.

Bonus

Một cách khác để hạn chế hiện tượng phải chờ font tải xong rồi mới hiển thị văn bản, đó là ưu tiên tải font trước. Bạn có thể chủ động làm điều này bằng thẻ link preload– nó chuyên được dùng để ưu tiên tải các tài nguyên quan trọng trước, và hiện cũng được nhiều trình duyệt hiện đại hỗ trợ.

(Dịch từ bài viết: How to Fix Flash of Invisible Text (FOIT) in WordPress, tác giả: Gijo Varghese, Website: WPSpeedMatters)

Leave a Comment