了解业务决策者和非开发者如何提升 Core Web Vitals。
简介
事实证明，网站的用户体验会对业务成果产生直接影响。如果能提高网站的加载和响应速度，让用户获得更优质的体验，那么互动度和转化率通常也会随之提高。Core Web Vitals 计划旨在量化评估网站的用户体验，以便找出有待改进之处。
不过，许多 Core Web Vitals 文档都是面向 Web 开发者的，他们对代码有深入的技术理解和完全控制权。许多网站都是由非开发者使用“网站开发工具”平台（例如 WordPress、Shopify、Wix 或其他类似解决方案）创建的，通常没有 Web 开发团队。
即使有专门的团队或 Web 开发者，他们也不是唯一负责 Web 性能的人员。业务决策者对网站效果有着巨大的影响，从决定内容和设计，到制定广告策略以吸引更多流量访问其网站，无一不体现着他们的影响力。这些决策通常会对网站性能产生重大影响。
本指南旨在为网站构建者和所有者提供一些相关信息，帮助他们尽可能了解并改善用户体验，而无需具备深厚的 Web 开发技术知识。
同时，许多性能问题需要开发者实施技术修复，我们的面向开发者的指南可以帮助您完成这些工作。本指南并非面面俱到，而是旨在向业务决策者介绍 Core Web Vitals 计划，并列举一些导致网页性能不佳的常见非开发根本原因。除此之外，可能还需要 Web 开发者参与才能取得进一步进展。
什么是 Core Web Vitals？
Core Web Vitals 是一组包含三个指标的指标集，旨在衡量网页的用户体验，尤其是用户感受到的网页速度。每个类别都有一个三字母缩写：
- Largest Contentful Paint (LCP) 用于衡量加载性能：网页开始加载后，其最显眼的内容需要多长时间（以秒为单位）才能显示出来。
- Cumulative Layout Shift (CLS) 用于衡量网页的视觉稳定性：内容在加载过程中移动的幅度。
- Interaction to Next Paint (INP)：网页对点击、点按和键盘互动的响应速度。
每个指标衡量用户体验的不同方面。Google 还为每个指标提供了建议的阈值，低于下限阈值的用户体验被视为良好，高于上限阈值的用户体验被视为不佳。在这两个阈值之间，网页会被视为处于需要改进范围内。请注意，对于这些指标，数值越低越好。
如何衡量 Core Web Vitals？
Core Web Vitals 是由网站的真实用户衡量的，不同用户会得到不同的结果。它们既不是“Google 的看法”，也不是“Googlebot 的看法”，而是您网站的实际用户所获得的体验。
有些用户会使用速度更快的设备和网络。有些用户会使用速度较慢的设备或网络。有些用户会访问您网站上更简单、更快的网页，而有些用户则会访问更复杂、更慢的网页。然后，系统会汇总所有这些用户体验的结果，以对整个网站进行整体衡量。
Google 会在 Chrome 用户体验报告 (CrUX) 中提供选择启用的 Chrome 用户的数据，该报告会馈送到许多 Google 工具中，例如 PageSpeed Insights 和 Google Search Console。
CrUX 适用于数百万个热门网站，但并非所有网站都包含在 CrUX 中。其他真实用户监控 (RUM) 工具也可以为您的网站收集这些指标。
如何查看我网站的 Core Web Vitals？
许多工具都会显示 Google 和第三方提供的 Core Web Vitals 指标。本文介绍了两款工具，可让您快速查看网站的 Core Web Vitals。如需深入了解其他 Google 工具（包括使用这些工具解决 Core Web Vitals 问题的工作流程），请参阅使用 Google 工具的 Core Web Vitals 工作流程一文。
如果您的平台提供集成的 RUM 解决方案，则可以为网站上的网页提供更详细的信息，或者让您深入了解特定网页或对用户进行细分，以帮助您了解和发现问题。
PageSpeed Insights
如需快速查看且无需设置，您可以使用 PageSpeed Insights (PSI)。输入网址，然后点击“分析”。如果您的网站包含在 CrUX 中，您应该会很快看到“了解真实用户的体验”部分：
这显示了过去 28 天内真实 Chrome 用户在您网站上的体验。您会在顶部看到三项 Core Web Vitals 指标，下方会显示其他辅助指标（包括待定的 INP 指标）。只有 Core Web Vitals 会计入页面顶部的总体评估结果（通过或失败），但其他指标有助于排查 Core Web Vitals 的问题，如下一部分所示。
您可以使用此部分顶部的按钮在移动版和桌面版视图之间切换。如果此网址和该来源都有数据，您还可以使用右上角的切换开关在这两者之间切换。
这些数据应该能大致反映您网站的效果，以及哪些指标可以在哪些设备类型上得到改进。
Google Search Console
Google Search Console (GSC) 仅供网站所有者使用，因此需要注册并验证网站所有权才能使用。它会提供有关 Google 搜索如何查看您网站的详细信息。
与 PageSpeed Insights 不同，GSC 会列出 Google 搜索在您网站上发现的所有网页，并提供所有这些网页的 Core Web Vitals 详细信息：
网页会归入网址群组，以便您查看特定类别的网页（例如商品详情页面、博文页面等）是否存在 Core Web Vitals 问题。由于这些网页通常基于类似的技术或模板构建，因此这些网页中的任何问题都可能有共同的原因。
网站开发工具的常见 Core Web Vitals 问题
许多性能问题都需要开发者实施技术修复，我们面向开发者的指南可以帮助开发者解决这些问题。在本部分中，我们将讨论一些常见的非开发者问题，业务决策者可以帮助解决这些问题，从而改善这些指标。
我们所说的“非开发者”是指使用网站构建器平台的用户，他们对网站的实际编码方式控制有限，或者是可能决定网站设计或帮助确定预算优先级的业务决策者。
Largest Contentful Paint (LCP) 问题
LCP 旨在衡量网页的加载速度，具体方法是测量从点击链接到浏览器中显示最大内容（通常是横幅图片或标题）的时间。
为了提供理想的网页体验，网页应在用户点击链接后的 2.5 秒内显示内容。如果加载时间超过 4 秒，则视为使用体验不佳。
以下各部分列出了业务决策者可以影响的一些影响 LCP 的常见问题。
开始加载网页时出现延迟
我们经常考虑缩短网页本身的加载时间，但通常在开始加载之前就会出现延迟。如果网站在几秒钟内都无法下载，那么 LCP 就不可能低于 2.5 秒的良好阈值！
第一字节时间 (TTFB) 是指下载网页第一部分所需的时间。如果 PageSpeed Insights 显示的 TTFB 诊断指标很大（以红色或琥珀色显示），则解决该问题是关键，并且应该会对 LCP 产生直接的连锁反应。
了解你的观众
对于 TTFB 问题，了解您的受众群体非常重要。如果您的网站托管在某个国家/地区，但为全球受众群体提供服务，那么网站用户与 Web 服务器之间的地理邻近性就会成为影响网页 TTFB 的一个因素。内容分发网络 (CDN) 允许在全球范围内缓存网站副本，从而更靠近用户。许多托管服务提供商都会在其服务中包含 CDN，并会自动处理此问题。请检查您的网站托管位置是否属于这种情况。有些平台提供不同层级的服务，付费层级越高，提供的 CDN 位置越多。在这些情况下，全球性企业应考虑选择更高级别的支持。
尽量减少重定向
重定向是导致 TTFB 缓慢的另一个常见原因。在投放广告系列或发送电子邮件时，请尽量减少重定向次数，避免使用多重关联缩短工具，或包含需要重定向的网址。例如，在广告系列中使用 example.com/blog，该广告系列需要重定向到 www.example.com/blog，然后再重定向到 https://www.example.com/blog，这会增加网页的 TTFB。确保您的营销活动尽可能少地使用重定向。
确保广告系列定位到正确的受众群体
此外，还要确保您的广告系列能够有效定位到目标受众群体。如果您的网站吸引了大量来自世界各地的新流量，但您无法向这些用户交付产品，这不仅会浪费广告支出，还会对您网站的效果产生负面影响。
网址参数可能会影响网站性能
UTM 参数等网址参数通常用于营销活动。这些参数可能会降低基础架构的缓存效果，因为每个网址看起来都像是一个不重复的网页，即使每次提供的都是同一个网页。如果您使用 UTM 参数，请与您的 CDN 提供商或基础架构团队联系，确保其缓存基础架构会忽略这些网址参数，以便广告系列能够从已缓存的网页中受益。
媒体内容可能会影响性能
考虑媒体对网页的影响。图片和视频等媒体内容通常比文本大得多，因此下载时间也更长。这还可能会减慢网页其余部分的加载速度。当 LCP 元素是媒体而非文本时，这一点尤为重要。在大约 80% 的网页上，LCP 元素都是图片，因此请务必考虑媒体对网站的影响。
同时，媒体素材资源有助于为用户提供丰富的视觉体验，比文字密集的网站更具吸引力。因此，移除媒体很少是一种选择，但了解媒体的成本以及如何降低成本可以最大限度地减少任何性能问题。
避免使用轮播界面
由多张图片组成的轮播界面可能会影响网页的总加载时间，因为如果实现方式不理想，系统可能需要同时下载多张图片。此外，尽管轮播界面无处不在，但通常无法提供出色的用户体验，因此在网站上使用轮播界面之前，请仔细考虑。
使用经过 Web 优化的图片
其次是媒体素材资源的大小。网络上的许多图片分辨率过高。确保所有媒体合作伙伴或设计机构提供的是针对网页进行了优化的图片，而不是他们通常提供的适合打印的完整尺寸图片。在上传图片之前，您可以使用 TinyJPG 等服务快速移除图片中不必要的数据。许多网络平台都会尝试在上传时自动优化图片，但由于它们不知道这些图片在用户设备上的显示尺寸，因此一开始就提供较小的图片可以带来显著的收益。
对视频要格外小心
使用视频时要格外注意。视频是网站中最大、因此也是下载和显示速度最慢的内容，所以请尽量不要过度使用。将视频放在网页下部的位置，避免在网页顶部使用。这样一来，加载成本较低的内容就可以快速加载，从而为用户提供更好的加载体验，并确保 LCP 不受影响。
A/B 测试
许多企业会执行 A/B 测试，以实验对网站所做的更改。这些内容的实现方式可能会对 LCP 产生重大影响。
许多 A/B 测试解决方案都会延迟向用户首次显示网站的时间，直到应用了所有测试中的更改。这样可以避免显示网站的原始版本，但代价是延迟向用户显示网站。其他解决方案则在服务器端应用，以避免这种延迟。请花时间了解 A/B 测试的执行方式，以及是否会受到这些延迟的影响。此外，请尽可能考虑改用服务器端 A/B 测试解决方案。
A/B 测试可以在发布新更改之前提供宝贵的反馈，但必须权衡网页性能成本与这些更改带来的任何潜在好处。
无论您的基础架构如何，任何运行 A/B 测试的人员都应始终牢记以下最佳实践：
- 将 A/B 测试工具限制为仅针对参与测试的网页，而不是延迟所有网页，因为大多数网页在任何特定时间可能都不会运行 A/B 测试。
- 将 A/B 测试限制在一部分用户中，以免影响大多数用户。
- 将 A/B 测试限制在得出确定性结果所需的最短时间内。A/B 测试运行的时间越长，用户体验到网页性能不佳的时间就越长。
- 最重要的是，别忘了在不再需要 A/B 测试实验时将其移除。
Cumulative Layout Shift (CLS) 问题
CLS 用于衡量网页的视觉稳定性，即网页内容在加载过程中的偏移程度。如果用户已开始阅读网页，但随着更多内容或广告位插入，他们会找不到之前阅读的位置，这可能会分散用户的注意力。如果网页布局发生过度偏移，还可能导致用户无意中点击错误的内容。请务必小心处理稍后加载的动态内容，这些内容可能会移动初始网页内容。
这是通过数学公式来衡量的，该公式会计算有多少内容发生了偏移，以及偏移了多少。它以无单位分数表示，值不高于 0.1 被视为良好，值不低于 0.25 被视为不佳。
以下各部分列出了业务决策者可以影响的一些影响 CLS 的常见问题。
检查滚动页面时图片的加载方式
许多模板会避免加载页面下方的内容，以便为初始网页加载期间屏幕上显示的图片提供更多资源。然后，随着用户向下滚动，系统会加载这些图片。这种图片加载技术称为延迟加载。
网页模板应为延迟加载的图片预留空间，这样，如果用户在图片有机会加载之前快速滚动，图片周围的内容就不会发生移位。如果您的模板或平台不具备此功能，请考虑改用具备此功能的模板或平台。
谨慎在内容中间放置广告
在内容中间插入广告可能会导致内容下移，因为广告通常需要更长的加载时间，往往比上一部分中提到的图片加载时间更长。将这些内容放在主页面内容的侧边是一种常见模式，可降低这种风险。具体如何实现取决于您使用的特定平台以及您用于构建网站的模板。
避免在页面顶部添加动态内容
避免在网页加载后在网页顶部添加提醒和横幅，例如 Cookie 横幅或特别优惠。选择在主要内容上方叠加提醒和横幅，可防止页面内容发生移位。与上一部分类似，您在此处的选项取决于您网页所使用的平台和模板。
Interaction to Next Paint (INP) 问题
INP 衡量网页的响应速度，即评估网页是否能快速响应点击、点按和键盘输入等互动。如果网页无法快速响应用户输入，通常会让人感觉迟缓，并可能让用户感到沮丧。
INP 会衡量网页生命周期内每一次符合条件的互动，并报告最差的互动。INP 的良好阈值为 200 毫秒，欠佳阈值为 500 毫秒。
响应速度指标（尤其是 INP）是难以优化的指标。当这些指标处于不佳阈值时，通常是因为网页尝试执行过多操作而导致互动延迟，因此这里的主要解决方案是移除不必要的代码，以使网页更轻量。
以下各部分列出了业务决策者可以影响的一些影响 INP 的常见问题。
来一次春季大扫除！
检查添加到您网站的插件和微件，并移除不再使用的插件和微件。添加插件来试用某些功能通常比较容易，但如果发现它们没用，您可能很难记住在以后将其移除。这是导致互动缓慢的一个原因，但与其他许多优化相比，这种优化相对简单。
同样，如果您使用跟踪代码管理器来管理营销活动，请务必移除旧的营销活动。即使这些代码不再触发，但每个网页仍需下载并编译已过期营销活动的代码，这可能会在初始网页加载期间减慢用户互动速度。
避免使用成本高昂的小组件和插件
计算开销大的微件和插件可能看起来很不错，但它们是改善了用户体验，还是实际上让用户体验变得更糟？PageSpeed Insights 中的“诊断性能问题”报告由 Lighthouse 提供，可帮助您找出对网站性能有明显影响的 JavaScript。
理想情况下，应仅在需要微件的网页上加载微件。例如，如果您仅在“联系我们”网页上嵌入了 Google 地图，则无需在每个网页上都加载该地图，否则可能会导致响应速度问题。
考虑广告数量，尤其是在移动设备上
对许多企业来说，广告是一种很好的变现策略，但往往复杂且耗费资源。广告越多，占用的资源就越多，这可能会影响网页速度。在移动设备上尤其如此，因为移动设备的处理器性能和内存通常不如桌面设备或笔记本电脑。
权衡变现与性能之间的平衡。如果用户因体验不佳而提前离开，那么这些额外广告带来的收入可能还不如它们造成的损失多。
避免页面过大
大型复杂页面需要更多处理时间才能显示。例如，如果您的商品库中有 1,000 种不同的商品，那么在用户的浏览器窗口中显示这些商品需要一段时间。考虑何时对页面进行分页以缩短此时间。
如何获取更多帮助？
本文列出了企业主可以考虑的一些可能影响效果的一般因素。除此之外，您可能还需要咨询 Web 开发者，以更深入地了解如何提升网站性能。
针对特定平台的信息
大多数平台都非常关注其网站性能，并且可能会针对如何提升性能提供专门的平台专属建议。在使用该平台的过程中，您可能还会接触到专门的网站性能团队，他们可以就如何改进您的网站提供进一步的建议。
Lighthouse 还会使用堆栈包功能显示平台专属信息，从而引导受支持平台的用户找到合适的建议。
平台会随着时间的推移不断改进，目前许多平台都专注于性能和 Core Web Vitals。请确保您的平台保持最新状态，以便从平台开发者所做的最新改进中受益。
如果您使用的是托管平台，则最容易做到这一点，因为平台提供商会自动管理平台，包括平台更新。如果您自行托管平台（例如，在您自己的服务器上本地安装 WordPress），那么确保平台定期更新将使您的网站能够受益于平台开发者所做的任何改进。企业应优先考虑这项维护工作，或选择由服务提供商代为管理。
聘请 Web 开发者
与企业主相比，精通网站性能的 Web 开发者可能能够解决更多问题。您可能已经聘请了 Web 开发者来构建网站或进行定期更改，或者您可能拥有专门的开发团队，或者您可能需要寻找一位开发者（最好是具有 Web 性能专业知识的开发者）。
如果此处提供的建议不足以解决您网站的性能问题，请向开发者寻求帮助。不过，希望前面的示例也表明，与开发者合作，在业务优先级与开发决策之间取得平衡，对于为您的网站找到合适的解决方案至关重要。
请注意，Web 性能很少是一次性工作。保持良好的网站性能通常需要定期监控和维护，以确保网站在改进后不会出现性能退化。
总结
网站通常是企业与客户接触的第一站，您希望为客户提供良好的体验。这不仅适用于初访者（他们对您的业务会产生第一印象），也适用于回头客和忠实客户，他们应该获得尽可能顺畅的体验，最好不要遇到可能留下负面印象的挫败感。Core Web Vitals 是 Google 建议网站考虑的一种用户体验衡量指标。网络上有很多选择，如果用户在您的网站上遇到不好的体验，他们可以（并且将会！）尝试其他网站。
同时，Core Web Vitals 只是衡量网站表现的一个方面。商家需要自行决定在网站上投入多少资金，以及这些投资将带来多少回报。