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:

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 Kiến càng tốc độ đã được cải thiện thêm nữa:

---

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.