Advanced Speed Improvements: Load Deferred reCAPTCHA for Contact Form 7

In this post, we will demonstrate an advanced site speed improvement technique by deferring the loading of reCAPTCHA files when using Contact Form 7 for WordPress websites.

We have discovered that using certain functionality, like Google’s reCAPTCHA script to fight form spam can actually harm your site speed. The issue is this functionality is dependent on loading numerous third party JavaScript and CSS files preemptively when a form may not even be used by the visitor. This functionality adds extra weight and requests in order for the website to load which is not recommended.

Therefore, our solution was to defer the loading of the reCAPTCHA script until a visitor interacts with the contact form.  Surprisingly, we were unable to find any methods online to accomplish this, so we developed our own technique that we will teach you later in this post.

We also want to demonstrate the performance upgrade you can expect to see after applying our advanced speed improvement technique. If you don’t already know, improving your site speed is beneficial to both your visitors and search engines. Fast loading sites provide visitors with a better user experience and search engines favor faster sites because they can crawl them more efficiently.

Google PageSpeed Insights Score Before and After Speed Technique was Applied

   

Google PageSpeed Insights Diagnostics Before and After Speed Technique was Applied

GTmetrix Page Details Before and After Speed Technique was Applied

Applying this speed improvement technique instantly boosted our overall score (in Google’s PageSpeed Insights) a whopping 16 points which is a huge improvement!

Also, when looking closer at the diagnostics, there was another performance gain. Google is no longer flagging the site to “Reduce the impact of third-party code” or “Reduce JavaScript execution time” which is directly correlated to the reCAPTCHA script being deferred. The update reduced the “main-thread work” execution time by over 3 seconds as well.

Lastly, when looking at the actual metrics regarding fully loaded time, total page size and requests, we can see improvements in each category after the update. The site has a slightly faster load speed, a reduction of 300kb in total page size and 12 less requests made.

How to Perform this Speed Improvement Technique

The first goal is to dequeue the Contact Form 7 script from the site. Within your theme’s functions.php file, simply add the following code.

add_action('wp_print_scripts', function () {
    wp_dequeue_script('google-recaptcha');
});

Just to ensure that the reCAPTCHA script is no longer loading, check the page source of a page on the site. In the footer, it should no longer show this script “https://www.google.com/recaptcha/api.js?render=YOUR_API_KEY&ver=3.0”. Once it is confirmed that the site is successfully dequeueing Contact Form 7’s scripts, we can move onto implementing the load deferring.

Create a new JavaScript file in your theme folder. You can name the file anything you’d like, but I will call it “recaptcha.js”. In this file, insert the code below.

var captchaLoaded = false;

$( document ).ready(function() {

    //Load reCAPTCHA script when CF7 form field is focused
    $('.wpcf7-form input').on('focus', function() {
        // If we have loaded script once already, exit.
        if (captchaLoaded)
        {
            return;
        }

        // Variable Intialization
        console.log('reCAPTCHA script loading.');
        var head = document.getElementsByTagName('head')[0];
        var recaptchaScript = document.createElement('script');
        var cf7script = document.createElement('script');

        // Add the recaptcha site key here.
        var recaptchaKey = '';
        
        // Dynamically add Recaptcha Script
        recaptchaScript.type = 'text/javascript';
        recaptchaScript.src = 'https://www.google.com/recaptcha/api.js?render=' + recaptchaKey + '&ver=3.0';
        
        // Dynamically add CF7 script 
        cf7script.type = 'text/javascript';
        cf7script.text = "!function(t,e){var n={execute:function(e){t.execute(\"" + recaptchaKey +"\",{action:e}).then(function(e){for(var t=document.getElementsByTagName(\"form\"),n=0;n<t.length;n++)for(var c=t[n].getElementsByTagName(\"input\"),a=0;a<c.length;a++){var o=c[a];if(\"g-recaptcha-response\"===o.getAttribute(\"name\")){o.setAttribute(\"value\",e);break}}})},executeOnHomepage:function(){n.execute(e.homepage)},executeOnContactform:function(){n.execute(e.contactform)}};t.ready(n.executeOnHomepage),document.addEventListener(\"change\",n.executeOnContactform,!1),document.addEventListener(\"wpcf7submit\",n.executeOnHomepage,!1)}(grecaptcha,{homepage:\"homepage\",contactform:\"contactform\"});";
        
        // Add Recaptcha Script
        head.appendChild(recaptchaScript);

        // Add CF7 Script AFTER Recaptcha. Timeout ensures the loading sequence.
        setTimeout(function() {
            head.appendChild(cf7script);
        }, 200);

        //Set flag to only load once
        captchaLoaded = true;
    });
});

Now that you have added the JavaScript to the site, the final step (besides testing) is to enqueue our JavaScript file to the site. To do this, go back to your functions.php file and add the following code:

function cf7_defer_recaptcha() {
    wp_enqueue_script('cf7recap', get_template_directory_uri() . '/recaptcha.js', array('jquery'), '1.0');
}
add_action('get_footer', 'cf7_defer_recaptcha');

That should be it for the code. Let’s take a look at the site and test it out! Theoretically, what we should see is the reCAPTCHA script load ONLY when we click into the input field of the form.

Open up your page with the contact form and your inspector tools, and navigate to the network tab.  Let the page load for a few seconds and then click into the Contact Form 7 input field, and you should see the reCAPTCHA script load in, similar to the screenshot below.

Congratulations! You have officially implemented a load defer on Contact Form 7 scripts.

Questions or Feedback?

We would love to hear your feedback if this blog post has helped you to better understand how to make your site faster by deferring the loading of reCAPTCHA for Contact Form 7. Also, if you run into any issues, feel free to leave a comment below and we’ll do our best to help you out with a solution.


5 Responses to Advanced Speed Improvements: Load Deferred reCAPTCHA for Contact Form 7

  1. Rok
    2:27 am on May 7th, 2020

    Hi,
    I tried using your script on my website but I get an error saying
    “Uncaught TypeError: $ is not a function at defer-recaptcha.js?ver=1.0:3”.

    I named the javascript file defer-recaptcha.js instead of recaptcha.js. I also corrected the code in functions.php accordingly.

    What seems to be the problem?

  2. Peter
    6:18 pm on June 7th, 2020

    Deat PaperStreet-Team,
    thanks for the great article, I searched for a solution and found it here.
    Some remarks, maybe they are helpful:
    – I wanted to place the recaptcha.js file in my child theme folder. So I changed “get_template_directory_uri()” to “get_stylesheet_directory_uri()”.
    – Calling the functions in the .js file with “$” did not work. I got errors “Uncaught TypeError: $(…).ready is not a function”. I replaced “$” with “jQuery”, then it worked.

    Thanks again for the great help
    best regards – peter

  3. martin
    6:39 pm on June 18th, 2020

    Hi As you said in your post it all worked as expected, however when using any of the forms on the site they all fail to send the message now?

    Any idea’s as to why?

    Thanks

  4. Pop
    7:44 am on June 20th, 2020

    Thanks! It really worked, and has helped me a lot!

  5. Danielle
    6:11 pm on July 15th, 2020

    Hi there! I recently did this to a site, but I got an error in the console that states that the ‘$’ in line 3 is not a function. How can I fix this?

Leave a Reply

Your email address will not be published. Required fields are marked *

*