核心网页性能对SEO的影响

LCP与其他页面速度测量值不同。许多其他页面速度指标（如TTFB和First Contextual Paint）不一定代表用户打开网页的情况。

另一方面，LCP关注的是页面速度方面真正重要的东西：能够看到页面并与页面交互。

您可以使用Google PageSpeed Insights查看LCP分数。

这很有帮助。尤其是在发现需要改进的地方时。在webpagetest.org等工具上使用Google Pagespeed Insights还有一个好处，那就是你可以看到你的页面在现实世界中的表现（基于Chrome浏览器数据）。

我建议查看GSC中的LCP数据。

与Google PageSpeed Insights一样，Search Console中的数据来自Chrome用户体验报告。

但与PageSpeed Insights不同，您可以在整个站点上查看LCP数据。因此，你不需要逐个分析随机页面，而是得一个好的、坏的或介于两者之间的URL列表。

说到这里，谷歌有专门的LCP指南。他们将LCP速度分为三个级别：好、需要改进和差。

简而言之，您希望站点上的每个页面在2.5秒内到达LCP。

对于大型网页来说，这可能是一个真正的挑战。或具有大量功能的页面。

例如，我们网站的这个页面有几十张高分辨率图像。

这就是为什么该页面上的LCP为5.1秒（这被认为是“差”）。

这不是借口。但这表明，改进LCP并不像安装CDN那么简单。在这种情况下，我们可能不得不从页面中删除一些图像。并清理页面的代码。

当然这值得优化！

有了这些，您可以做一些事情来改善站点的LCP：

• 删除任何不必要的第三方脚本：我们最近的页面速度研究发现，每个第三方的脚本都会使页面速度降低34毫秒。
• 升级您的web主机：更好的托管=更快的整体加载时间（包括LCP）。
• 设置延迟加载：延迟加载使图像仅在有人向下滚动页面时加载。这意味着您可以更快地实现LCP。
• 删除大型页面元素：Google PageSpeed Insights将告诉您，您的页面是否存在减慢页面LCP速度的元素。

• 最小化CSS：庞大的CSS可以显著延迟LCP时间。

首次输入延迟（FID）

接下来，让我们来看看谷歌的第二个Core Web Vital:首次输入延迟。

此时，您的页面已实现FCP。但问题是：用户可以与您的页面交互吗？

嗯，这正是FID衡量的：用户实际与页面交互所需的时间。

交互示例包括：

• 从菜单中选择选项
• 单击站点导航中的链接
• 将电子邮件输入字段
• 在移动设备上打开“手风琴文本”

谷歌认为FID很重要，因为它考虑了现实生活中用户如何与网站互动。
与FCP一样，他们对什么构成可接受的FID有特定的标准。

是的，FID从技术上衡量页面上发生某件事情所需的时间。所以在这个意义上，这是一个页面速度分数。但它超越了这一步，并衡量了用户在页面上实际执行某些操作所需的时间。

对于一个100%内容的页面（如博客文章或新闻文章），FID可能不是什么大事。唯一真正的“交互”是向下滚动页面。或者通过捏来放大和缩小。

事实上，我的搜索控制台甚至没有为我的站点报告FID。

我想这是因为我真的没有任何登录页面。或者其他需要立即输入内容的页面。

但对于登录页面、注册页面或其他用户需要快速点击的页面，FID是巨大的。

例如，考虑一下这样一个页面的加载体验：

对于这样的登录页面，加载内容所需的时间并不那么重要。重要的是您可以多快地开始输入登录详细信息。

有了这些，你可以做一些事情来提高网站的FID分数。

• 最小化（或延迟）JavaScript：当浏览器加载JS时，用户几乎不可能与页面交互。所以最小化或延迟页面上的JS是FID的关键。
• 删除任何非关键的第三方脚本：与FCP一样，第三方的脚本（如Google Analytics、热图等）可能会对FID产生负面影响。
• 使用浏览器缓存：这有助于更快地加载页面上的内容。这有助于用户的浏览器更快地完成JS加载任务。

累积布局偏移（CLS）

累积布局偏移（CLS）是页面加载时的稳定性（也称为“视觉稳定性”）。

换句话说：如果页面上的元素在页面加载时四处移动，那么CLS就很高。这很糟糕。

相反，您希望页面元素在加载时相当稳定。这样，当页面完全加载时，用户不必重新学习链接、图像和字段的位置。或者错误地点击某个东西。

以下是谷歌为CLS制定的具体标准：

正如你所看到的，这是我需要做的事情，尤其是在手机上。

下面是一些简单的方法，您可以将CLS降至最低。

• 对任何媒体（视频、图像、GIF、信息图形等）使用设置大小属性维度：这样，用户的浏览器就可以准确地知道该元素在该页面上将占用多少空间。并且不会在页面完全加载时动态更改它。
• 确保广告元素有一个预留的空间：否则，它们可能会突然出现在页面上，将内容向下、向上或向侧推。
• 在折叠下面添加新的UI元素：这样，它们就不会将用户“期望”的内容向下推。