了解业务决策者和非开发者如何改进 Core Web Vitals。
简介
事实证明，网站的用户体验会对业务成果产生直接影响。如果能提升网站的加载和响应速度，让用户获得更优质的体验，那么互动度和转化率通常也会随之提高。Core Web Vitals 计划旨在量化网站的用户体验，以便找出有待改进的方面。
不过，许多 Core Web Vitals 文档都面向 Web 开发者，他们对技术有深入的技术了解，并可以完全控制其代码。许多网站是由非开发者使用“网站开发工具”平台（如 WordPress、Shopify、Wix 或其他类似解决方案）创建的，通常没有网站开发团队。
即使有专门的团队或 Web 开发者，他们并不是唯一负责 Web 性能的团队。从确定内容和设计，到制定广告策略（为自己的网站吸引更多流量），业务决策者对网站效果有着巨大的影响。这些决策通常对网站性能有着重大影响。
本指南旨在为网站构建者和所有者提供一些相关信息，帮助他们尽可能了解并改善用户体验，而无需具备深厚的网络开发技术知识。
同时，许多性能问题都需要开发者实施技术修复，我们的面向开发者的指南可协助开发者解决这些问题。这并不是一份全面的指南，而是更详细地向业务决策者介绍核心网页指标计划，并介绍导致网页性能不佳的一些常见非开发根本原因。除此之外，Web 开发者很可能需要积极参与，以便取得更进一步的发展。
什么是 Core Web Vitals？
Core Web Vitals 是一组三个指标，旨在衡量网页的用户体验，尤其是网页给用户带来的速度。每项运动都有三个字母的缩写：
- Largest Contentful Paint (LCP) 衡量的是加载性能，即网页开始加载后，网页上最醒目的内容显示所需的时间（以秒为单位）。
- Cumulative Layout Shift (CLS) 用于衡量网页的视觉稳定性，即内容在加载时移动的幅度。
- Interaction to Next Paint (INP)已于 2024 年 3 月 12 日正式取代 FID，它衡量的是网页的响应速度，即网页对点击、点按和键盘互动的响应速度。
每个指标都从不同的方面衡量用户体验。Google 还为每个指标提供了建议的阈值，如果低于此值，则视为“良好”；高于此值则为“不佳”。如果达到这些阈值，网页会被视为处于“需要改进”范围。请注意，这些指标的值越低越好。
如何衡量 Core Web Vitals？
核心网页指标是由您网站的真实用户衡量的，因此不同的用户会得出不同的结果。它们不是“Google 的想法”，也不是“Googlebot 的想法”，而是网站的实际用户的体验。
部分用户将使用速度更快的设备和更快的网络。有些则会连接到速度较慢的设备或网络。有些用户会访问您网站上更简单、更快速的网页，有些则会访问更复杂、速度更慢的网页。然后，我们会将所有这些用户体验的结果进行汇总，以全面衡量您的整个网站。
Google 会在 Chrome 用户体验报告 (CrUX) 中提供已选择启用的 Chrome 用户的数据，该报告会馈送给 PageSpeed Insights 和 Google Search Console 等许多 Google 工具。
CrUX 适用于数百万个热门网站，但并非所有网站都支持 CrUX。其他真实用户监控 (RUM) 工具也可以收集您网站的这些指标。
如何找到我的网站的核心网页指标？
有很多工具可以显示 Google 和第三方提供的核心网页指标指标。这篇博文介绍了两种工具，可让您快速查看网站的 Core Web Vitals。如需更深入地了解其他 Google 工具（包括使用这些工具解决核心网页指标问题的工作流程），请参阅包含 Google 工具的核心网页指标工作流程一文。
如果您的平台提供集成式 RUM 解决方案，就可以为您网站上的网页提供更详细的信息，或者允许您深入查看特定网页或对用户进行细分，以帮助了解和识别问题。
PageSpeed Insights
若要快速查看无需设置的情况，您可以使用 PageSpeed Insights (PSI)。输入网址，然后点击“分析”。如果您的网站包含在 CrUX 中，系统应该会快速显示“了解您的真实用户的体验”部分：
该数据可反映真实的 Chrome 用户在过去 28 天内对您网站的体验。您会在顶部看到三个 Core Web Vitals，下面是其他支持指标（包括待处理的 INP 指标）。只有核心网页指标会计入页面顶部的总体通过/失败评估，但其他指标对于排查核心网页指标的问题很有用，详见下一部分。
您可以使用此部分顶部的按钮在移动设备视图和桌面视图之间切换。您还可以使用右上角的切换开关在此网址和该来源的所有数据之间切换（两者都存在数据）。
这些数字应该能够大致反映出您网站的效果、哪些指标有待改进，以及哪些设备类型可以改进。
Google Search Console
Google Search Console (GSC) 仅供网站所有者使用，因此您必须先注册并验证网站所有权，然后才能使用 Google Search Console。它提供了有关 Google 搜索如何看待您的网站的详细信息。
与 PageSpeed Insights 不同，Google Search Console 会列出 Google 搜索在您网站上发现的所有网页，并提供所有这些网页的核心网页指标详细信息：
系统会将网页集中到网址群组中，以便您轻松查看特定类别的网页（例如商品详情页、博客网页等）是否存在核心网页指标问题。由于这些网页通常是基于类似的技术或模板制作的，因此这些网页中出现的问题可能有共同的原因。
网站开发工具的常见问题核心网页指标问题
许多性能问题都需要开发者实施技术修复，我们的开发者指南可帮助开发者解决此问题。在本部分中，我们将讨论一些常见的非开发者问题，业务决策者可以帮助改进这些指标。
我们所说的“非开发者”是指使用网站开发工具平台的那些网站，在这些平台上，他们对网站实际编码方式的控制有限，或者可能决定网站设计或帮助确定预算优先顺序的业务决策者。
Largest Contentful Paint (LCP) 问题
LCP 旨在通过衡量从用户点击链接到浏览器中显示最大的内容（通常是横幅图片或标题）所用的时间，来衡量网页的加载速度。
为了提供良好的网页体验，网页应在用户点击链接后的 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 测试运行的时间越长，用户遇到网页性能不佳可能的时间就越长。
- 最重要的是，请务必在不再需要时移除 A/B 测试实验。
Cumulative Layout Shift (CLS) 问题
CLS 用于衡量网页的视觉稳定性，即网页内容在加载内容时的偏移程度。如果用户已经开始阅读网页，但随着更多内容或广告位的放置而失去位置，这可能会分散用户的注意力。如果页面布局过度偏移，也会导致用户无意中点击错误的内容。请格外小心稍后加载且可能会移动部分初始网页内容的动态内容。
此使用数学公式计算得出，用于计算内容的偏移量和偏移幅度。它以无单位分数表示，如果值为 0.1 或更低，则视为“良好”；如果值大于 0.25，则视为“差”。
以下部分将介绍影响 CLS 的一些常见问题，这些问题可影响业务决策者施加影响。
检查您向下滚动页面时图片的加载方式
许多模板会避免在页面靠下位置加载图片，以便为初始网页加载期间屏幕上显示的图片提供更多资源。然后，当用户向下滚动时，系统会加载这些图片。这种图片加载技术称为“延迟加载”。
页面模板应为延迟加载的图片预留空间，这样一来，如果用户在图片加载机会之前非常快速地滚动，图片周围的内容就不会四处移动。如果您的模板或平台不支持此功能，请考虑改用可执行该操作的模板或平台。
谨慎选择置入内容中间的广告
由于广告的加载时间通常比上一部分中介绍的图片长，因此在内容中间插入的广告可能会使您的内容向下移动。这类广告显示在主页面内容的侧面是一种常见模式，可以降低这种风险。这在实践中如何实现取决于您的特定平台以及您用来构建网站的模板。
避免在网页顶部添加动态内容
避免在网页加载完毕后在网页顶部添加提醒和横幅（例如 Cookie 横幅或特别优惠）。选择在主要内容上方叠加提醒和横幅可以防止网页内容切换。与上一部分类似，此处显示的选项取决于您的网页所使用的平台和模板。
Interaction to Next Paint (INP) 问题
INP 用于衡量网页的“响应能力”，可评估网页能否快速响应互动，例如点击、点按和键盘输入。无法快速响应用户输入的页面通常会让人感觉运行缓慢，并且会让用户感到失望。
INP 会衡量网页生命周期内每次符合条件的互动的整体情况，并报告最差的互动。INP 的良好阈值为 200 毫秒，不佳阈值为 500 毫秒。INP 是对 FID 的增强功能，可以更好地衡量响应能力，因此已取代 FID 作为衡量响应能力的核心 Web 指标。
响应性指标（尤其是 INP）是比较棘手的指标，需要优化。当这些指标达到“较差”阈值时，通常是因为网页试图执行太多操作而延迟互动，所以这里的主要解决方法是移除不必要的代码，打造更精简的网页。
以下部分将介绍影响 INP 的一些常见问题，这些问题可能会让业务决策者施加影响。
迎接春季大扫除！
检查添加到您网站的插件和微件，如果不再使用，请将其移除。添加插件进行试用通常很轻松，但如果您觉得插件没用，也很容易忘记删除它们。这是导致互动缓慢的原因之一，但与其他许多优化相比，该优化相对简单。
同样，如果您使用跟踪代码管理器处理营销广告系列，请务必移除旧广告系列。即使不再触发这些代码，已过期的营销广告系列中的代码仍然需要在每个网页上下载和编译，这可能会降低初始网页加载期间的用户互动速度。
避免使用开销大的微件和插件
计算开销大的 widget 和插件可能看起来很美观，但它们会改善用户体验，还是会让它变得更糟？PageSpeed Insights 中的“诊断性能问题/Lighthouse”报告可帮助您找出对网站性能有显著影响的 JavaScript。
理想情况下，请只将微件放置在需要它们的页面上 - 如果您在“与我们联系”页面上仅使用嵌入的 Google 地图，则无需在每个页面上加载微件，否则可能会导致响应速度问题。
考虑广告数量，尤其是在移动设备上
对许多企业而言，广告是一种很好的变现策略，但它们往往非常复杂且占用大量资源。您拥有的广告越多，它们占用的资源就越多，这会干扰网页速度。在移动设备上尤其如此，因为移动设备的处理能力通常不如在台式机或笔记本电脑设备上那么好。
在创收和效果之间权衡利弊。如果用户因为糟糕的体验而提前离开，额外增加的广告所带来的收入可能会比添加的收入多。
避免页面过大
大型、复杂的网页需要更多的处理时间才能显示。例如，如果您的产品库包含 1,000 种不同的产品，那么系统需要一段时间才能显示在用户的浏览器窗口中。考虑何时对网页进行分页，以缩短这部分时间。
如何获得更多帮助？
这篇博文列出了企业主可以采取的一些可能会影响业绩的一般注意事项。除此之外，您可能还需要咨询 Web 开发者，以便深入了解您可以采取哪些措施来改善网站的性能。
针对具体平台的信息
大多数平台都非常关心其 Web 性能，并且可能针对如何改进性能提供针对具体平台的专用建议。在使用以下平台的过程中，您还可以联系专门的网站性能团队，他们会就如何改进您的网站为您提供进一步建议。
Lighthouse 还会使用堆栈包功能显示平台专属的信息，这些功能可以引导受支持平台的用户获取适当的建议。
平台会随着时间的推移不断改进，并且许多平台目前正在专注于性能和核心网页指标。请确保您的平台处于最新状态，以便从平台开发者所做的最新改进中受益。
如果您使用托管的平台，那么最简单的方法是在平台提供商自动管理平台（包括平台更新）。如果您自行托管平台（例如，将本地 WordPress 安装到您自己的服务器上），那么确保该平台定期更新，可让您的网站从平台开发者实施的任何改进中受益。商家应优先进行此维护，或者选择一项服务来为其管理此维护工作。
与 Web 开发者互动
具备网站性能专业知识的 Web 开发者所能解决的问题可能比企业主多。最初构建网站时，您可能已聘请了 Web 开发者，或者为了定期进行更改；或者，您可能有专门的开发团队，或者可能需要寻找一位开发者来接洽（最好是具备 Web 性能专业知识的开发者）。
如果上述建议还不足以解决网站性能问题，请向开发者求助，但希望前面的示例也表明，与开发者合作在业务优先事项与开发决策之间取得平衡是非常重要的，以便为您的网站找到合适的解决方案。
请注意，网络性能很少是一劳永逸的工作。要维持良好的网站性能，通常需要定期监控和维护，以确保网站在改进后不会出现退化。
总结
网站通常是商家与客户互动的第一个入口，您希望为客户带来良好的体验。这既适用于对您的商家产生第一印象的初访者，也适用于回头客和忠实客户，他们应尽可能获得顺畅的体验，最好避免可能给他们留下负面印象的失望因素。核心网页指标是 Google 建议网站考虑的一项用户体验指标。网络提供了丰富的资源，因此，如果用户对您的网站感到失望，他们很容易就会去尝试其他网站。
同时，核心网页指标只是衡量您网站的一个指标。企业需要自行决定在网站上投入多少资金以及这些投资能带来怎样的回报。
致谢
缩略图图片，由 Carlos Muza 提供，选自 Unsplash 网站