历史性突破!LCP 和 INP 终于覆盖所有主流浏览器,iOS 性能盲点彻底消失

我正在开发 DocFlow,它是一个完整的 AI 全栈协同文档平台。该项目融合了多个技术栈,包括基于 Tiptap 的富文本编辑器、NestJs 后端服务、AI 集成功能和实时协作。在开发过程中,我积累了丰富的实战经验,涵盖了 Tiptap 的深度定制、性能优化和协作功能的实现等核心难点。

如果你对 AI 全栈开发、Tiptap 富文本编辑器定制或 DocFlow 项目的完整技术方案感兴趣,欢迎加我微信 yunmz777 进行私聊咨询,获取详细的技术分享和最佳实践。

随着 Safari 26.2 在 12 月 12 日的发布,Web 性能领域迎来了一个令人振奋的年终礼物:最大内容绘制(LCP)和交互到下次绘制(INP)现已正式成为 Baseline 新可用功能。所有主流浏览器的最新版本现在都包含了测量这些指标所需的最大内容绘制 API 和事件计时 API。这是 Interop 2025 项目的一部分,很高兴看到这些功能在今年成功交付!

这意味着什么

核心 Web 指标(Core Web Vitals)已成为衡量网页体验的广泛采用标准,无论是对于 Web 开发者还是业务利益相关者而言都是如此。它们试图将复杂的 Web 性能故事总结为几个关键指标:页面加载速度(LCP)、交互响应速度(INP)以及内容稳定性(CLS)。

长期以来,这些指标只能在基于 Chromium 的浏览器(如 Chrome 和 Edge)中测量。在 iOS 设备上,由于所有浏览器都使用驱动 Safari 的 WebKit 浏览器引擎,这些指标完全不可用。这造成了一个盲点:网站可能不知道大量访问者正在经历完全不同的体验。虽然许多 Web 性能改进确实使所有浏览器受益,但某些技术和 API 仅在部分浏览器中可用。此外,浏览器内部的工作方式、页面加载方式以及处理交互的方式可能彼此不同。仅拥有网站性能的部分视图远非理想状态。

随着所有主流浏览器现在都支持这两个指标,我们现在可以更好地了解网站的关键加载和交互性能。这将使网站所有者能够更好地理解性能问题并识别可以进行的改进,最终使用户和业务指标受益。

其他浏览器的数据会进入 CrUX 吗?

不会。Chrome 用户体验报告(CrUX)仅基于符合条件的 Chrome 用户,这一点不会改变。这也适用于使用此数据的下游系统,如 PageSpeed Insights、Google Search Console 和 CrUX Vis。

这也将继续排除 Chrome iOS 用户,因为他们使用 WebKit 浏览器引擎。

如何从其他浏览器测量

CrUX 数据仍然作为网站性能的摘要很有用,并且可以与网络上的其他网站进行基准测试。然而,由于它是一个高级摘要,我们长期以来一直建议测量更详细的真实用户数据(field data)以帮助识别和改进性能。

真实用户监控(RUM)工具现在能够收集额外的真实用户数据,包括通过 Chrome 团队的 web-vitals 库测量的数据。在大多数情况下,这应该自动开始包含在您现有的解决方案中,但如果您有任何问题,请与您的 RUM 提供商确认。

请注意,RUM 和 CrUX 之间可能存在差异,现在这些指标在更多不包括在 CrUX 中的浏览器中可用,这种差异可能更加明显。

实现方式有什么不同吗?

虽然所有浏览器引擎在加载和显示网页方面大致执行相同的任务,但这些浏览器的构建方式存在许多差异,特别是在它们的渲染管道中,这些管道将网站的代码(主要是 HTML、CSS 和 JavaScript)转换为屏幕上的像素。

渲染循环的结束大致是可互操作的,被定义为 paintTime。然而,在这之后,有一个稍后的 presentationTime,这是特定于实现的,旨在指示像素实际绘制到屏幕上的时间。Chrome 测量 LCP 直到 presentationTime 结束,而 Firefox 和 Safari 不包括 presentationTime,因此测量到更早的 paintTime。这导致测量结果之间存在几毫秒的差异。从 Chrome 145 开始,paintTime 测量也将为 LCP 公开,以便那些希望能够在浏览器之间进行同类比较的人使用。

同样的差异也适用于 INP。

其他浏览器实现这些指标的事实,有助于识别一些需要澄清和更好定义的未解决问题。这再次可能导致轻微差异------尽管这些主要出现在边缘情况中。这就是拥有多个实现和关注 API 的好处!我们将继续致力于这些以及指标的任何其他改进。

然而,尽管存在这些小的差异,我们确信 LCP 和 INP 大致是可互操作的,因此我们很高兴它们被标记为 Baseline 新可用功能。那些实现 RUM 解决方案或深入研究数据的人可能会注意到其中一些差异,但 Web 开发者应该对跨浏览器测量这些指标充满信心,尽管存在这些微小差异。

不支持这些 API 的浏览器怎么办?

Baseline 新可用功能仅在所有主流浏览器的最新版本中可用。您的用户群可能不会立即升级,或者可能无法升级,这取决于他们的操作系统和提供商。30 个月后,它们将被视为 Baseline 广泛可用,因为大多数用户可能会使用支持这些功能的浏览器。

然而,作为测量 API 而不是网站的核心功能,您可以安全地为支持这些功能的浏览器测量这些指标------就像您到目前为止可能一直在做的那样。只需注意,您可能正在看到过滤后的用户视图------那些已升级的用户------特别是在最初的几个月里。

累积布局偏移(CLS)呢?

第三个核心 Web 指标是累积布局偏移(CLS),它不是 Interop 2025 项目的一部分------尽管它已被提议用于 Interop 2026。目前,除了基于 Chromium 的浏览器之外,它不受支持。

结论

Web Vitals 计划的目标是通过为 Web 平台创建一套标准 API 来改善 Web 性能,使关键指标能够被测量并被网站所有者广泛理解。很高兴看到这些指标中的两个现在得到了所有主流浏览器的支持。我们期待看到这些指标为网站所有者提供什么见解,以及这如何带来更好的用户体验!

参考来源: web.dev - LCP and INP are now Baseline Newly available

相关推荐
qiyue772 小时前
AI浪潮下,前端的路在何方,附前端转KMP实践
前端·ai编程
小小荧2 小时前
Hono与Honox一次尝试
前端·后端
a程序小傲2 小时前
蚂蚁Java面试被问:分布式Session的实现方案
java·分布式·面试
a努力。2 小时前
京东Java面试:如何设计一个分布式ID生成器
java·分布式·后端·面试
菩提小狗2 小时前
第2天:基础入门-Web应用&架构搭建&漏洞&HTTP数据包&代理服务器|小迪安全笔记|网络安全|
前端·安全·架构
ctrigger2 小时前
监理工程师考试题型有哪些?4科题型+分值表
大数据·javascript·算法
咖啡の猫2 小时前
Python集合生成式
前端·javascript·python
dazzle2 小时前
计算机视觉处理(OpenCV基础教学(六):基于HSV颜色空间的目标颜色识别)
javascript·opencv·计算机视觉
2501_946233892 小时前
Flutter与OpenHarmony我的作品页面实现
android·javascript·flutter