A key strategy to improve page load times is optimizing how Google reCAPTCHA is implemented. Traditional implementations can add to the initial load time, but by activating reCAPTCHA only upon form submission, you can maintain security without compromising speed.
This guide demonstrates how this was effectively implemented on DentistryInTucson.com to enhance page speed.
Step-by-Step Implementation
Add the reCAPTCHA Script to the Head Section: Place the reCAPTCHA script in the <head> section with the defer attribute to ensure it’s downloaded but not executed until needed.html
<head>
<!-- Other head elements -->
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY" defer></script>
</head>Modify All Forms to Include a Hidden reCAPTCHA Token Input: Ensure every form on your site has a hidden input field for the reCAPTCHA token and uses the onsubmit attribute to trigger the reCAPTCHA.
Example for a form:
<form action="assets/php/validator.php" class="forms" method="post" onsubmit="return onSubmit(event);">
<input type="hidden" name="recaptcha_response" id="recaptchaResponse_form1">
<!-- other form inputs -->
<button type="submit">Submit</button>
</form>Generalized JavaScript Function for reCAPTCHA:
Create a JavaScript function that handles reCAPTCHA execution for any form.
<script>
function onSubmit(event) {
event.preventDefault(); // Prevent default form submission
grecaptcha.ready(function() {
grecaptcha.execute('YOUR_SITE_KEY', {action: 'submit'}).then(function(token) {
// Find the hidden input in the form that triggered the event
var recaptchaResponseInput = event.target.querySelector('input[name="recaptcha_response"]');
recaptchaResponseInput.value = token;
event.target.submit(); // Submit the form after adding the token
});
});
return false; // Prevents form submission until reCAPTCHA is done
}
</script>Example Forms with reCAPTCHA Integration
Template Form:
htmlCopy code<form action="assets/php/validator.php" class="forms" method="post" onsubmit="return onSubmit(event);">
<input type="hidden" name="recaptcha_response" id="recaptchaResponse_template">
<!-- other form inputs -->
<button type="submit">Submit</button>
</form>
Home Page Form 1:
htmlCopy code<form action="assets/php/validator.php" class="forms" method="post" onsubmit="return onSubmit(event);">
<input type="hidden" name="recaptcha_response" id="recaptchaResponse_home1">
<!-- other form inputs -->
<button type="submit">Redeem Offer</button>
</form>
Home Page Form 2:
htmlCopy code<form action="assets/php/validator.php" class="forms" method="post" onsubmit="return onSubmit(event);">
<input type="hidden" name="recaptcha_response" id="recaptchaResponse_home2">
<!-- other form inputs -->
<button type="submit">Redeem Offer</button>
</form>
Handling Forms on Other Pages
For other forms, like the “Request an Appointment” form, follow the same pattern:
htmlCopy code<form class="styled-form" method="post" action="https://tnt-adder.herokuapp.com/submit/24b52dc4-001b-4b9f-b92b-ebf746caa67d" onsubmit="return onSubmit(event);">
<input type="hidden" name="recaptcha_response" id="recaptchaResponse_appointment">
<!-- other form inputs -->
<button class="btn">Submit Request</button>
</form>
Ensuring Future Forms Benefit
For any new forms added to the site in the future:
- Add a hidden input for the reCAPTCHA token.
- Use the
onsubmit="return onSubmit(event);"attribute to trigger the reCAPTCHA.
Conclusion
By implementing this method, you ensure that the reCAPTCHA script only loads when necessary, significantly reducing the initial load time of your pages. This optimization enhances page speed and user experience without compromising on security.