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