8

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

4

3 回答 3

5

首先，请记住，“删除未使用的 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);
于 2019-11-29T00:44:59.043 回答
4

我们可以使用 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);
于 2020-10-04T01:52:06.777 回答
0

我们可以在加载初始滚动后加载一次 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

页面速度洞察力得分 页面速度

于 2022-01-05T07:38:33.847 回答