如何修复LCP问题?丨谷歌核心页面指标LCP大于4s

如何修复LCP问题

时至今日,仅仅拥有写得好的文章并不能肯定获得最佳的SEO排名。实际上,页面加载速度也会影响你的页面在谷歌上的搜索排名。

很多人可能注意到,谷歌搜索控制台(Google Search Console)中增加了核心网页的指标。而其中至关重要的指标之一就是LCP,而且大部分网站都会出现这个错误提示:桌面或移动端会显示大于4s LCP。

不用担心,这其实是一个非常常见的问题,而且你正在看的这个博客也面临这个问题。

所以,今天这篇文章为大家更多地解释一下如何修复LCP问题。

文章目录

什么是LCP?

LCP(Largest Contentful Paint)是谷歌以用户为中心的指标,用于衡量在核心网页指标 (Core Web Vitals)中看到的网页的感知加载速度。具体来说,它是测量服务器在视口中显示最大的可见元素所需的时间。 这个指标是由谷歌创建的,目的是通知网页所有者他们的网站加载速度的问题,以确保无缝的用户体验。理想情况下,一个网页应该在2.5秒内完全加载其LCP。如果超过这个时间,你应该关注你的网页在良好的用户体验方面的表现。 如果你看到LCP的问题在桌面或手机端,一般都是大于4s的错误,那么这意味着服务器需要花费超过4秒的时间来渲染视口中最大的可见元素。 LCP大于4秒的LCP被谷歌评为差,它降低了核心网络活力体验。 因此,图片或视频在你的网站上加载的时间最有可能导致这个错误 ,那你就需要考虑如何修复LCP的问题了。

什么是核心网络要素?

正如我们前面提到的,谷歌在2021年推出了一个新的工具,衡量网页的整体用户体验:Core Web Vitals。它考虑了三个方面来衡量页面速度和用户互动,这些是加载性能、响应性和视觉稳定性。

目前,谷歌在核心网络指标中只测量3个指标,即LCP、FID和CLS,但在未来,它将包括更多指标。

  • LCP(Largest Contentful Paint)代表最大的内容画面渲染时间
  • FID( First Input Delay)代表首次输入延迟
  • CLS(Cumulative Layout Shift)代表累积布局偏移

LCP评估了最大元素的加载速度,而FID则检查了页面对用户第一次交互的反应速度,比如说点击。为了获得良好的用户体验,FID应该小于100毫秒。

同时,CLS检查网页上的元素在加载时是否在屏幕上移动。对于这一点,为了获得理想的用户体验,CLS应该保持在0.1以下。

这三个方面的计算是为了确保良好的用户体验,这有助于网页在谷歌上获得更好的排名,从而获得更多受众。

在这篇文章中,我们将只讨论LCP,因为LCP问题是最常见的。

第一步:确定LCP问题链接

访问Search Console(谷歌搜索控制台),并点击体验标签下的核心网页指标。这里你会看到你网站的桌面和移动设备中出现的欠佳,需要改进和优质链接。

谷歌搜索控制台 核心页面指标面板

因为我的网站只有移动端的问题,所以在移动端单击 “打开报告”,你会看到受LCP问题影响的链接总数。

谷歌搜索控制台 LCP问题总数

此后,点击下面的详情,就能看到一个出现错误链接例子,以及其他有这个问题的链接总数。

再点击实例后,屏幕右侧出现问题列表,这里就可以对所有LCP问题的链接进行检测了。

检测LCP问题

第二步:检测相关页面元素的LCP

一旦你确定了有问题的链接,就可以访问Google Page Speed Insights进行检测了。

测试完成后,你会看到你的页面的LCP。移动和桌面的LCP得分是不同的。你只需要关注移动端得分,因为修复移动端LCP会自动修复桌面或移动端LCP。

在我的案例中,平均LCP约为5.4秒,这个数字只是刚刚超过了谷歌要求的小于4秒,所以修复应该比较容易,主要是很多方面已经在很早之前就优化过了。下面的文章中会进一步说明需要优化的部分有哪些。

Google Page Speed Insights 检测结果

第三步:确认加载时间最长的元素

在这里,你会看到一些优化建议,按照要求完善以帮助你页面更快地加载。

由于我的测试结果显示主要是因为服务器响应的时间过长(3.94s)导致LCP问题出现,所以我只需要升级服务器就能解决这个问题。毕竟我现在使用得是单核心的VPS,随着网站图片、文章、访问量的增加肯定是需要升级的。

而对于大部分网站来说,特别是没有优化的网站是会显示一些其他的问题,而且LCP在十几秒非常正常,这些问题才是今天需要说明的。

图片格式:

一般情况下,很多网站会有一个关于图片格式的问题,如果图片没有经过优化或转换格式,在网页加载过程中会花费大量的时间,也就延长了LCP的时间,如下图显示只图片格式的问题一项就超过了20秒:

Google Page Speed Insights 图片格式问题提示

所以,如果你的LCP问题是由于图片导致的,那建议你安装图片优化插件就能完美的解决这个问题。

因为谷歌建议将网站上的图片从JPEG或PNG优化为JPEG 2000、JPEG XR和WebP。如果改变图像的格式,页面速度会获得大幅提高。所以将网站的所有图片转换成WebP格式(WebP格式是由谷歌开发的一种图像格式)。

我的博客是使用shortpixel自动转换的,并且实现了图片的压缩,只需安装这个插件,会把您的WordPress网站上的所有图片转换为WebP。

如果你还没有安装或者不知道使用哪一款插件,请参考这篇文章:

当你完成图片格式转换和压缩后,在Page Speed Insights工具上重新检查你的网站,你会发现问题已经解决。

延迟加载:

还有一个比较常见的问题导致LCP错误,就是网站的图片没有延迟加载。同样,你可以使用shortpixel或者上面文章中提到的其他几款插件进一步降低页面加载时间。

缓存优化:

应该说除了服务器本身的性能外,优化好网站缓存是必不可少的。这里针对LCP的问题,可以使用WP Rocket来 “延迟JavaScript的执行”,这能减少 “最大的ContentFul Paint”至少50%。

CDN加速:

如果说你的服务器响应时间过长导致LCP问题,但是你不想花钱钱去升级服务器,那你可以试试免费的CDN,大名鼎鼎的cloudflare,URL缓存的功能可以将服务器初始响应时间减少80%。因为是免费的所以在修复上可能并不会那么好,但是只要能降低加载时间,符合谷歌的要求就可以了。

如果免费的CDN并不能解决这个问题,那就不得不考虑升级服务器或者购买付费的CDN了。比如:StackPath,或者cloudflare的付费版。

第四步:验证修复LCP问题

在你修复所有Google Page Speed Insights工具给出的建议后,回到Page Speed Insights工具,再次检查你的页面。

看看你的页面是否通过了核心网络指标的评估测试。可能一次并不能完全的解决所有问题,所以你可能需要反复测试和完善几次。

只要按照提示修复,LCP问题就一定能解决的。

在大多数情况下,升级到一个更好的服务器和使用CDN可以大大改善页面的加载时间,这应该是解决LCP问题的最佳办法。

Facebook
Twitter
LinkedIn
Telegram
WhatsApp
热门文章
error: Content is protected !!