无形的 recaptcha 大大增加了首次交互时间
Invisible recaptcha massively increasing first interactive time
包含 Google 的 'invisible recaptcha' 似乎大大增加了 'First interactive'（以及随后的 'consistently interactive'）时间，据 Lighthouse 测量。
我使用 HTML5 样板模板设置了两个空网页。这些网站的不同之处仅在于包含了 recaptcha API 脚本；即，这一行：
<script src='https://www.google.com/recaptcha/api.js'></script>
第一个（非 recaptcha）站点收到的第一个交互时间相当于第一个有意义的绘制时间。
第二个 (recaptcha) 站点的首次交互时间约为 14 秒，估计输入延迟时间约为 1.6 秒：
我按照 Google 的说明将脚本包含在 <head> 部分的底部，但是我也尝试将脚本包含在 <body> 的底部]（以及 async 和 defer）没有明显的改进。
Lighthouse 测量首次交互（特别是考虑到它仍标记为 'beta'）或 Recaptcha 的方式有问题吗？如果是后一种情况，这是否值得担心？如果是，是否有减轻影响的方法？
这也困扰了我一段时间，这是我想出的最佳解决方案：
- 最初不加载 api.js（呈现验证码）脚本。这很重要，因为与 [2] 相结合会造成相对巨大的交互时间减慢。
- 最初不要将验证码绑定到任何元素，只是 "prepare" 它在一个函数中供以后使用。
- 现在，这是最重要（聪明）的部分 - 当您的用户开始与表单交互时，将 api.js (recaptha__..js) 脚本注入 header, 浏览器会加载它，并触发绑定函数加载实际的验证码。
您可以在此处通过一些代码示例找到更多信息和解释：
https://tehnoblog.org/google-invisible-recaptcha-how-to-boost-lighthouse-performance-score/
包含 Google 的 'invisible recaptcha' 似乎大大增加了 'First interactive'（以及随后的 'consistently interactive'）时间，据 Lighthouse 测量。
我使用 HTML5 样板模板设置了两个空网页。这些网站的不同之处仅在于包含了 recaptcha API 脚本；即，这一行：
<script src='https://www.google.com/recaptcha/api.js'></script>
第一个（非 recaptcha）站点收到的第一个交互时间相当于第一个有意义的绘制时间。
第二个 (recaptcha) 站点的首次交互时间约为 14 秒，估计输入延迟时间约为 1.6 秒：
我按照 Google 的说明将脚本包含在 <head> 部分的底部，但是我也尝试将脚本包含在 <body> 的底部]（以及 async 和 defer）没有明显的改进。
Lighthouse 测量首次交互（特别是考虑到它仍标记为 'beta'）或 Recaptcha 的方式有问题吗？如果是后一种情况，这是否值得担心？如果是，是否有减轻影响的方法？
这也困扰了我一段时间，这是我想出的最佳解决方案：
- 最初不加载 api.js（呈现验证码）脚本。这很重要，因为与 [2] 相结合会造成相对巨大的交互时间减慢。
- 最初不要将验证码绑定到任何元素，只是 "prepare" 它在一个函数中供以后使用。
- 现在，这是最重要（聪明）的部分 - 当您的用户开始与表单交互时，将 api.js (recaptha__..js) 脚本注入 header, 浏览器会加载它，并触发绑定函数加载实际的验证码。
您可以在此处通过一些代码示例找到更多信息和解释： https://tehnoblog.org/google-invisible-recaptcha-how-to-boost-lighthouse-performance-score/