网站正在开发中，目前还未开放购买功能，敬请关注，有什么问题请联系我们，谢谢！
Google 分享了新的 Core Web Vitals 建议，这些建议对大多数开发人员来说都是现实的，并且适用于大多数网站。
- Core Web Vitals 是衡量加载时间、交互性和视觉稳定性的三个指标。
- 谷歌的 Chrome 团队花了一年的时间来计算它可以提供的关于 Core Web Vitals 的最重要建议。
- 这些是您在时间有限时应优先考虑的建议。
Google 正在分享一组更新的优化Core Web Vitals的建议，以帮助您在时间有限的情况下决定优先考虑什么。
Core Web Vitals 是衡量加载时间、交互性和视觉稳定性的三个指标。
谷歌认为这些指标对于提供积极的体验至关重要，并使用它们在其搜索结果中对网站进行排名。
多年来，Google 提供了许多提高 Core Web Vitals 分数的建议。
尽管 Google 的每条建议都值得实施，但该公司意识到期望任何人都做到这一切是不现实的。
如果您在优化网站性能方面没有太多经验，那么要弄清楚什么会产生最重大的影响可能会很困难。
您可能不知道从哪里开始，时间有限，无法专注于改进 Core Web Vitals。这就是谷歌修订后的推荐列表的用武之地。
在一篇博客文章中，谷歌表示 Chrome 团队花了一年时间试图确定它可以提供的关于 Core Web Vitals的最重要建议。
该团队整理了一份建议清单，这些建议对大多数开发人员来说都是现实的，适用于大多数网站，并且对现实世界具有有意义的影响。
以下是 Google 的 Chrome 团队的建议。
优化 Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) 指标衡量页面的主要内容对用户可见所花费的时间。
谷歌表示，只有大约一半的网站符合推荐的 LCP 阈值。
这些是 Google 改进 LCP 的首要建议。
确保可以在 HTML 源代码中轻松找到 LCP 资源
根据 HTTP Archive 的 2022 Web Almanac，72% 的移动网页以图像作为主要内容。为了改进 LCP，网站必须确保快速加载图像。
如果页面在图像开始加载之前等待 CSS 或 JavaScript 文件完全下载、解析和处理，则可能无法满足 Google 的 LCP 阈值。
作为一般规则，如果 LCP 元素是图像，图像的 URL 应该始终可以从 HTML 源中找到。
确保优先考虑 LCP 资源
除了在 HTML 代码中包含 LCP 资源外，Google 还建议对其进行优先排序，不要将其拖到其他不太重要的资源之后。
即使您已使用标准 <img> 标签将 LCP 图像包含在 HTML 源代码中，如果网页的 <head> 部分中的多个 <script> 标签位于 < img> 标签之前，它也会延迟加载时间你的图像资源。
最好避免任何可能降低 LCP 图像优先级的操作，例如添加 loading=”lazy” 属性。
使用任何自动将延迟加载应用于所有图像的图像优化工具时要小心。
使用内容分发网络 (CDN) 来减少第一次被咬 (TTFB) 的时间
在加载任何其他资源之前，浏览器必须接收初始 HTML 文档响应的第一个字节。
这段时间的衡量标准称为首字节时间 (TTFB)，这种情况发生得越快，其他进程就可以越早开始。
为了最大限度地减少 TTFB，请从靠近用户的位置提供内容，并对经常请求的内容使用缓存。
谷歌表示，同时做到这两点的最佳方式是使用内容分发网络 (CDN)。
优化 Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) 是一种用于评估网站视觉布局稳定性的指标。据谷歌称，大约 25% 的网站不符合该指标的推荐标准。
这些是 Google 改进 CLS 的首要建议。
为页面内容设置显式大小
当网站上的内容在完成加载后改变位置时，可能会发生布局变化。尽可能提前预留空间以防止这种情况发生很重要。
布局偏移的一个常见原因是未调整大小的图像，这可以通过显式设置宽度和高度属性或等效的 CSS 属性来解决。
图片并不是导致网页布局变化的唯一因素。其他内容（例如第三方广告或稍后加载的嵌入式视频）可以为 CLS 做出贡献。
解决此问题的一种方法是使用 CSS 中的纵横比属性。此属性相对较新，允许开发人员为图像和非图像元素设置纵横比。
提供此信息允许浏览器在宽度基于屏幕尺寸时自动计算适当的高度，类似于它对具有定义尺寸的图像的处理方式。
确保页面符合 Bfcache 的条件
浏览器使用称为后向/转发缓存或简称 bfcache 的功能，它允许使用内存快照从浏览器历史记录中较早或较晚的页面立即加载页面。
此功能可以通过消除页面加载期间的布局偏移来显着提高性能。
Google 建议使用 Chrome DevTools 检查您的页面是否符合 bfcache 的条件，并解决它们不符合的任何原因。
避免动画/过渡
布局变化的一个常见原因是网站上元素的动画，例如从顶部或底部滑入的 cookie 横幅或其他通知横幅。
这些动画可以将其他内容推开，影响 CLS。即使他们不这样做，为他们设置动画仍然会影响 CLS。
谷歌表示，为任何可能影响布局的 CSS 属性设置动画的页面拥有“良好”CLS 的可能性要低 15%。
为了缓解这种情况，最好避免对任何需要浏览器更新布局的 CSS 属性进行动画处理或转换，除非它是为了响应用户输入，例如点击或按键。
建议尽可能使用 CSS transform 属性进行过渡和动画。
优化首次输入延迟 (FID)
首次输入延迟 (FID) 是衡量网站响应用户交互的速度的指标。
虽然大多数网站在这方面表现良好，但谷歌认为还有改进的余地。
谷歌的新指标，与下一个油漆的互动 (INP)，是 FID 的潜在替代品，下面提供的建议与 FID 和 INP 都相关。
避免或中断长任务
任务是浏览器执行的任何离散工作，包括渲染、布局、解析以及编译和执行脚本。
当任务花费很长时间（超过 50 毫秒）时，它们会阻塞主线程并使浏览器难以快速响应用户输入。
为避免这种情况，通过为主线程提供更多机会来处理关键的用户可见工作，将长任务分解为更小的任务会很有帮助。
这可以通过经常屈服于主线程来实现，以便渲染更新和其他用户交互可以更快地发生。
避免不必要的 JavaScript
具有大量 JavaScript 的网站会导致任务竞争主线程的注意力，这会对网站的响应能力产生负面影响。
要从您网站的资源中识别和删除不必要的代码，您可以使用 Chrome DevTools 中的覆盖工具。
通过减少加载过程中所需资源的大小，网站将花费更少的时间来解析和编译代码，从而带来更加无缝的用户体验。
避免大型渲染更新
JavaScript 并不是唯一可以影响网站响应能力的东西。呈现可能成本高昂，并且会干扰网站响应用户输入的能力。
优化渲染工作可能很复杂，并且取决于具体目标。但是，有一些方法可以确保渲染更新是可管理的并且不会变成长期任务。
谷歌建议如下：
- 避免使用 requestAnimationFrame() 进行任何非视觉工作。
- 保持你的 DOM 大小小。
- 使用 CSS 包含。
结论
Core Web Vitals 是提供积极的用户体验和在 Google 搜索结果中排名的重要指标。
尽管 Google 的所有建议都值得实施，但这份简明清单是切合实际的，适用于大多数网站，并且可以产生有意义的影响。
这包括使用 CDN 来降低 TTFB，为页面内容设置明确的大小以改进 CLS，使页面符合 bfcache 的条件，以及避免不必要的 JavaScript 和 FID 动画/转换。
通过遵循这些建议，您可以更好地利用您的时间并充分利用您的网站。
资料来源：Web.dev
