Recaptcha V3 资产导致 Pagespeed 问题 - 如何推迟答案

【问题标题】：Recaptcha V3 assets cause Pagespeed issues - how to deferRecaptcha V3 资产导致 Pagespeed 问题 - 如何推迟
【发布时间】：2019-11-21 19:05:55
【问题描述】：

我们目前在我们网站的面向公众的部分使用 Google Recaptcha V3 - 在进行 Pagespeed Insights 性能测试（移动）时，Google 自己将未使用/未延迟的 CSS 报告为他们自己的 Recaptcha css 文件中的一个问题：

完整资源地址为： https://www.gstatic.com/recaptcha/releases/[...]/styles__ltr.css（所以它显然来自后续的 Google Recaptcha 脚本请求）

我们正在包含带有“defer”属性集的原始 Google recaptcha 脚本 - 不知道我们还能做些什么来导致这个 css 被推迟，这样 Pagespeed 就不会抱怨它。在 Google Recaptcha 网站本身上找不到任何文档来帮助解决此问题。

有谁知道如何推迟这个 CSS 来提高页面加载时间？不确定这是否是特定于移动设备的问题，因为 Pagespeed 根本不会在桌面设备上报告它。

【问题讨论】：

标签： css recaptcha recaptcha-v3 pagespeed-insights

【解决方案1】：

首先，请记住，“删除未使用的 CSS”更多的是一个指导点（前提是它不是渲染阻塞），它表明它是浪费的字节（如果 recaptcha 触发它实际上不是，因为然后它需要 CSS 来渲染图像'你是人工检查'等）

虽然我不能给你一个理想的答案，因为它是你无法控制的代码，我可以给你两种方法来测试它的影响/它是否真的是一个问题和一个“破解”来解决负载顺序。

使用应用限制进行测试

模拟限制有时会导致意外行为，这是 Page Speed Insights 网站使用的。

如果您使用浏览器审核（使用相同的引擎 - Lighthouse）来运行测试，您可以选择将限制从模拟更改为应用。

尽管您的分数会发生变化（applied throttling 的宽容度不如 simulated throttling），但您会得到更真实的事件顺序，因为延迟和减速是“真实的”，而不是根据完全加载页面做出最佳猜测速度和应用公式来猜测加载时间。

在 Chrome (F12) 中打开开发工具 -> 审核 -> 节流 -> 设置为 Applied Slow 4G, 4x CPU Slowdown。 -> 运行审核。

查看使用这种评估页面速度的方法时问题是否仍然存在。

如果是这样，实际性能的解决方法/测试如下：-

强制脚本在一段时间后加载（骇人听闻的方式！）

这不是一个理想的解决方案，但它有利于测试，如果它确实会减慢您的网站关键加载时间，作为最后的手段。

5 秒后动态插入脚本。

（请注意，以下代码未经测试，可能无法正常工作，仅用于说明，为您指明正确的方向。您很可能不需要script.onload 部分并且可以包含该部分通常）

setTimeout(function(){
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.onload = function() {
        grecaptcha.ready(function() {
            grecaptcha.execute('_reCAPTCHA_site_key_', {action: 'homepage'}).then(function(token) {
               ...
            });
        });
    }
    script.src = "https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key";
    head.appendChild(script);
 }, 5000);

【讨论】：

您的解决方案运行良好，但如果包装在函数中并调用焦点，则不会那么麻烦。 $('#newsletter_register .form-control').focus(function(){ if (captchaLoaded ==false) { loadCaptcha(); } });
是的，我会选择这个选项而不是加载焦点的唯一原因是，如果有人在 3G 上，那么脚本可能会出现问题，需要一段时间才能加载，这可能会在尝试加载时扰乱它如果您是人类，请解决。无论哪种方式，这都是解决问题的一种老生常谈的方式，但在 99% 的情况下，您的方式应该没问题。

【解决方案2】：

我们可以使用 IntersectionObserver 来延迟 Recaptcha 脚本。

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);

【讨论】：

【解决方案3】：

我们可以在加载初始滚动后加载一次 reCaptcha v3 脚本：

    var fired = false;
window.addEventListener('scroll', function () {
  let scroll = window.scrollY;
  if (scroll > 0 && fired === false) {
    var recaptchaScript = document.createElement('script');
    recaptchaScript.src = 'https://www.google.com/recaptcha/api.js?render=Your_SITE_KEY';
    recaptchaScript.defer = true;
    document.body.appendChild(recaptchaScript);
    fired = true;
   
    // console.log('On scroll fired');
  }
}, true);

代码示例： https://codepen.io/iamrobert/pen/NWazNpd

Page Speed Insight 得分

【讨论】：