How to defer Recaptcha v3 for Contact Form 7?

Hello @jefsuperkraft,

My recommendation is to follow the steps you’ll find in this article from the official documentation: Loading JavaScript and stylesheet only when it is necessary.

If you prefer to use a code snippet, you can try adding this one in the functions.php file of your child theme or using a custom plugin (recommended):

add_action( 'wp_enqueue_scripts', 'wpcf7_scripts_removal_contact_form_7', 999);

function wpcf7_scripts_removal_contact_form_7() {
  
  global $post;
  
  if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'contact-form-7') ) {
    
    wp_enqueue_script('contact-form-7');
    wp_enqueue_style('contact-form-7');

  } else {
    
    wp_dequeue_script( 'contact-form-7' );
    wp_dequeue_style( 'contact-form-7' );
    
  }
}

This code snippets will remove the CSS and JS of CF7 from all post and pages that don’t include a CF7 form shortcode in its content. Please note this also remove the CSS and JS from the archives pages and widgets, so it’s not a good idea to use it if you have set a form within a widget.

Hope this helps you.

Best regards,
Yordan.

Hi @yordansoares

Thanks for your answer. Indeed, that is a great way to disable scripts and load them where you want on your website. I’m using this method to clear out unnecessary Javascript or CSS of plugins in the frontend of my websites.

Unfortunately, Google Recaptcha JS still causes errors in Google Page Speed Insights (for mobile). It says: “Remove unused Javascript”. The reason for this is because the JS that is loaded for Google’s recaptcha is too large. Google Page Speed Insights sees this JS file and says to remove the unused JS. Next google removes 20-30 points on the Page Speed test. I think that is strange…

Right now, I am searching for a workaround for this. Till today, I did not found anything, so I am thinking about removing Google’s Recaptcha and blocking spam with another technique. When I tested this out, my Page Speed results where perfect on mobile and desktop…

Kind regards,
Jef

I also have the same problem;
in pages where I do have forms and recaptchaV3, pageSpeed reports that recaptcha__en.js is unused javascript and suggest to remove it.
I’m searching for solutions as well, it really slows down the performance of the pages. ??

Hello @saramenc,

Please use the code I left above if your form isn’t in a widget.

Best regards,
Yordan.

-thank you.
Unfortunately, I have some forms in a page, and others in a widget :\

Hello @saramenc,

Then the best approach is work with your own templates. Please see Loading JavaScript and stylesheet only when it is necessary.

Best regards,
Yordan.

well, I took off the forms I had in my widgets, and set up the code above, but I’m still getting recaptcha__en.js “unused javascript” warning from pageSpeed, as reported by @jefsuperkraft; no matter if form appears or not in the page. I’ll need an alternative as well, i guess.
thank-you for your kind answers.

Hello @saramenc,

I’m afraid this issue is not related with Contact Form 7, but with reCAPTCHA itself. Maybe changing to another captcha option may help.

Best regards,
Yordan.

I have the same issue. Any way not to put code into functions.php? I use a plugin so I don’t have to code!

It is a shame that something as simple as this does not have a valid solution for everyone. Load the js and css only when necessary and also load without blocking the page. This will cause a lot of leakage from CF7 users to other systems. This optimization should be implicit within the plugin itself.

@saramenc The code that @yordansoares kindly shared with us above works only with Contact Form 7 < 5.3.2. Starting from version 5.4, there’s no way to block reCAPTCHA from loading on specific pages only.

Please note that if you plan to downgrade Contact Form to a previous version, all of the plugin data will be removed. If you already have some contact forms in place, better save a backup first.

Are you guys seeing recaptcha__en.js loaded twice in the Network panel?

First initiated by api.js (fair enough), but then again initiated by some recaptcha_api/anchor document. Trying to figure out where all this is coming from on a site that I didn’t have control of for some time (people looooove to add WP plugins, bless them), and this feels like spaghetti — not CF7’s fault, of course.

UPDATE: Found this issue, no solution, but closed ??

• This reply was modified 3 years, 6 months ago by Anton42.

Contact Form 7 is responsible for loading reCAPTCHA script. It would be nice to fix this performance issue.

It would be great do defer recaptcha also as avoid Refill in caching.
Now Google serp was just updated and the page speed on mobile got much more weight than another rank factors

Hi, I was also trying to prevent recaptcha script loading on pages when not necessary as I only have one form on the contact page.

After looking through the CF7 code, I ended up with the following. Just use the is_page() to include the page/post you have the forms on.

Hope this helps, and let me know if anyone has a better idea ??

// Load CF7 only on pages with forms
function yourfunctionname_cf7() {
    if( ! is_page( array( 'contact', 'contact us' ) ) ) {
        add_filter( 'wpcf7_load_js', '__return_false' );
        add_filter( 'wpcf7_load_css', '__return_false' );
        remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts', 20, 0 );
    }
}
add_action( 'get_header', 'yourfunctionname' );