You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Gatsby Script API导致总阻塞时间(TBT)异常升高,请求排查问题

Gatsby Script API导致总阻塞时间(TBT)异常升高,请求排查问题

今天用PageSpeed检测我的网站,结果性能得分只有64分,这可把我惊到了——毕竟我在浏览器的托管站点里(甚至无痕标签页)自己跑Lighthouse,得分一直稳定在95到100分之间。以下是PageSpeed给出的性能指标:

metrics of pagespeed.web.dev

830ms的**总阻塞时间(TBT)**实在差得离谱,但我本地自己跑Lighthouse时,TBT明明是0ms。

main thread blocking time

排查后发现问题出在主线程阻塞时间上。我的理解是,这些脚本的加载会阻碍页面渲染。比如我是这样加载mtcaptcha相关资源的:

<Script src="https://service.mtcaptcha.com/mtcv1/client/mtcaptcha.min.js"></Script>
<Script src="https://service2.mtcaptcha.com/mtcv1/client/mtcaptcha2.min.js"></Script>
<div className="mtcaptcha"></div>

按Gatsby的默认配置,这个Script组件应该使用post-hydrate策略。官方文档里关于这个策略的说明是:

The advantage of this strategy is that you have the ability to declare that your script should start loading after hydration. This is impactful because hydration is what makes your page interactive, and by using regular tags (even with async or defer applied), you run the risk of your script being loaded in parallel with the framework JavaScript that hydrates your page.

This can have negative implications for key web vital metrics like Total Blocking Time. By leveraging the component with the post-hydrate strategy, you ensure that your script avoids interfering with your page reaching an interactive state, resulting in a better experience for your users.

按照我的理解,这个Script API应该不会对主线程阻塞时间造成影响,但现在确实出现了问题,是不是我这边哪里操作失误了?

备注:内容来源于stack exchange,提问作者Konstantin Schütte

火山引擎 最新活动