Chrome浏览器正在进行一项试验，旨在解决JavaScript密集型网站在Core Web Vitals（核心网页指标）方面的问题。这项试验着重于单页应用程序（SPA），这类应用在性能追踪方面一直存在盲点，影响搜索引擎优化（SEO）审核和排名信号。

从Chrome 139版本开始，开发者可以选择加入Soft Navigations API的源试用。这项API能够测量LCP（最大内容渲染）、CLS（累计布局偏移）和INP（与页面的交互）等指标，即使页面在不完全刷新的情况下更新内容也能进行测量。

单页应用程序因其速度和互动性而广受欢迎，但使用Lighthouse、CrUX（Chrome用户体验报告）中的字段数据或真实用户监控脚本等工具来监控它们一直很困难。这是因为单页应用程序经常在不触发传统导航的情况下，使用JavaScript更新页面。因此，谷歌的测量系统和大多数性能工具在计算Core Web Vitals时会遗漏这些更新。

这项新的API旨在缩小这一差距，让开发者更清楚地了解网站在真实环境中的表现，尤其是在用户点击或在类似应用程序的界面中导航之后。

Chrome的Soft Navigations API使用内置的启发式方法来检测何时发生软导航。例如：

1. 用户点击链接。
2. 页面URL更新。
3. DOM（文档对象模型）发生明显变化并触发绘制。

当满足这些条件时，Chrome现在会将其视为用于性能测量的导航事件，即使没有发生完整的页面加载。

该API引入了新的指标和增强功能，包括：

• interaction-contentful-paint：用于测量软导航后的LCP。
• navigationId：添加到性能条目，以便将指标与特定导航相关联（这在URL在交互过程中发生变化时至关重要）。
• 扩展了布局偏移、事件计时和INP，使其能够在软导航中工作。

开发者可以通过以下方式在Chrome 139中测试此功能：

• 本地测试：启用chrome://flags/#soft-navigation-heuristics。
• 源试用：通过meta标签或HTTP标头将令牌添加到网站，以收集真实用户数据。

Chrome建议启用“高级绘制归因”标志，以获得最完整的数据。

Chrome的Barry Pollard领导了这项计划，他强调该API仍处于实验阶段：“想要测量单页应用程序的Core Web Vitals吗？我们一直在为此开发Soft Navigations API，并且我们正在从Chrome 139开始推出新的源试用。在你的应用程序上运行它，看看它是否正确检测到你应用程序上的软导航，如果没有，请告诉我们！”

开发者还应该了解以下事项：

• 旧版本的Chrome或其他浏览器可能不支持这些指标。
• RUM（真实用户监控）提供商可能需要支持navigationId和interaction-contentful-paint才能进行跟踪。
• 某些边缘情况，如自动重定向或replaceState()的使用，可能无法注册为导航。

新媒网跨境获悉，这项试验是使Core Web Vitals对于现代JavaScript密集型网站更加准确的一步。虽然该API尚未集成到Chrome的公共性能报告（如CrUX）中，但如果试验证明成功，情况可能会发生变化。

如果网站依赖React、Vue、Angular或其他单页应用程序框架，那么现在有机会测试Chrome的新方法在捕获用户体验方面的效果。

新媒网（公号: 新媒网跨境发布），是一个专业的跨境电商、游戏、支付、贸易和广告社区平台，为百万跨境人传递最新的海外淘金精准资讯情报。

本文来源：新媒网 https://nmedialink.com/posts/9341.html