Tăng tốc các trang web sử dụng Contact Form 7

Xóa biểu mẫu liên hệ 7 reCaptcha JavaScript & CSS khi không cần thiết

Khi bạn sử dụng tích hợp reCaptcha của Biểu mẫu liên hệ 7, bạn sẽ thấy nội dung CSS và JavaScript được tham chiếu bởi mọi trang. Ngay cả các trang không chứa biểu mẫu CF7 cũng sẽ tham chiếu đến nội dung. Thao tác này sẽ kéo điểm tốc độ trang của bạn xuống trong Lighthouse và GTmetrix. Bằng cách thêm một chút mã vào tệp functions.php của bạn, chúng tôi có thể tăng tốc độ liên hệ từ các trang web dựa trên 7.

Trước khi bắt đầu, hãy đảm bảo rằng bạn đang sử dụng một chủ đề con tùy chỉnh để bạn có quyền truy cập vào tệp functions.php sạch của riêng mình.

Hợp lý

Việc cần làm là chỉ đưa các tệp có liên quan vào các trang mà bạn cần. Vì vậy, chúng ta cần tìm hiểu xem khi nào chúng ta thực sự cần những tài sản này. Cách đơn giản nhất để thực hiện việc này là chỉ định các ID trang trong một hằng số. Chúng tôi sẽ thực hiện việc này ở đầu tệp functions.php của chủ đề con tùy chỉnh của chúng tôi . như thế này:
// Page ID 123 page ID 456 both have Contact From 7 forms on them.
const HW_CF7_POST_IDS = array(123, 456); 
Bây giờ tất cả những gì chúng ta cần làm là kiểm tra xem Biểu mẫu liên hệ 7 (CF7) đã được cài đặt hay chưa. Nếu chúng tôi thấy rằng nó đã được cài đặt, hãy xóa nội dung CSS và JS nếu chúng tôi không hiển thị trang có một trong các biểu mẫu của chúng tôi.

Hãy viết mã

Trong thư mục của chủ đề con tùy chỉnh của bạn, hãy tạo một tệp mới có tên là functions-cf7.php và dán phần sau vào đó.
/**
 * Remove Contact Form 7 assets from posts/pages that don't need them.
 *
 * https://wp-tutorials.tech/optimise-wordpress/remove-contact-from-7-recaptcha-javascript-css-when-not-needed/
 *
 * Either define HW_CF7_POST_IDS as your contact form's Post ID, or set it to
 * an array of integer IDs if you've got multiple pages.
 *
 * const HW_CF7_POST_IDS = array(123); // << 123 is the post_id of your contact page.
 *
 * ...OR...
 *
 * hw_set_cf7_post_ids(123);
 */
// Block direct access.
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
function hw_set_cf7_post_ids($post_id = null) {
   if (!defined('HW_CF7_POST_IDS') && !is_null($post_id) && (is_integer($post_id) || is_array($post_id))) {
      define('HW_CF7_POST_IDS', $post_id);
   }
}
// Only execute our CF7 code if Contact Form 7 is actually installed.
if (class_exists('WPCF7')) {
   function hw_cf7_get_header() {
      if (defined('HW_CF7_POST_IDS')) {
         $cf7_post_ids = HW_CF7_POST_IDS;
         $are_cf7_assets_requried = false;
         $post_id = get_the_ID();
         if (is_int($cf7_post_ids)) {
            $are_cf7_assets_requried = ($cf7_post_ids === $post_id);
         } elseif (is_array($cf7_post_ids)) {
            $are_cf7_assets_requried = in_array($post_id, $cf7_post_ids);
         } else {
            // ...
         }
         if (!$are_cf7_assets_requried) {
            add_filter('wpcf7_load_js', '__return_false');
            add_filter('wpcf7_load_css', '__return_false');
         }
         // If logged-in, there's no need for CF7 reCaptcha.
         if (!$are_cf7_assets_requried || is_user_logged_in()) {
            remove_action('wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts');
         }
      } else {
         // If there's nothing in $cf7_post_ids then just lt
         // CF7 behave as it normally does.
      }
   }
   add_action('get_header', 'hw_cf7_get_header', 5);
   // Addons that make the CF7 styling a little nicer.
   function hw_wpcf7_enqueue_styles() {
      $css_file_name = 'cf7-addons.css';
      if (is_readable(trailingslashit(dirname(__FILE__)) . $css_file_name)) {
         wp_enqueue_style(
            'hw-cf7-addons-css',
            get_stylesheet_directory_uri() . '/' . $css_file_name
         );
      }
   }
   add_action('wpcf7_enqueue_styles', 'hw_wpcf7_enqueue_styles');
}
Bây giờ chúng ta chỉ cần tham khảo nó, vì vậy hãy thêm phần sau vào đâu đó gần đầu tệp functions.php của chủ đề con tùy chỉnh của bạn
// Speed-up non-CF7 form pages.
const HW_CF7_POST_IDS = array(123, 456); // << Replace with your Page ID(s)
require_once 'functions-cf7.php';

Thêm một số phong cách

Nếu bạn lướt qua mã, bạn sẽ thấy rằng chúng tôi sẽ kiểm tra xem có tệp có tên là cf7-addons.css hay không . Đây là nơi chúng tôi có thể đặt một số tinh chỉnh CF7, như thế này.
/**
 * Contact Form 7 Addons
 */
.wpcf7 {
   width: 100%;
}
.wpcf7 label {
   display: block;
}
.wpcf7 input[type='text'],
.wpcf7 input[type='email'],
.wpcf7 textarea {
   display: block;
   width: 100%;
}
.wpcf7-form-control .wpcf7-list-item {
   display: table;
}
.wpcf7-form-control .wpcf7-list-item > span,
.wpcf7-form-control .wpcf7-list-item > input {
   display: table-cell;
}
/* Uncomment this if you want to hide the reCaptcha badge */
/*
.grecaptcha-badge {
   display: none;
}
*/
Tệp này là tùy chọn - nếu nó không tồn tại trong chủ đề con tùy chỉnh của bạn thì chúng tôi sẽ không cố gắng tải nó. Ngoài ra, chúng tôi sẽ chỉ thử và tải nó trên các trang cần nội dung CF7 thông thường.

Kiểm tra và Triển khai

Nếu bạn xem qua các hàm-cf7.php, bạn sẽ thấy có một số thử nghiệm chúng tôi thực hiện trước khi xóa nội dung CF7. Người dùng đã đăng nhập phải luôn bị xóa reCaptcha - nếu ai đó đã đăng nhập vào trang web của bạn thì họ phải là người dùng hợp lệ.

Khi bạn đang thử nghiệm, bạn nên vô hiệu hóa mọi plugin thu nhỏ và bộ nhớ đệm trang, để chúng không bị vẩn đục.

  1. Đăng xuất khỏi trang web của bạn và chuyển đến trang biểu mẫu liên hệ của bạn. Bạn sẽ thấy huy hiệu reCaptcha ở dưới cùng bên phải.
  2. Bây giờ, hãy truy cập một trang không có biểu mẫu liên hệ… Huy hiệu reCaptcha không nên ở đó.
  3. Cuối cùng, đăng nhập và đi đến trang biểu mẫu liên hệ. Không nên có huy hiệu reCaptcha, vì chúng tôi đã đăng nhập.
Đó là nó. Nếu bạn đăng xuất khỏi trang web của mình và truy cập một trang mà không có biểu mẫu liên hệ trên đó, bạn sẽ nhận được điểm tốc độ trang tốt hơn vì trang không phải tải nội dung reCaptcha. Chúng tôi cũng đã giữ chức năng mới này trong một vài tệp độc lập ( functions-cf7.phpcf7-addons.css ), vì vậy chúng tôi có thể sử dụng lại chúng trong các dự án WordPress khác khá dễ dàng. Hoàn hảo.

Bài viết này dựa trên mã từ tài liệu Liên hệ Từ 7 chính thức .