Tối ưu plugin Contact Form 7 để tăng tốc độ load

Tối ưu plugin Contact Form 7 để tăng tốc độ load cho website WordPress của bạn.

Với hơn 5 triệu website đang kích hoạt (tính tới thời điểm mà tôi đăng bài viết này), Contact Form 7 chắc chắn là plugin tạo biểu mẫu liên hệ phổ biến nhất trên nền tảng WordPress. Nhưng phổ biến không đồng nghĩa với tối ưu, đặc biệt là về tốc độ load. Contact Form 7 được đánh giá là khá nặng nề và gây nhiều ảnh hưởng tiêu cực tới tốc độ load của website. Nếu điều kiện cho phép, các bạn nên xem xét chuyển sang sử dụng một plugin khác, chẳng hạn như Forminator hoặc WPForms. Còn nếu bạn đã quá quen với Contact Form 7 hoặc vì lý do nào đó không dứt ra được thì ngay sau đây là một thủ thuật nhỏ để tối ưu nó.

Tham khảo thêm:

• Tinh giản Yoast SEO giúp website của bạn nhẹ hơn
• Tinh giản WooCommerce giúp website của bạn nhẹ hơn

Vấn đề của plugin Contact Form 7

Sở dĩ plugin Contact Form 7 gây ảnh hưởng xấu đến tốc độ load của website bởi vì các nguyên nhân sau:

• Các file tài nguyên của Contact Form 7 (CSS, JS…) mặc định tải trên tất cả các trang, kể cả những trang các bạn không chèn biểu mẫu liên hệ của nó. Điều đó là không cần thiết và vô tình khiến cho page-size và số lượng request tăng lên => tăng thời gian tải trang.
• Trong một số trường hợp, plugin Contact Form 7 còn có thể tạo ra các file kết thúc bằng refill. Những file này thường có thời gian tải rất lâu, ảnh hưởng nhiều đến tổng thời gian tải của trang.

Tối ưu plugin Contact Form 7

Tùy thuộc vào theme mà bạn đang dùng để áp dụng cho phù hợp:

Đối với theme Paradise

1. Hãy cập nhật theme Paradise lên phiên bản 6.6.8 hoặc mới hơn.

2. Truy cập Giao diện => Tùy biến => Thiết lập giao diện => Tối ưu tốc độ => Chuyển mục Tối ưu plugin CF7 sang trạng thái Có rồi lưu lại.

Đối với các theme khác

Có 2 cách để làm điều này, nguyên lý và hiệu quả hoàn toàn giống nhau nên các bạn có thể tùy chọn theo ý thích:

Sử dụng plugin

Tất cả những gì các bạn cần làm là cài đặt và kích hoạt một plugin có tên là Speed up Contact Form 7 (download). Plugin này chỉ bao gồm 1 file PHP duy nhất với vài dòng code nên các “anti-plugin thủ” hoàn toàn không phải lo lắng nó làm chậm web nhé.

Xóa cache website (nếu có) và kiểm tra kết quả.

Sử dụng code

Chèn đoạn code sau đây vào file functions.php của theme hoặc child theme mà bạn đang sử dụng. Các bạn cũng có thể sử dụng plugin Code Snippets để chèn nhằm tránh nó bị xóa mất khi cập nhật theme.

function wpcb_contact_form_7() {
    $load_scripts = false;
    if( is_singular() ) {
    	$post = get_post();
    	if( has_shortcode($post->post_content, 'contact-form-7') ) {
        	$load_scripts = true;
    	}
    }
    if( ! $load_scripts ) {
        wp_dequeue_script( 'contact-form-7' );
	wp_dequeue_script( 'google-recaptcha' );
	wp_dequeue_script( 'wpcf7-recaptcha' );
        wp_dequeue_script( 'wpcf7-redirect-script' );
        wp_dequeue_style( 'contact-form-7' );
	wp_dequeue_style( 'cf7-confirmation-addon' );
        wp_dequeue_style( 'wpcf7-redirect-script-frontend' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpcb_contact_form_7', 99 );

Xóa cache website (nếu có) và kiểm tra kết quả. Thật đơn giản phải không nào? Chúc các bạn thành công!

Bạn có đang sử dụng plugin Contact Form 7 trên website WordPress của mình hay không? Bạn đã làm gì để tối ưu nó? Hãy chia sẻ với chúng tôi phương pháp của bạn thông qua khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)