[Flatsome] Khắc phục lỗi font-display fl-icon trong theme Flatsome
Một trong những vấn đề mà khi audit website sử dụng giao diện Flatsome là lỗi fl-icon bị hiển thị không tốt, thông qua thuộc tính font-display: block. Trong bài viết này, hnitmedia sẽ đưa ra giải pháp xử lý triệt để lỗi trên.
Vấn đề audit Page Speed Flatsome thường gặp: Font chữ fl-icon
Đây là một bài toán đơn giản nhưng không được fix trực tiếp từ đội ngũ phát triển theme Flatsome: Tất cả font load trong web đều phải tải trước, nhưng cần ưu tiên thuộc tính font-display: swap để giảm độ trễ của font tải, nhất là khi đây là hạng mục quan trọng trong Tối ưu Website.
Thông báo từ trên công cụ test Page Speed:
Lỗi: Font display – Est savings of 220ms
Consider setting font-display to swap or optional to ensure text is consistently visible. swap can be further optimized to mitigate layout shifts with font metric overrides.
Trong khi xem code của Flatsome, dưới đây là code mặc định để render ra.
<style id='flatsome-main-inline-css' type='text/css'>
@font-face {
font-family: "fl-icons";
font-display: block;
src: url(https://codetot.vn/wp-content/themes/flatsome/assets/css/icons/fl-icons.eot?v=3.19.15);
src: url(https://codetot.vn/wp-content/themes/flatsome/assets/css/icons/fl-icons.eot#iefix?v=3.19.15) format("embedded-opentype"),
url(https://codetot.vn/wp-content/themes/flatsome/assets/css/icons/fl-icons.woff2?v=3.19.15) format("woff2"),
url(https://codetot.vn/wp-content/themes/flatsome/assets/css/icons/fl-icons.ttf?v=3.19.15) format("truetype"),
url(https://codetot.vn/wp-content/themes/flatsome/assets/css/icons/fl-icons.woff?v=3.19.15) format("woff"),
url(https://codetot.vn/wp-content/themes/flatsome/assets/css/icons/fl-icons.svg?v=3.19.15#fl-icons) format("svg");
}
</style>Vấn đề: font-display: block là tác nhân chính gây ra issue này.
Khi hnitmedia nghiên cứu vào sâu hơn, thực tế là:
Không thể sử dụng
wp_dequeue_style()như các function thông thường hay ghi đè vì phần CSS này được render trongflatsome-main. Nếu can thiệp nhầm thì có thể dẫn tới website bị mất CSS toàn bộ.
Như vậy, cách thông thường không khả thi, vậy cần inspect code vào các hook của Flatsome để điều chỉnh.
Hướng dẫn cách fix code xịn vấn đề font fl-icon trong theme Flatsome
Mình tìm thấy 1 global variables $wp_styles có thể được ghi đè trong code, và thấy phần extra được theme Flatsome thêm vào.
Sau khi debug và tìm phương án, cách lựa chọn là xử lý replace font-display: block sang font-display: swap là đủ, mình không còn remove code vì có thể có dự án đang sử dụng nhiều icon Flatsome sẽ ảnh hưởng.
Code để fix, bạn thêm vào trong file functions.php:
/**
* Hotfix: Load fl-icon font display-swap - theme Flatsome
*
* @package codetot-optimization-scripts
* @author hnitmedia
* @since 0.0.4
* @link https://hnitmedia.com/flatsome-khac-phuc-loi-font-display-fl-icon-trong-theme-flatsome/
**/
function hnitmedia_flatsome_swap_font_display() {
global $wp_styles;
if ( isset( $wp_styles->registered['flatsome-main'] ) ) {
$inline_css = $wp_styles->registered['flatsome-main']->extra['after'];
if ( is_array( $inline_css ) && ! empty( $inline_css ) ) {
$inline_css_string = implode( '', $inline_css );
$modified_css_string = preg_replace(
'/(font-display:\s*)block/i',
'$1swap',
$inline_css_string
);
$wp_styles->registered['flatsome-main']->extra['after'] = array( $modified_css_string );
}
}
}
add_action( 'wp_print_styles', 'hnitmedia_flatsome_swap_font_display', 99 );Sau khi thử nghiệm đoạn code trên, bạn cần xoá cache của plugin (purge/delete cache), thực hiện truy cập lại website một lần rồi mới test trên công cụ Page Speed nhé.
nguồn: codetot.vn
