SEO has a significant impact on site load speed nowadays. Adding Google reCAPTCHA3 can reduce site speed by 35-40% in Google Lighthouse results. To combat this, I chose to load the reCAPTCHA3 library only when the user clicks or fills out a form field. I implemented this code successfully.
HTML Form Field
<div class="control is-loading">
<input name="instauser" id="author" class="input is-rounded is-focused is-medium" type="text" placeholder="https://instagram.com/p/41SW_pmmq4/">
</div>
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" value="">
<div class="control has-text-centered"><br>
<button id="Button" type="submit" class="button is-danger is-active is-medium">Download  
<img src="{{ asset('svg/downloads.svg') }}" width="25px"
alt="Instagram video download" />
</button>
</div>
</form>
Javascript Code
<script type="text/javascript">
var reCaptchaFocus = function() {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.google.com/recaptcha/api.js?render=6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy';
head.appendChild(script);
var recaptchaInterval = setInterval(function() {
if( !window.grecaptcha || !window.grecaptcha.execute ) { return; }
clearInterval( recaptchaInterval );
grecaptcha.execute('6LdvEswUAAAAADNVG2ng4ZIfA4mfKUJiuLmLgnUy', {action: 'homepage'}).then(function(token) {
document.getElementById('g-recaptcha-response').value=token;
});
}, 100 );
document.getElementById('author').removeEventListener('focus', reCaptchaFocus);
};
document.getElementById('author').addEventListener('focus', reCaptchaFocus, false);
</script>
However, a new issue has arisen where slow internet connections result in a delay in loading the hidden g-recaptcha-response input value. This delay sometimes leads to users submitting the form before the value is loaded, causing errors. To prevent this, I want to disable the submit button until the g-recaptcha-response value is filled in the hidden input type. You can test this on the website
I could really use some assistance.