优化了商品详情页面的互动性，使 Lighthouse 中的最大潜在 FID 降低了 90%，Chrome 用户体验报告中的 FID 则降低了 9%。
Mercado Libre 是拉丁美洲最大的电子商务和付款生态系统。该平台已在 18 个国家/地区开展业务，是巴西、墨西哥和阿根廷的市场领导者（根据唯一访问者数和网页浏览量）。
该公司一直以来都非常重视 Web 性能，但最近他们组建了一个团队，负责监控性能并针对网站的不同部分进行优化。
本文总结了 Mercado Libre 前端架构团队的 Guille Paz、Pablo Carminatti 和 Oleh Burkhay 在优化核心网页指标之一（即 首次输入延迟 [FID] 及其实验室代理 [总屏蔽时间 [TBT]]）方面所做的工作。
90%
Lighthouse 中的最长潜在 FID 缩短
9%
在 CrUX 中，更多用户将 FID 评为“快”
任务运行时间过长、First Input Delay 延迟时间和总屏蔽时间
运行耗时的 JavaScript 代码可能会导致长任务，即在浏览器的主线程中运行时间超过 50 毫秒的任务。
FID（首次输入延迟）用于衡量从用户首次与网页互动（例如点击链接）到浏览器实际能够开始处理事件处理脚本以响应该互动的时间。执行耗时 JavaScript 代码的网站可能会有多个耗时任务，最终会对 FID 产生负面影响。
为了提供良好的用户体验，网站应尽量将 First Input Delay 控制在 100 毫秒以内：
虽然 Mercado Libre 的网站在大多数部分的表现都很出色，但他们在 Chrome 用户体验报告中发现，商品详情页面的 FID 较差。根据这些信息，他们决定将精力集中在提升网站上商品页面的互动性上。
这些页面允许用户执行复杂的互动，因此目标是优化互动性，同时不干扰有价值的功能。
衡量商品详情页面的互动度
FID 需要真实用户，因此无法在实验室中衡量。不过，Total Blocking Time (TBT) 指标可在实验室中衡量，与实际环境中的 FID 高度相关，还能捕获影响交互性的问题。
例如，在以下轨迹中，虽然在主线程上运行任务所花费的总时间为 560 毫秒，但其中只有 345 毫秒被视为总阻塞时间（每个任务超过 50 毫秒的部分的总和）：
Mercado Libre 在实验室中将 TBT 用作代理指标，以衡量和改进真实世界中商品详情页面的互动度。
他们采用的大致方法如下：
- 使用 WebPageTest 来准确确定在真实设备上哪些脚本会使主线程保持繁忙状态。
- 使用 Lighthouse 确定更改首次输入延迟最长预估值 (Max Potential FID) 的影响。
使用 WebPageTest 直观呈现长时间任务
WebPageTest (WPT) 是一款 Web 性能工具，可让您在世界各地不同位置的实体设备上运行测试。
Mercado Libre 使用 WPT 选择与真实用户相似的设备类型和位置，以重现用户体验。具体而言，他们选择了 Moto 4G 设备和 弗吉尼亚州杜勒斯，因为他们希望尽可能贴近墨西哥 Mercado Libre 用户的体验。通过观察 WPT 的主线程视图，Mercado Libre 发现有多个连续的长任务阻塞了主线程 2 秒钟：
分析相应的广告瀑布流后，他们发现这两秒钟中相当一部分时间来自其分析模块。应用的主要软件包大小很大（950KB），解析、编译和执行需要很长时间。
使用 Lighthouse 确定最长的潜在 FID
Lighthouse 不允许您在不同设备和位置之间进行选择，但它是一款非常实用的工具，可用于诊断网站和获取性能建议。
在商品详情页面上运行 Lighthouse 时，Mercado Libre 发现最大潜在 FID 是唯一标记为红色的指标，其值为 1710 毫秒。
基于此，Mercado Libre 设定了一个目标，即在 Lighthouse 和 WebPageTest 等实验室工具中提高其最大潜在 FID 得分，假设这些改进会影响他们的真实用户，因此会在 Chrome 用户体验报告等真实用户监控工具中体现出来。
优化长任务
第一次迭代
根据主线程轨迹，Mercado Libre 设定了优化运行开销较大的两个模块的目标。
他们开始优化内部跟踪模块的性能。此模块包含一个 CPU 密集型任务，该任务对模块的运行不是必不可少的，因此可以安全地移除。这使得整个网站的 JavaScript 减少了 2%。
之后，他们开始着手缩减通用软件包大小：
Mercado Libre 使用 webpack-bundle-analyzer 检测优化机会：
- 最初，他们需要完整的 Lodash 模块。我们将其替换成了按方法 require，以便仅加载 Lodash 的一部分（而非整个库），并与 lodash-webpack-plugin 结合使用，以进一步缩减 Lodash 的大小。
他们还应用了以下 Babel 优化：
- 使用 @babel/plugin-transform-runtime 在整个代码中重复使用 Babel 的帮助程序，并大幅缩减 bundle 的大小。
- 使用 babel-plugin-search-and-replace 在构建时替换令牌，以移除主软件包中的大型配置文件。
- 添加了 babel-plugin-transform-react-remove-prop-types，以通过移除属性类型来节省一些额外的字节。
经过这些优化，bundle 大小缩减了约 16%。
衡量成效
这些更改将 Mercado Libre 的连续长任务时间从 2 秒缩短到了 1 秒：
Lighthouse 显示首次输入延迟最长预估值缩短了 57%：
第二次迭代
该团队继续深入研究耗时任务，以寻找后续改进。
根据这些信息，他们决定实施以下更改：
- 继续缩减主 bundle 的大小，以优化编译和解析时间（例如，通过移除不同模块中的重复依赖项）。
- 在组件级别应用代码拆分，将 JavaScript 拆分为较小的部分，以便更智能地加载不同的组件。
- 推迟组件注水，以便更智能地使用主线程。这种技术通常称为“部分水合”。
衡量成效
生成的 WebPageTest 轨迹显示了更小的 JS 执行分块：
其在 Lighthouse 中的最长的潜在 FID 时间又缩短了 60%：
直观呈现真实用户的进度
虽然 WebPageTest 和 Lighthouse 等实验室测试工具非常适合在开发过程中迭代解决方案，但真正的目标是改善真实用户的体验。
Chrome 用户体验报告提供了与真实的 Chrome 用户在网络上访问热门网址时的具体情形相关的用户体验指标。您可以通过在 BigQuery 中运行查询、PageSpeedInsights 或 CrUX API 来获取报告中的数据。
CrUX 信息中心可让您轻松直观地了解核心指标的进度：
后续步骤
网站性能优化是一项永无止境的工作，Mercado Libre 深知这些优化措施为其用户带来的价值。他们继续在整个网站上应用多项优化，包括在商品详情页面中进行prefetching、图片优化等，同时还不断改进商品详情页面，以进一步缩短总屏蔽时间 (TBT)，并通过代理 FID 来缩短总屏蔽时间。这些优化措施包括：
- 迭代代码分块解决方案。
- 改进了第三方脚本的执行方式。
- 继续改进了捆绑器级别（webpack）的资源捆绑。
Mercado Libre 全面关注网站性能，因此在继续优化网站互动性的同时，他们还开始更加深入地评估当前另外两个核心网页指标（即 LCP [Largest Contentful Paint] 和 CLS [Cumulative Layout Shift]）的改进机会。