如何完全推迟加载Google reCaptcha，直到页面完全加载之后 [英] How to completely defer loading Google reCaptcha until after the page fully loads

问题描述

我在网站上安装了Google reCaptcha v2(复选框类型).但是，即使使用"defer"属性(基于pagespeed测试)，它也会大大降低移动设备上的页面加载速度.因此，我想将其加载完全推迟到页面完全加载之后.

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 pagespeed test). So, I want to defer its loading completely until after the page is fully loaded.

这是表单代码(安装reCaptcha的地方)的样子:

This is what the form code (where the reCaptcha is installed) looks like:

    <form id="sib-form" method="POST" action="https://.........." data-type="subscription">
       <input class="input" type="text" id="FIRSTNAME" name="FIRSTNAME" data-required="true">
       <input class="input" type="text" id="LASTNAME" name="LASTNAME" data-required="true">

       <script>function handleCaptchaResponse() { 
       var event = new Event('captchaChange'); document.getElementById('sib-captcha').dispatchEvent(event); 
       } </script>  

       <div class="g-recaptcha sib-visible-recaptcha" id="sib-captcha" data-sitekey="xxxxxxxxxxxxx" 
       data-callback="handleCaptchaResponse"></div>

       <button form="sib-form" type="submit">Subscribe</button>      
       <input type="text" name="email_address_check" value="" class="input--hidden">        
       <input type="hidden" name="locale" value="en">
    </form>

此reCaptcha js文件已添加到头部:

And this reCaptcha js file is added in the head section:

    <script defer src="https://www.google.com/recaptcha/api.js?hl=en"></script>

即使此js文件使用了'defer'属性，也会加载其他相关文件.这就是降低页面速度的原因.

Even though the 'defer' attribute is used on this js file, other related files are loaded regardless. And they're the reason for the lower page speed.

如何完全推迟此reCaptcha的加载，直到其他所有内容完全加载完毕?

How to defer the loading of this reCaptcha completely until after everything else is fully loaded?

推荐答案

恕我直言，我认为您应该使用IntersectionObserver来观察包含Recaptcha的元素.当元素 isIntersecting 时，您可以在body标签的末尾添加api脚本

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 = new IntersectionObserver(
    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);

在此处查看有关IntersectionObserver的更多信息: https://developers.google.com/web/updates/2016/04/交叉观察者

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

祝你好运

这篇关于如何完全推迟加载Google reCaptcha，直到页面完全加载之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！