3

根据 Lighthouse 的测量，包含 Google 的“隐形验证码”似乎大大增加了“首次交互”（以及随后的“持续交互”）时间。

我使用 HTML5 样板模板设置了两个空网页。这些站点的不同之处仅在于包含了recaptcha API 脚本；即这一行：

<script src='https://www.google.com/recaptcha/api.js'></script>

第一个（非recaptcha）站点接收与第一个有意义的绘制时间相等的第一个交互时间。 非验证码

第二个（recaptcha）站点的第一个交互时间约为 14 秒，估计输入延迟时间约为 1.6 秒：

重新验证

我按照 Google 的说明将脚本包含在该<head>部分的底部，但是我也尝试将脚本包含在<body>（以及 withasync和defer）的底部，但没有明显改进。

这是 Lighthouse 测量首次交互方式（特别是考虑到它仍被标记为“测试版”）或 Recaptcha 的问题吗？如果是后一种情况，这是否值得担心，如果是，有没有办法减轻影响？

4

1 回答 1

2

这也困扰了我一段时间，这是我想出的最佳解决方案：

  1. 最初不要加载 api.js（渲染验证码）脚本。这很重要，因为与 [2] 相结合会产生相对巨大的交互时间减慢。
  2. 最初不要将验证码绑定到任何元素，只需在函数中“准备”它以供以后使用。
  3. 现在，这是最重要（聪明）的部分——当你的用户开始与表单交互时，将 api.js (recaptha__..js) 脚本注入到 header 中，浏览器将加载它，并触发绑定函数加载实际验证码。

您可以在此处通过一些代码示例找到更多信息和解释： https ://tehnoblog.org/google-invisible-recaptcha-how-to-boost-lighthouse-performance-score/

于 2018-12-24T00:19:55.007 回答