How to Lazy Load reCAPTCHA? Optimizing Website Performance

While reCAPTCHA is useful, it can also impact website speed, particularly the Largest Contentful Paint (LCP), a critical web vitals metric.

You can lazy load reCAPTCHA after the user interacts with the form, so you won’t be compromising your web page performance.

Lazy Loading reCAPTCHA

Given the nature of reCAPTCHA, where it isn’t always immediately needed, it’s an excellent candidate for lazy loading.

Let’s consider a typical use case: a user visits a contact form on a website. They’ll first focus on input fields (like filling out their name, email, or message) before they interact with the reCAPTCHA challenge.

See Also : YouTube Tags vs Keywords
See Also : Embed YouTube Video on Website
See Also : YouTube Tags vs Hashtags

Hence, rather than loading reCAPTCHA immediately when the page loads, we can defer its loading until the user starts interacting with the form.

Implementation

Here’s a step-by-step guide on lazy loading reCAPTCHA:

1. Remove the default reCAPTCHA script in the JS code from the webpage.
2. Add an event listener on a relevant form field (like a textarea or input). When the user focuses on or interacts with this element, load the reCAPTCHA library.

let reCaptchaLoaded = false;

document.getElementById("your-input-field").addEventListener("focus", function() {
    if (!reCaptchaLoaded) {
        var recaptchaScript = document.createElement('script');
        recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
        document.body.appendChild(recaptchaScript);
        reCaptchaLoaded = true;
    }
});

With these lines of JavaScript, reCAPTCHA will load only when the user starts interacting with the form.

Keep in mind that this lazy reCaptch loading on slower connections might notice a slight delay between interacting with the form and reCAPTCHA being ready.

See Also : 7 Essential SEO Tools for Every Digital Marketer
See Also : How Page Size Affect Performance
See Also : Optimize On-Page SEO With SEMrush