Web 性能入门指南-1.3 SEO与Web性能

网络性能和搜索引擎优化（SEO）一直在不断发展。这意味着您需要随时了解要跟踪哪些页面速度指标以及这些指标在您自己的页面上的表现如何。

核心网络指标是什么

自从谷歌于 2020 年发布核心网络指标以来，它们就成为许多人最关心的问题。但谷歌在搜索排名中优先考虑网页速度并不是什么新鲜事，即使是在移动设备上也是如此。早在 2013 年，谷歌就宣布在移动设备上加载缓慢的网页将在移动搜索中受到惩罚。

Google 的 搜索算法影响桌面和移动设备，将核心网络生命力作为用户体验排名因素。核心网络生命力 是 Google 于 2020 年初推出的一项计划。核心网络指标（目前）是一组三个指标，旨在衡量页面的加载、交互性和视觉稳定性：

• 最大的内容绘画（LCP）

• 交互到下一次绘制（INP）

• 累计布局偏移（CLS）

有几件事很清楚：

• 作为前提，核心网络指标需要一直关注

• 衡量网络的核心指标仍在不断发展；

• 这些指标很可能一直处于演变状态。这是件好事。我们需要尽最大努力保持最新状态——不仅要了解要跟踪哪些指标，还要了解它们衡量什么以及它们为什么重要。

当谈到搜索排名时，网络性能有多重要？

早在核心网络指标出现之前，页面速度就已经对 SEO 产生了影响。早在 2011 年，Smartfurniture.com 就分享了：

“我们发现，只需提高网站性能，就能在搜索引擎排名上实现质的飞跃。总体而言，由于排名提高，我们的销售额有所增加，网站的自然流量增加了 20%，页面浏览量增加了 14%。”

最近，Pinterest 分享说 ，重建他们的网站时考虑到了性能，导致自然搜索流量增加了 15%。（您可以在 WPOstats.com上找到更多与 SEO 相关的案例研究。）

出色的性能并不能替代糟糕的内容

在用户体验方面，优质内容仍然是王道。谷歌也承认这一点：

“虽然页面体验很重要，但 Google 仍然希望对总体信息量最大的页面进行排名，即使页面体验不佳。出色的页面体验并不比出色的页面内容更重要。但是，如果存在许多相关性相似的页面，那么页面体验对于搜索可见性来说可能更为重要。”

您应该关注哪些 SEO 性能指标？

从总体上看，SEO 不仅仅关乎 Google 和核心网络指标。然而，Google 的全球市场份额接近 87%，并且是 唯一一家将网页速度纳入其算法的搜索引擎。因此，对于我们作为网络性能人员的目的而言，Google 控制着目标的走向。

如上所述，Google 通过核心网络指标从搜索到性能划出了一条清晰的界线。目前，以下是构成网络指标的指标：

• 最大内容绘制 (LCP) – 视口中最大元素的渲染时间。它仅在某些元素上进行跟踪，例如 IMG 和 VIDEO（ 在此处了解更多信息）。

• 交互到下一次绘制 (INP) – 页面响应所有用户输入（例如点击、按键或轻触）所需的总时间。INP 报告一个基于时间的值，所有（或几乎所有）用户交互都低于该值。

• 累积布局偏移 (CLS) – 一个分数，用于记录用户在页面加载过程中遇到意外布局偏移的频率。广告和自定义字体等元素可能会在用户阅读重要内容时将其推来推去。较低的 CLS 分数可能表明您的页面让用户感觉不流畅（在此处了解更多信息）。

Google 还为每个指标定义了“良好”、“需要改进”和“较差”的阈值，如下图所示：

您可以做些什么来让您的网页更快的 SEO 速度？

这是一个陷阱问题。我们认为您不应该仅仅为了 SEO 目的而加快网页速度。您应该让网页更精简、更快速，因为这会让用户更满意，并减少数据消耗，尤其是在移动设备上。毫不奇怪，更满意的用户会在您的网站上花费更多时间（和更多金钱），更有可能返回，也更有可能向其他人推荐您的网站。

话虽如此，您可以采取多种措施来修复您的页面，改善用户体验，并最终提高您的 Web Vitals 结果。如果您想让页面速度更快，首先要查看的是图像和渲染阻塞资源。

1. 优化图片

• 尽早请求并加载关键图片

• 使用srcset图片属性和高效的现代图像格式

• 使用压缩技术

• 对屏幕外图片进行懒加载

• 设置图片的高度和宽度尺寸

• 使用 CSS 的 aspect-ratio 属性或宽高比盒子

• 避免使用对关键CSS和JS造成网络拥塞的图片

如需更多建议，Google 工程师 Addy Osmani 在 Smashing Meets for Speed 上就图像优化进行了精彩的演讲。

2. 消除/减少阻塞渲染的资源

阻止 CSS 和 JavaScript 是影响 LCP 时间的瓶颈。Google 开发专家 Sia Karamalegos 撰写了一篇关于如何 识别和消除渲染阻塞资源的精彩文章。

3. 利用经过验证的 Web Vitals 模式

有很多常见的页面元素（例如轮播、横幅、视频和自定义字体）可能会对您的性能指标产生严重的负面影响。 这是一个方便的常见 UX 模式集合 （包括您可以在自己的页面上使用的代码示例），这些模式已针对核心 Web 指标进行了优化。