我为什么要写这篇文章

我现在运营着几个网站，自从开始以来，我的表现一直起伏不定。我有时发现它非常烦人。一切似乎对我来说在本地运行得很好，但后来我检查我的服务器分析，我发现对于某些国家/地区我的速度很糟糕。

似乎一直都是CLS或者液晶聚合物这对我来说一直是个问题。所以我想我应该分享我的经验并尝试帮助其他人解决这个问题，特别是如果你正在经历同样的事情。或者也许您在这方面遇到了麻烦并且有独特的观点或解决方案？我很想听听。

根据搜索引擎杂志，优化这两个指标可以显着提高网站的可见度和用户满意度。这在理论上听起来很棒，但实际上修复它们却是另一回事。让我向您介绍我所学到的知识。

CLS 和 LCP 到底是什么？

在我陷入自己的困境之前，让我解释一下这些实际上是什么，因为当我第一次在 Google Search Console 中看到这些缩写词时，我不知道它们的含义。

累积布局偏移 (CLS)测量页面布局在加载时跳转的程度。你知道当你要点击一个按钮时整个页面都会移动，所以你点击了错误的东西吗？这是一个 CLS 问题。作为一个用户，这是令人难以置信的沮丧，而且搜索引擎也会因此而惩罚你。

最大内容涂料 (LCP)测量页面上最大的可见元素加载所需的时间。通常这是一个英雄图像或一大块文本。如果您的 LCP 速度很慢，您的访问者就会盯着半加载的页面，许多人就会离开。

这两个都属于 Google 的范围核心网络生命力，这直接影响你的搜索排名。因此，即使您的内容非常精彩，糟糕的 CLS 和 LCP 分数也会阻碍您的发展。

针对 CLS 和 LCP 优化您的网站

🖼️

设置图像尺寸
指定图像的宽度和高度

📢

负责任地使用广告
避免意外调整广告尺寸

⚡

预加载重要资源
确保关键内容快速加载

🔄

最小化动态内容
限制加载期间更改的内容

📊

定期监控绩效
使用工具跟踪 CLS 和 LCP 分数

我的 CLS 噩梦

CLS 是我遇到的第一个问题。我的页面看起来不错，但我的分数很糟糕。经过大量挖掘，我发现了主要的罪魁祸首：

没有尺寸的图像：我没有在图像上设置宽度和高度。浏览器不知道要保留多少空间，因此一旦图像加载，一切都会发生变化。
字体加载较晚：我的自定义字体是在页面呈现后加载的，导致我的所有文本随着新字体取代后备字体而跳转。这一点很微妙，但它加起来了。
动态内容：我有一些组件在页面加载后注入内容，将它们下面的所有内容推下。

我的大多数 CLS 问题的修复都非常简单。我开始为所有图像和媒体定义明确的尺寸。我在字体加载中添加了字体显示交换，以便后备立即呈现。我用 CSS 为任何动态加载的内容保留了空间。

类似的工具谷歌页面速度洞察在这里提供了巨大的帮助。它们准确地向您显示哪些元素导致布局变化，因此您无需猜测。

然后是 LCP 问题

正当我以为事情已经解决的时候，我的LCP分数开始萎靡不振。令人沮丧的是，我的网站在英国的加载速度很快，但我的分析显示在其他国家/地区的速度很糟糕。这就是 LCP 的特点 - 它在很大程度上取决于您的用户所在的位置以及他们距服务器的距离。

我发现的主要问题是：

未优化的大图像：我的英雄图片太大了。我上传的是全分辨率照片，没有压缩它们。
服务器响应时间：如果没有 CDN，远离我的服务器的用户需要等待很长时间才能收到第一个响应。
渲染阻塞 JavaScript：我在头部加载了脚本，这些脚本会阻止页面渲染，直到它们完成为止。

作为贝克林科的研究表明，具有良好 LCP 分数的网站具有明显更高的参与度和更低的跳出率。一旦我开始解决这些问题，我就可以看到我自己的分析中的差异。

是什么真正帮助了我的 LCP

我开始压缩所有图像并尽可能使用 WebP 格式。我还移动了非必要的脚本以异步加载或完全推迟它们。我的网站托管在 Vercel 上，它为我处理许多边缘网络内容，但如果您使用传统托管，请设置一个CDN可以对国际交通产生巨大的影响。

CDN 将您网站的副本存储在世界各地，因此访问者可以从距离他们较近的地方而不是单个源服务器获得服务。如果您发现特定区域的速度很慢，这是首先值得考虑的事情之一。

烦人的部分——它从来没有真正“修复”

这是没人告诉你的CLS 和 LCP。您不会修复它们一次并继续前进。每次我添加新功能、新图像或更改布局时，分数都会再次发生变化。这是一个持续的事情。

我有几周时间在 Google Search Console 中一切都是绿色的，然后我添加了一个新组件，突然我的 CLS 再次被标记。这确实很烦人，但我现在已经学会在每次重大更改后检查我的核心网络生命。

CLS和LCP对用户体验的影响

0.1秒

用户容忍度

32%

跳出率增加

转化率下降

核心网络生命力

SEO排名重要性

报告由金融品牌强调网站速度慢会直接导致收入损失。即使感觉很乏味，这也足以提供坚持下去的动力。

对我帮助最大的工具

如果您正在处理同样的问题，以下是我实际使用的并且认为有用的工具：

谷歌搜索控制台：这是我第一次注意到我的问题的地方。它按页面显示您的 Core Web Vitals 分数，并准确告诉您需要注意的事项。
页面速度见解：进行更改后，我会浏览每个页面。它提供了具体的、可操作的建议，而不是模糊的建议。Shopify 的网络性能指南也是一个很好的伴侣资源。
网络生命力扩展：当您浏览自己的网站时，此 Chrome 扩展程序会实时显示您的 CLS、LCP 和其他指标。我在开发过程中一直保持它。

一旦您确定了性能问题，请使用我们的谷歌搜索人工智能排名工具检查您的改进是否真正转化为更好的搜索可见性。如果固定分数对你的排名没有帮助，那么它就没有意义。

如果你正在经历这个，我的建议

如果你的表现和我一样起起落落，我的建议如下：

不要恐慌。CLS 和 LCP 问题非常常见。你并没有做错所有事情——这些指标只是敏感的。
按国家/地区检查您的分析。您的网站可能对您来说速度很快，但对其他地方的访问者来说可能很慢。 CDN 可以快速解决这个问题。
首先修复图像。根据我的经验，未优化的图像和缺失尺寸是大多数 CLS 和 LCP 问题的原因。
每次更改后进行测试。养成每当进行重大更新时运行 PageSpeed Insights 的习惯。
要有耐心。Google Search Console 数据可能需要几天或几周的时间才能更新。不要仅仅因为仪表板尚未更改就认为您的修复不起作用。

我仍在学习并仍在处理这个问题。我的成绩比他们好，但我不会称它们为完美。如果您找到了适合您的解决方案，我真诚地想听听它们。您还可以尝试使用我们的可视化您的性能数据免费在线图表制作者跟踪一段时间内的改进情况。

底线是这样的：CLS 和 LCP不会消失。它们对于搜索引擎优化很重要，对于用户体验也很重要，如果你像我一样运营网站，它们会让你保持警惕。但它们是可以修复的，你所做的每一项改进都是值得的。