How to improve site speed while using ReCaptcha

Published
Recaptcha Featured Image

What is ReCaptcha?

ReCaptcha is a free service from Google that protects your website from unwanted spam and helps prevent data fraud. It is an effective security solution that uses advanced risk analysis techniques to tell humans and bots apart. You will most likely see reCaptcha being used for forms such as login, registration, password recovery, and comments. Several popular contact form plugins like Contact Form 7, WP Forms, and Ninja Forms use reCaptcha built in. However with the reCaptcha v3 update, reCaptcha is loaded on all pages and many users unknowingly load the JavaScript where it is not necessary. This adds unnecessary bloat to all your pages and ultimately slows your website’s speed performance. In this guide, we will be showing you how to make reCaptcha faster by removing it from the pages where it is not needed.

How to remove reCapatcha without a plugin

Millions of WordPress users using form plugins like Contact Form 7 are now left dealing with Google’s new reCaptcha V3 loading scripts on all pages without a contact form. There are popular plugins like Disable Recaptcha that’ll allow you to show it on certain pages or remove it completely. However, there is no need to install another plugin to your site when you could simply add a code snippet.

Before you add any code, make sure you save a backup of your functions.php file in case you need to revert back to your old file. Whenever you edit your functions.php file, we highly recommend saving a copy of the file in case a typo breaks your website.

We recommend creating a child theme to add this to your theme (unless you have already done that), that way, your theme remains unchanged and if something doesn’t work right, you can simply disable the child theme.

Simply add this code snippet into your WordPress theme’s funtions.php file. Go to Appearance > Theme Editor > [select the child theme] > functions.php and add this code.

function disable_google_captcha_except_contact()
{
    if (!is_page(array( 'contact' )) ) {
	wp_dequeue_script('wpcf7-recaptcha');
        wp_dequeue_script('google-recaptcha');
    }
}

add_action('wp_enqueue_scripts', 'disable_google_captcha_except_contact');

This code snippet will remove repatcha from all pages that are not the contact page. We found ‘wpcf7-recaptcha’ also on the list of printed enqueued scripts so we simply dequeue it in the code as well.

If you want to allow recaptcha on more pages, simply add this version of the code, but replace ‘some-other-page-with-form’ with the page name that you want it to load on.

add_action(‘wp_print_scripts’, function () {
//Add pages you want to allow to array
  if ( !is_page( array( ‘contact’,’some-other-page-with-form’ ) ) ){
  wp_dequeue_script( ‘google-recaptcha’ );
  wp_dequeue_script( ‘wpcf7-recaptcha’ );
  //wp_dequeue_script(‘google-invisible-recaptcha’);
  }
});

The picture below shows some examples of how you can target a single page, a page id, a post title, a post slug, and an array of any of the following combinations. Simply add the pages you want to target in your !is_page conditional statement. You can also find your Post ID by going to the Post tab in your Admin dashboard and hovering over the post you want to target.

How to Remove Contact Form 7 scripts and reCaptcha scripts on specific pages

If you are using the Contact Form 7 Plugin, you will find that it loads on every page as well by default. An extended code solution for disabling the CSS and Javascript from Contact Form 7 along with the recaptcha scripts can be done by adding this code.

/* CONTACT FORM 7 */ 

// Stop the CF7 CSS & JS FROM LOADING ON EVERY PAGE
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

function disable_google_recaptcha_except_contact()
{
    //Remove the captcha scripts if its not on the contact form
    if (!is_page(array( 'contact')) ) : 
        wp_dequeue_script('wpcf7-recaptcha');
        wp_dequeue_script('google-recaptcha');
    else : 

        // else if it is the contact form enqueue all the scripts related to CF7
        if (function_exists('wpcf7_enqueue_scripts')) {

            wpcf7_enqueue_scripts();
        }

        if (function_exists('wpcf7_enqueue_styles')) {
            wpcf7_enqueue_styles();
        }
  endif;

}

add_action('wp_enqueue_scripts', 'disable_google_recaptcha_except_contact');

How to remove reCaptcha for specific post only

If you want to disable reCaptcha only for specific posts add the code snippet below. Replace the ‘202020’ and ‘212121’ in our code snippet with the post IDs that you want to target only.

function disable_recaptcha_badge_post(){
   if ( !is_single( array( '202020', '212121' ) ) ) {
      wp_dequeue_script('google-recaptcha');
      add_filter( 'wpcf7_load_js', '__return_false' );
      add_filter( 'wpcf7_load_css', '__return_false' );
      remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts', 20 );
   }
}
add_action( 'wp_enqueue_scripts', 'disable_recaptcha_badge_post' );

After adding this code, reCapatcha should be disabled for all posts except for the post ids that you targeted in the (!is_single) conditional statement.

Conclusion

After adding the code snippets we provided in this guide, your speed performance should improve because the reCaptcha scripts are not being loaded on the unused pages and posts. The reCaptcha v3 update has been added to all the popular form plugins which caused the issue of loading it everywhere. It’s important to keep in mind that before you limit the script or hide the reCaptcha badge, you want to consider your website’s design and needs to determine whether or not to use form plugins like Contact Form 7 at all. If your website does not need any form plugins, it may be a better idea to remove the form plugin completely so you don’t have to go through the code modifications at all.