Recaptcha and Page Speed

Issue Description

Monitoring the digi marketing reports for clients like Aquaseal and Landform we noticed page speed dropping considerably.

Using contact form 7 if we turned off the recaptcha integration page speed increased by 10+ points – in Landforms case it went from 25 (red) to 50 (amber)

But this means we have no spam filtering in place.

Affected Browsers

Issue Type

Front End

How to Fix the Issue

The fix involves re-activting re-captcha, then disabling the script being embedded on the site.

When a contact form input box is clicked on – then you fire the script to embed the recaptcha code.

Fixed Code Snippets

(PHP)

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

(Javascript)

//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;
    });

References

Reference Description	Reference Link
www.paperstreet.com	View Page