2 tip nhỏ tối ưu hóa hiệu suất hơn nữa cho theme GeneratePress

GeneratePress là theme chiếm được sự tin cậy của rất nhiều quản trị website quan tâm đến tốc độ nhờ được tối ưu cao, dễ dùng, giá cả thân thiện & cộng đồng hỗ trợ lớn.

Trước có 2 lỗi mà tôi loay hoay mãi mà không sửa được liên quan đến việc không thiết lập được width & height trong mã nguồn cho logo & font grenerapress.woff2 cần tải trước. Đây là cảnh báo mà Google PageSpeed Insights đưa ra. Ví dụ trên một trang:

Đây là cảnh báo về font chữ
Đây là cảnh báo về font chữ
logo không có width và height rõ ràng
Đây là cảnh báo liên quan đến kích cỡ logo không được thiết lập trong mã nguồn

Cách khắc phục liên quan đến font generatepress.woff2

Trước tôi cứ loay hoay tìm đến CSS của generatepress.woff2 để thêm thuộc tính font-display:swap; vào để sửa như hướng dẫn chung để tránh lỗi này. Đúng là nhìn chung cách này sẽ giải quyết được vấn đề “Đảm bảo văn bản vẫn hiển thị trong khi tải font chữ web“, nhiều website tôi làm đã thành công, tuy nhiên không hiểu sao không áp dụng được với GeneratePress.

Khi thử tra cứu thông tin này từ cộng đồng hỗ trợ cho GeneratePress thì phát hiện cách giải quyết không thể dễ dàng hơn được nữa! Bạn chỉ việc vào Customizer > General > Icon Type – chuyển sang SVG

Lỗi này sẽ hết.


Cách khắc phục liên quan đến width, height phải được thiết lập trong mã nguồn của logo

Logo được thiết lập width, height trong CSS của GeneratePress rồi, nhưng có vẻ GSI yêu cầu phải có các thuộc tính này trong mã nguồn để hạn chế tối đa ảnh hưởng của CLS (cumulative layout shift), tức là hạn chế ảnh hưởng của việc thay đổi layout trong quá trình tải trang.

Tương tự để giải quyết lỗi này tôi cũng tham khảo từ cộng đồng hỗ trợ của GP. Bạn chỉ cần thêm đoạn mã PHP sau vào plugin Code Snippets (bạn nhớ active đoạn mã trong plugin):

add_filter( 'generate_mobile_header_logo_output', function( $output ) {
    if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
        return $output;
    }

    $settings = wp_parse_args(
        get_option( 'generate_menu_plus_settings', array() ),
        generate_menu_plus_get_defaults()
    );

    return sprintf(
        '<div class="site-logo mobile-header-logo">
            <a href="%1$s" title="%2$s" rel="home">
                <img src="%3$s" width="150" height="150" alt="%4$s" />
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href', home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
        esc_url( apply_filters( 'generate_mobile_header_logo', $settings['mobile_header_logo'] ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

add_filter( 'generate_logo_attributes', function($array){
	$img_attr = array('width' => '150px', 'height' => '150x',);
	return array_merge($array, $img_attr);
},15,1);

Lưu ý là bạn thay các con số liên quan đến width, height tương ứng với kích cỡ logo thực tế bạn đang dùng.

2 lỗi đã được khắc phục khi tôi áp dụng các giải pháp trên, ví dụ với trang Speed Family tốc độ đã được cải thiện thêm nữa:

tốc độ đã được cải thiện thêm

Kết luận

Điều thú vị nhất thông qua trải nghiệm này của tôi không phải là giúp tăng hiệu suất GeneratePress lên mà là cộng đồng hỗ trợ cho theme thực sự rất quan trọng, vì có những lỗi mà chỉ có người phát triển ra nó hoặc những ai sử dụng lâu, có khả năng mới biết cách khắc chế. Một mình bạn lọ mọ có thể sẽ không bao giờ tìm ra cách, điển hình như cái font-display:swap; mà tôi nói ở trên.

2 thoughts on “2 tip nhỏ tối ưu hóa hiệu suất hơn nữa cho theme GeneratePress”

Leave a Comment