Chưa có sản phẩm trong giỏ hàng.
Thủ Thuật Wordpress, Tối Ưu Tốc Độ Website
Sửa lỗi Hiển Thị Phông Chữ trên PageSpeed Insights
Cách Khắc Phục Cảnh Báo “Hiển Thị Phông Chữ” Trên PageSpeed Insights (Ensure text remains visible during webfont load) như thế nào? Sửa lỗi này có khó không?
Nếu bạn đang tối ưu tốc độ website và gặp cảnh báo “Hiển thị phông chữ” hoặc “Ensure text remains visible during webfont load” trên PageSpeed Insights, thì đây là hướng dẫn chuẩn nhất, dễ hiểu nhất và đã được kiểm chứng trên thực tế.
Bài viết phù hợp cho mọi website WordPress, đặc biệt là các theme dùng icon font như Flatsome, Woodmart, Astra, Elementor. Hãy cùng taduyphu.com tham khảo bài viết bên dưới xem có dùng bạn đang cần không nhé.
XEM NHANH
Ẩn
Vì sao PageSpeed Insight báo lỗi “Hiển thị phông chữ”?
Google báo lỗi này khi font chữ hoặc icon font bị:
- Tải chậm
- Không có
font-display: swap - Bị chặn hoặc load sai
- Bị 404 nhưng theme vẫn cố load
Kết quả:
- Điểm PageSpeed Insight giảm mạnh
- LCP/CLS xấu
- Trải nghiệm Mobile giảm
Ngay cả khi bạn bật tối ưu CSS trong LiteSpeed Cache, cảnh báo vẫn tồn tại vì theme Flatsome không tự thêm font-display cho file fl-icons.woff2.
Giải pháp chuẩn nhất để khắc phục cảnh báo hiển thị phông chữ
Đây là cách hiệu quả nhất, không cần plugin, không gây xung đột, bền vững khi update theme và có thể áp dụng cho mọi website WordPress, mà taduyphu.com đã khắc phục được và chia sẻ lại cho anh em.
Bước 1: Lấy đúng URL file font của website
Mở website → Nhấn F12 → Tab Network → tìm woff2 → reload trang.
Bạn sẽ thấy đường dẫn tương tự:
https://yourdomain.com/wp-content/themes/flatsome/assets/css/icons/fl-icons.woff2?v=3.16.2
Copy đúng URL (không đoán) (Chuột phải – Sao chép – Sao chép URL).
Bước 2: Thêm đoạn code vào functions.php của Child Theme
Đây là đoạn code taduyphu đã test thành công, giúp thêm font-display: swap đúng chuẩn, load sau CSS của theme:
// Thêm CSS @font-face inline vào <head> để đảm bảo load sau CSS của parent
function taduyphu_add_fl_icons_font_display() {
?>
<style>
@font-face{
font-family: 'fl-icons';
src: url('https://fujaco.vn/wp-content/themes/flatsome/assets/css/icons/fl-icons.woff2?v=3.16.2') format('woff2');
font-display: swap;
font-weight: normal;
font-style: normal;
}
</style>
<?php
}
add_action( 'wp_head', 'taduyphu_add_fl_icons_font_display', 100 );
Chỉ cần thay URL font màu đỏ cho đúng với website của bạn.
Bước 3: Xóa toàn bộ cache
- LiteSpeed Cache → Purge All
- Nếu từng dùng OMGF → Clear Cache
- Nếu có CDN → Purge
Sau đó mở website bằng tab ẩn danh để kiểm tra.
Bước 4: Kiểm tra lại bằng PageSpeed Insight
Nếu làm đúng, bạn sẽ thấy:
- Cảnh báo “Hiển thị phông chữ” biến mất hoàn toàn
- Font icon load chỉ còn 10–20ms (thay vì 60–260ms)
- Điểm PageSpeed mobile tăng rõ rệt
- CLS giảm mạnh
Có cần dùng plugin OMGF để tối ưu font nữa không?
Không cần.
Cảnh báo này chủ yếu xuất phát từ icon font của theme, không phải Google Fonts. Plugin OMGF chỉ xử lý Google Fonts, nên:
- Dùng OMGF cũng không xóa cảnh báo
- Làm nặng site, tăng query
- Dễ xung đột LiteSpeed Cache
Giải pháp bằng functions.php ở trên là tối ưu nhất.
Có nên bật tùy chọn “Xóa bỏ Google Fonts” trong LiteSpeed Cache?
Không nên, trừ khi website không dùng Google Fonts.
Lý do:
- LiteSpeed sẽ chặn toàn bộ fonts.googleapis.com
- Một số theme cần Google Fonts → giao diện bị lỗi
- Có thể làm giảm điểm PageSpeed
Việc thêm font-display: swap cho icon font hoàn toàn không liên quan đến Google Fonts, nên không cần bật tính năng này.
Câu hỏi thường gặp (FAQ)
Cảnh báo ‘Hiển thị phông chữ’ trên PageSpeed Insights là gì?
Đây là cảnh báo xuất hiện khi trình duyệt phải chờ tải font web trước khi hiển thị chữ, gây chậm trải nghiệm người dùng. Google khuyến nghị thiết lập thuộc tính font-display để cải thiện tốc độ.
Nguyên nhân gây ra lỗi hiển thị phông chữ?
Lỗi chủ yếu do font web chưa có thuộc tính font-display, hoặc đang tải quá chậm khiến văn bản bị ‘ẩn’ (FOIT) hoặc nhảy chữ (FOUT).
Cách khắc phục nhanh lỗi ‘Hiển thị phông chữ’?
Thêm font-display: swap; vào @font-face trong CSS. Khi đó, trình duyệt sẽ hiển thị font dự phòng ngay lập tức và thay bằng font chính khi tải xong.
font-display: swap có ảnh hưởng đến SEO không?
Có. Việc tối ưu hiển thị phông chữ giúp cải thiện LCP, FCP và trải nghiệm người dùng. Đây là những yếu tố Google đánh giá điểm PageSpeed và SEO tổng thể.
Tôi có thể sửa lỗi này trong theme hoặc WordPress builder không?
Được. Hầu hết theme đều cho phép override file font CSS. Bạn chỉ cần mở file chứa @font-face hoặc dùng plugin như ‘OMGF’ để thêm font-display cho tất cả font.
Dùng Google Fonts có cần chỉnh font-display không?
Có, bạn nên thêm &display=swap vào link Google Fonts. Google đã hỗ trợ sẵn nhưng bạn vẫn cần kiểm tra lại vì không phải theme nào cũng kích hoạt.
Kết luận How to fix the “Ensure text remains visible during webfont load” warning
Để sửa lỗi Ensure text remains visible during webfont load và tăng điểm PageSpeed Insight, chỉ cần 4 bước:
- Tìm đúng URL file woff2 của theme
- Thêm @font-face + font-display: swap vào functions.php
- Purge cache (Xóa cache)
- Test PageSpeed lại.
Giải pháp này:
- Không cần plugin
- Không xung đột
- Hoạt động ổn định khi update theme
- Dễ copy sang website khác
Đây là cách tối ưu font chữ WordPress chuẩn nhất hiện nay để cải thiện tốc độ web, giảm CLS và tăng điểm PageSpeed Insight.
Cảm ơn bạn đã ở lại đến giây phút này để tham khảo Cách khắc phục sửa lỗi cảnh báo Hiển thị phông chữ của website wordpress khi test điểm PageSpeed Insights. Nếu bạn cảm thấy những chia sẻ này hữu ích và đúng thứ mình đang tìm kiếm, có thế Mời Phú ly cà phê thêm phần thú vị. Chúc bạn thành công.
Lưu lại để xem sau
