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

Question

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

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

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

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

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