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

Question

我们目前在我们网站的面向公众的部分使用 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 根本不会在桌面上报告它。

标签： cssrecaptcharecaptcha-v3pagespeed-insights

Answer 1

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

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

使用应用节流进行测试

模拟限制有时会导致意外行为，这是 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);