I spent quite some time integrating Google ReCAPTCHA v3 into my scripts/system but got a nasty surprise when I saw how much it bogged down page loading. My pages were in the green at Google's PageSpeed Insights but since including the ReCAPTCHA v3 code on the pages they do not make the cut when it comes to passing Google's Core Web Vitals assessment. It ads another 300kib of extra loading to pages. Adding 300kib to a single web page is bound to slow it to a crawl.
Before dumping Google ReCAPTCHA v3 in fear of losing Page Rank due to some of my key pages now being slow, is there any way I can speed up things? Perhaps delay loading ReCAPTCHA's javascript until the user starts interacting with the form? ... or perhaps it could load if the page has completed loading and is idle?
The code on my pages looks like this:
<script src="https://www.google.com/recaptcha/api.js?render=RECAPTURE_KEY"></script>
<script>
grecaptcha.ready(function() {
document.getElementById('loginform').addEventListener("submit", function(event) {
event.preventDefault();
grecaptcha.execute('RECAPTURE_KEY', {action: 'login'}).then(function(token) {
document.getElementById("login-g-recaptcha-response").value= token;
document.getElementById('loginform').submit();
});
}, false);
});
</script>
It would probably not be a good idea to load the above once a user starts interacting with a form because he/she may already completed filling in the form and pressing the button while Google's scripts are still loading?
I don't know if deferring the load will help either, because it may still have an impact on Google's Core Vitals?
