How To Completely Defer Loading Google Recaptcha Until After The Page Fully Loads

I have Google reCaptcha v2 (checkbox type) installed on the website. But it's slowing down the page loading significantly on mobile even with the 'defer' attribute (based on pagesp

Solution 1:

IMHO, I think you should use IntersectionObserver to observer the element which contains the recaptcha. When the element isIntersecting you can add the api script at the end of body tag

var io = newIntersectionObserver(
    entries => {
        console.log(entries[0]);
        if (entries[0].isIntersecting) {
            var recaptchaScript = document.createElement('script');
            recaptchaScript.src = 'https://www.google.com/recaptcha/api.js?hl=en';
            recaptchaScript.defer = true;
            document.body.appendChild(recaptchaScript);
        }
    },
    {
        root: document.querySelector('.page-wrapper'),
        rootMargin: "0px",
        threshold: 1.0,
    }
);
io.observe(initForm);

Check more information about IntersectionObserver here: https://developers.google.com/web/updates/2016/04/intersectionobserver

Good luck