Contact Form 7 là plugin phổ biến mà hầu hết các website hiện nay đều sử dụng để tạo biểu mẫu thu thập dữ liệu. Tuy nhiên, nó có một bất cập là kể cả trên các page không có form vẫn tải plugin. Điều này làm chậm website đi ít nhiều, và bài viết này mình sẽ hướng dẫn các bạn tối ưu hóa plugin CF7 giúp tải trang nhanh hơn.

Tại sao bạn nên tối ưu hóa Plugin Contact Form 7?

Plugin Contact Form 7 là một plugin miễn phí phổ biến để tạo biểu mẫu trên WordPress, tuy nhiên, mã nguồn của nó không được tối ưu hóa hoàn toàn (điều này dễ hiểu, vì nó là miễn phí). Khi bạn cài đặt Plugin Contact Form 7, nó tải các tệp JavaScript và CSS trên mọi trang, kể cả trên những trang chưa có biểu mẫu. Điều này có thể làm cho trang web của bạn trở nên chậm hơn và tốn tài nguyên máy chủ không cần thiết.

Tối ưu hóa Plugin Contact Form 7 để Tăng Tốc Độ Trang Web trên WordPress - Ảnh 2 — File của plugin CF7 luôn tải trên các trang không có form.

Hướng dẫn tối ưu hóa Plugin Contact Form 7

Dưới đây là cách bạn có thể tối ưu hóa Plugin Contact Form 7 để nó chỉ tải các tệp CSS và JavaScript trên các trang chứa biểu mẫu. Bạn chỉ cần thêm đoạn mã sau vào file functions.php của trang web của bạn (tốt nhất là sử dụng child theme để tránh mất mã khi theme cập nhật). Sau khi thêm mã, đừng quên xóa cache:

// Tối ưu hóa Plugin Contact Form 7
function optimize_contact_form_7_assets() {
    if ( ! is_page( 'ten-trang-chua-bieu-mau' ) ) {
        wp_dequeue_script( 'contact-form-7' );
        wp_dequeue_style( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'optimize_contact_form_7_assets' );

// Tối ưu hóa Plugin Contact Form 7

function optimize_contact_form_7_assets() {

if ( ! is_page( 'ten-trang-chua-bieu-mau' ) ) {

wp_dequeue_script( 'contact-form-7' );

wp_dequeue_style( 'contact-form-7' );

}

add_action( 'wp_enqueue_scripts', 'optimize_contact_form_7_assets' );

Kiểm tra lại tải trên các trang không có biểu mẫu

Sau khi thêm mã này, bạn có thể kiểm tra xem Plugin Contact Form 7 còn tải các tệp CSS và JavaScript trên các trang không có biểu mẫu không (xem hình ảnh dưới đây):

Tối ưu hóa Plugin Contact Form 7 để Tăng Tốc Độ Trang Web trên WordPress - Ảnh 1 — File css của plugin không còn tải trên các page không có form.

Tối ưu hóa Plugin Contact Form 7 để Tăng Tốc Độ Trang Web trên WordPress - Ảnh 3 — File js của plugin không còn tải trên các page không có form.

Kiểm tra tải trên trang có biểu mẫu

Bây giờ, bạn cũng có thể kiểm tra xem Plugin Contact Form 7 còn tải các tệp CSS và JavaScript trên các trang có biểu mẫu không (xem hình ảnh dưới đây):

Tối ưu hóa Plugin Contact Form 7 để Tăng Tốc Độ Trang Web trên WordPress - Ảnh 4 — File js của plugin sẽ vẫn tải trên các page có form.

Các bạn đã thấy phiên bản 5.7.6 của Plugin Contact Form 7 mình cài đặt trước đó đã ngừng tải các tệp không cần thiết, đúng không? (Bạn có thể kiểm tra bằng cách rê chuột vào từng tệp).

Như vậy, website của bạn giờ đây sẽ giảm bớt thời gian tải plugin CF7 khi page không có form. Áp dụng để xem thử kết quả xem sao nhé!!

Nguồn: https://webantam.com/toi-uu-plugin-contact-form-7/