在 The Economic Times 网站上优化 Core Web Vitals 显著改善了用户体验，并大幅降低了整个网站的跳出率。
随着互联网速度日益提升，用户期望网站的响应速度和行为表现比以往更快。The Economic Times 每月活跃用户超过 4500 万。通过在整个域（AMP 和非 AMP 页面）中针对 Core Web Vitals 进行优化，我们成功地显著降低了跳出率并改善了阅读体验。
衡量影响
我们专注于最大内容ful Paint (LCP) 和 累积布局偏移 (CLS)，因为它们在为用户提供出色的阅读体验方面至关重要。在实施下述各种性能修复后，The Economic Times 成功在几个月内显著改进了 Chrome 用户体验 (CrUX) 报告指标。
总体而言，CLS 改进了 250%，从 0.25 降至 0.09。总体而言，LCP 改进了 80%，从 4.5 秒降至 2.5 秒。
此外，LCP 值在“差”范围内的比例从 2020 年 10 月到 2021 年 7 月降低了 33%
此外，CLS 值在“差”范围内的比例降低了 65%，CLS 值在“良好”范围内的比例在同一时间段内增加了 20%
结果是 The Economic Times（以前未达到 Core Web Vitals 阈值）现在在其整个源站中通过了 Core Web Vitals 阈值，并且总体跳出率降低了 43%。
什么是 LCP？我们如何改进它？
最大元素对于改善用户体验和识别加载速度最为重要。诸如首次内容ful Paint (FCP) 之类的性能指标仅捕获页面加载的初始体验。另一方面，LCP 报告用户可见的最大图像、文本或视频部分的渲染时间。
除了切换到更快的 DNS 提供商和优化图像外，以下是我们应用的一些技术，我们涵盖了这些技术以改进 LCP。
关键请求优先
由于所有现代浏览器都限制了并发请求的数量，因此开发人员需要优先加载关键内容。要加载复杂的网页，我们需要下载诸如标头元素、CSS、JavaScript 资源、主图、文章正文、评论、其他相关新闻、页脚和广告之类的资源。我们评估了哪些元素是 LCP 所需的，并优先加载这些项目以改进 LCP。我们还延迟了不属于初始页面渲染的调用。
文本外观
我们尝试了 font-display 属性，因为它会影响 LCP 和 CLS。我们尝试了 font-display: auto;，然后切换到 font-display: swap;。这会在最初以最佳匹配和可用字体渲染文本，然后在字体下载后切换到该字体。这使得我们的文本能够快速渲染，而与网络速度无关。
更好的压缩
Brotli 是 Google 开发的一种替代 Gzip 和 Deflate 的压缩算法。我们替换了字体和资源，并将服务器压缩从 Gzip 更改为 Brotli，以实现更小的占用空间
- Javascript 文件比使用 Gzip 小 15%。
- HTML 文件比使用 Gzip 小 18%。
- CSS 和字体文件比使用 Gzip 小 17%。
预连接到第三方域
preconnect 应该谨慎使用，因为它仍然会占用宝贵的 CPU 时间，并延迟其他重要资源，尤其是在安全连接上。
但是，如果已知将要从第三方域获取资源，则 preconnect 是不错的选择。如果仅在高流量网站上偶尔发生，则 preconnect 可能会触发不必要的 TCP 和 TLS 工作。因此，dns-prefetch 更适合第三方资源（例如，社交媒体、分析等），以提前执行 DNS 查找。
将代码分解为块
在该站点的头部，我们仅加载了包含业务逻辑的必要部分或对于首屏页面渲染至关重要的 critical 资源。此外，我们使用 代码拆分 将代码拆分为块。这有助于我们进一步改进页面 LCP。
更好的缓存
对于所有前端路由，我们添加了一个 Redis 层，该层从缓存中提供模板。这减少了服务器上的计算时间，并在每个请求中构建整个 UI，从而减少了后续请求中的 LCP。
LCP 目标和成就总结
在开始优化项目之前，该团队将其 LCP 分数基准设定为 4.5 秒（对于 75% 的用户，基于 CrUX 报告字段数据）。经过优化项目后，它降低到 2.5 秒。
什么是 CLS？我们如何改进它？
您是否曾经注意到在浏览网站时页面内容出现任何意外移动？其中一个原因是页面上异步加载的尺寸未知的媒体（图像、视频、广告等）。一旦媒体资源加载，它们就会移动页面的布局。
我们将介绍我们在 The Economic Times 网站上为改进 CLS 而采取的措施。
使用占位符
我们对已知尺寸的广告单元和媒体元素使用了样式占位符，以避免在广告库加载和渲染页面广告时发生布局偏移。这确保了通过为广告保留空间来消除布局偏移。
定义容器尺寸
我们为所有图像和容器指定了显式尺寸，以便浏览器引擎无需在 DOM 元素可用后计算其宽度和高度。这避免了不必要的布局偏移和额外的绘制工作。
CLS 目标和成就总结
在开始优化项目之前，该团队将其 CLS 分数基准设定为 0.25。我们能够将其显著降低 90% 至 0.09。
什么是首次输入延迟 (FID)？我们如何改进它？
首次输入延迟 是跟踪网站对用户输入响应速度的指标。FID 分数不佳的主要原因是繁重的 JavaScript 工作使浏览器的主线程繁忙，这可能会延迟用户交互。我们通过多种方式改进了 FID。
分解长时间运行的 JavaScript 任务
长时间运行的任务是指持续时间为 50 毫秒或更长的任务。长时间运行的任务会占用浏览器的主线程，并阻止其响应用户输入。我们尽可能将长时间运行的任务分解为较小的任务（在用户请求时），这有助于减少 Javascript 臃肿。
延迟加载未使用的 JavaScript
我们将页面内容优先于第三方脚本（如分析），以保持页面更快的响应速度。但是，某些库存在某些限制，因为它们需要加载到文档 <head> 中，以便准确跟踪用户旅程。
减少 polyfill
我们减少了对某些 polyfill 和库的依赖，因为浏览器提供了对现代 API 的支持，并且较少用户使用旧版浏览器（如 Internet Explorer）。
延迟加载广告
延迟加载首屏下广告有助于减少主线程阻塞时间，从而改进 FID。
FID 目标和成就总结
通过例行实验，我们能够将 FID 从 200 毫秒降低到今天的 50 毫秒以下。
防止回归
The Economics Times 计划在生产环境中引入自动化性能检查，以避免页面性能回归。他们计划评估 Lighthouse-CI 以自动化实验室测试，这可以防止其生产分支上的回归。