在没有 recaptcha/api.js 的情况下实施 v3 Recaptcha 导致 'Reduce unused JavaScript' 或“减少第三方代码的影响”机会
Implement v3 Recaptcha without recaptcha/api.js causing 'Reduce unused JavaScript' or ' Reduce the impact of third-party code'opportunities
我能够让 recaptcha 加载到网站上，上面有 async 和 defer 标签。
但是，当我对照它检查 Pagespeed Insights 时，我发现了两个问题：
- 减少第三方代码的影响。第三方代码会显着影响加载性能。限制冗余第三方提供商的数量，并在您的页面基本完成加载后尝试加载第三方代码。
- 减少未使用的 JavaScript 并推迟加载脚本，直到需要它们来减少网络消耗的字节数 activity。
脚本在 </body> 标记之前加载，看起来像：
<script src="https://www.google.com/recaptcha/api.js?render=xxxxmykeyxxxx&theme=light" async defer></script>
如何加载此版本的 recaptcha 而不会在 PageSpeed Insights 上受到惩罚？
#1 机会：
关于第一个问题：reCaptcha 使用来自 google 的压缩服务。如果 pagespeed 抱怨压缩，则可能是您的 Web 服务器中的其他资源未压缩。
关于第二个问题：如果您设置了 defer 或 async 属性，则不需要将标签放在 </body> 之前。这两个属性都不会阻止网页的呈现，即使它们是在 header 中加载的。我认为您当前的代码不应该触发该检查，但是因为您同时使用了 async 和 defer 属性（您只需要使用 async 并且可以将它放在 header 中）也许它混淆 pagespeed 但我发现这也不太可能。
如何加载此版本的 Recaptcha 而不会在 Pagespeed Insights 上受到惩罚？
首先，不可能仅仅加载reCaptcha就导致你的整个网站的pagespeed得分为49，很可能是你的网站存在其他问题。
带延迟属性的标准解
要解决“减少未使用的 JavaScript”机会，您需要确保加载 reCaptcha 的脚本标签只有 defer 属性（这将阻止脚本在整个页面已被解析）。这将提高渲染性能。
要实际减小大小，您通常会将 js 代码拆分为仅将网页所需的内容加载到 运行，但由于它是第 3 方库，因此这是不可能的。
使用另一个线程的解决方案
另一种选择是使用另一个线程加载第 3 方库。这不会影响渲染性能，就像通常在主线程上加载 js 那样。这对于诸如 reCaptcha 或 Google 标签管理器之类的东西很有用，即可接受异步加载并且不与网页中的其他元素交互的库。使用 partytown.
这样的库最容易做到这一点
我能够让 recaptcha 加载到网站上，上面有 async 和 defer 标签。
但是，当我对照它检查 Pagespeed Insights 时，我发现了两个问题：
- 减少第三方代码的影响。第三方代码会显着影响加载性能。限制冗余第三方提供商的数量，并在您的页面基本完成加载后尝试加载第三方代码。
- 减少未使用的 JavaScript 并推迟加载脚本，直到需要它们来减少网络消耗的字节数 activity。
脚本在 </body> 标记之前加载，看起来像：
<script src="https://www.google.com/recaptcha/api.js?render=xxxxmykeyxxxx&theme=light" async defer></script>
如何加载此版本的 recaptcha 而不会在 PageSpeed Insights 上受到惩罚？
#1 机会：
关于第一个问题：reCaptcha 使用来自 google 的压缩服务。如果 pagespeed 抱怨压缩，则可能是您的 Web 服务器中的其他资源未压缩。
关于第二个问题：如果您设置了 defer 或 async 属性，则不需要将标签放在 </body> 之前。这两个属性都不会阻止网页的呈现，即使它们是在 header 中加载的。我认为您当前的代码不应该触发该检查，但是因为您同时使用了 async 和 defer 属性（您只需要使用 async 并且可以将它放在 header 中）也许它混淆 pagespeed 但我发现这也不太可能。
如何加载此版本的 Recaptcha 而不会在 Pagespeed Insights 上受到惩罚？
首先，不可能仅仅加载reCaptcha就导致你的整个网站的pagespeed得分为49，很可能是你的网站存在其他问题。
带延迟属性的标准解
要解决“减少未使用的 JavaScript”机会，您需要确保加载 reCaptcha 的脚本标签只有 defer 属性（这将阻止脚本在整个页面已被解析）。这将提高渲染性能。
要实际减小大小，您通常会将 js 代码拆分为仅将网页所需的内容加载到 运行，但由于它是第 3 方库，因此这是不可能的。
使用另一个线程的解决方案
另一种选择是使用另一个线程加载第 3 方库。这不会影响渲染性能，就像通常在主线程上加载 js 那样。这对于诸如 reCaptcha 或 Google 标签管理器之类的东西很有用，即可接受异步加载并且不与网页中的其他元素交互的库。使用 partytown.
这样的库最容易做到这一点