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