1. it168资讯网首页
  2. 网站教程

WordPress Core Web Vitals错误及评估失败修复

大家在做WordPress网站的时候,有时候会用谷歌的Core Web Vitals来做测试自己的分数高低,也就是我们所说的核心网络生命力评估,但是有时候会发现评估失败,或者测试错误测试不了的情况。如…

大家在做WordPress网站的时候,有时候会用谷歌的Core Web Vitals来做测试自己的分数高低,也就是我们所说的核心网络生命力评估,但是有时候会发现评估失败,或者测试错误测试不了的情况。如果您的网站未能通过评估,尽快纠正问题非常重要。 

原文链接:WordPress Core Web Vitals错误及评估失败修复

值得庆幸的是,有很多策略可以扭转局面,本指南将引导您完成这些策略。下面,我们将介绍通过Core Web Vitals评估的重要性、如何确定您的网站是否未通过评估,以及扭转局面的可行步骤。最后,我们还将讨论维护Core Web Vitals状态的有效措施,以便您不会再次遇到此问题。本次IT168资讯就分享一下WordPress Core Web Vitals错误及评估失败修复教程。

为什么你需要关注Core Web Vitals

核心网页指标是 Google 定义的一组指标。它们衡量您网站可用性的各个组成部分。每个指标都量化了用户对您网站的性能和响应能力的不同看法。以下是这些指标的重要性:

  • SEO 影响– Google 已明确表示,页面体验(即Core Web Vitals指标所衡量的内容)是重要的排名因素。因此,符合这些标准的网站比不符合这些标准的网站更有可能在搜索引擎结果中排名更高。
  • 更好的用户体验– 如今的用户希望网站速度快、响应迅速且视觉效果稳定。当人们访问您的网站时,他们不想花十秒钟等待它可用。如果您的网站表现良好,访问者更有可能停留更长时间,与您的内容互动,并在将来再次访问。
  • 成本效益——改进Core Web Vitals指标不仅对您的用户和 SEO 有益,还可以直接为您节省资金,尤其是当您使用根据资源使用情况收费的网络托管服务商(例如云托管)时。高效编码和优化的网站通常比未通过Core Web Vitals指标评估的网站消耗更少的服务器资源。

如何知道您是否未通过Core Web Vitals评估

检查核心网络生命体征时需要处理大量信息。此外,监控它们的方法也有很多。最常用的工具之一是Google PageSpeed Insights。让我们来看看它提供的信息,以了解您的Core Web Vitals状态。

了解报告

当您通过 PageSpeed Insights 运行您的网站时,Core Web Vitals评估会显著地显示在顶部。

WordPress Core Web Vitals错误及评估失败修复插图

它主要由六个指标组成,其中三个是最重要的:最大内容绘制(LCP)、下一次绘制交互(INP)和累积布局偏移(CLS)。每个指标都带有一个颜色编码的性能分数,您可以通过(绿色)或未通过(黄色或红色)来表示。

需要注意的是,如果您未通过三个主要指标中的任何一个,这将自动导致整体Core Web Vitals评估失败。

WordPress Core Web Vitals错误及评估失败修复插图1

因此,您应该将大部分优化工作放在这个方面。下文将详细介绍。

其他三个指标,首次内容绘制 (FCP)、首次输入延迟 (FID)和首次字节时间 (TTFB),不会影响您的核心网络指标评估。但是,它们会影响您的性能得分,并可能阻止您获得梦寐以求的满分 100 分。

WordPress Core Web Vitals错误及评估失败修复插图2

对于这两项评估,请务必在移动视图和桌面视图之间切换,因为您的表现是针对每个网站版本分别计算的。

WordPress Core Web Vitals错误及评估失败修复插图3

除了对您是否遵守核心 Web 指标进行总体通过/未通过评估外,PageSpeed Insights 还会为您分析网站在各个方面存在的问题。您可以在“诊断性能问题”下找到摘要。

WordPress Core Web Vitals错误及评估失败修复插图4

再往下,在“诊断”下,它会为您提供可操作的提示,以提高您的Core Web Vitals得分。

WordPress Core Web Vitals错误及评估失败修复插图5

单击每个列表项即可查看问题的详细描述及其解决方法。

Core Web Vitals评估:不适用

您可能会遇到这样的问题:您的Core Web Vitals报告显示“不适用”,“数据不足”,“N/A”或类似的内容。

WordPress Core Web Vitals错误及评估失败修复插图6

这意味着 PageSpeed Insights 还没有足够的数据来对这个特定指标做出判断。

要理解这一点,重要的是要知道该报告包含现场数据和实验室数据。前者是通过 Google 的 Chrome 浏览器测量访问者在您网站上的实际体验而收集的。另一方面,实验室数据是在受控条件下计算得出的。

因此,如果您发现 WordPress 网站的Core Web Vitals评估中某些数据不可用,通常是因为您的网站还没有足够的实际互动来生成报告。

这与失败不同。您的网站可能已经满足所有指标,但谷歌还没有数据来描绘准确的图景。你只需要等待更多的访问者

衡量核心网络指标的其他方法

除了 PageSpeed Insights,还有其他方法可以检查您的Core Web Vitals,包括Google Search Console、Chrome DevTools(内置Lighthouse)和Chrome 用户体验报告(CrUX)。

WordPress Core Web Vitals错误及评估失败修复插图7

但请注意,这些工具对现场和实验室数据的使用存在差异。PageSpeed Insights 通常是最简单的解决方案。

如何修复 WordPress 中失败的Core Web Vitals评估

如上所述,核心 Web 指标涉及三个关键指标,您必须优化每个指标才能获得及格分数。因此,让我们详细了解每个指标、您可能未通过的原因以及如何改进。

最大的内容涂料 (LCP)

WordPress Core Web Vitals错误及评估失败修复插图8

LCP 衡量的是最大可见内容元素(例如图片、视频或大段文字)在屏幕上显示所需的时间。较长的 LCP 表示您的页面速度较慢,这可能会让用户感到沮丧。通过的 LCP 发生在页面首次加载后的 2.5 秒内。超过 4 秒表示页面速度非常慢。

有几个因素会对 LCP 产生负面影响,其中包括:

  • 服务器响应时间慢——如果您的服务器响应慢,则会延迟网页的加载。 
  • 主题和插件臃肿——WordPress 提供大量主题和插件,但并非所有主题和插件都一样。过多的功能和糟糕的编码会严重降低网站速度,安装过多插件也会造成同样的后果。
  • 阻止渲染的资源——阻止页面快速显示的 CSS 和 JavaScript 文件。
  • 未优化的资产——过大或未压缩的视频和图片等元素需要更长时间才能加载
  • 客户端渲染——在客户端渲染内容的过多 JavaScript 会降低 LCP 的速度。

那么,如何修复故障的 LCP?可以在诊断中查找这些元素(参见上面的示例)。

  • 最大的内容绘制元素– 报告将指出页面上最大的元素以及加载所需的时间。如果它是红色的,则需要解决它。PageSpeed Insights 可能会建议您预加载它。
  • 缩短服务器响应时间– LCP 较差通常是由速度较慢的 Web 主机引起的。如果您使用的是共享主机方案,请考虑升级到更好的方案或切换到速度更快的主机。这些方案可能价格合理,但由于许多网站使用相同的服务器资源,因此通常不可靠且速度较慢。
  • 避免巨大的网络负载——如果你的页面非常大或加载了大量的脚本,你的报告将指出哪些内容正在消耗用户的网络
  • 消除渲染阻塞资源- 压缩 CSS 和 Javascript,延迟非关键代码,使其在主要内容之后加载,并仅内联首屏内容所需的 CSS。如果您的诊断显示此错误,报告将准确指出哪些脚本导致了问题。
  • 高效编码图像适当调整图像大小–压缩和调整图像及其他媒体的大小,以避免加载大文件。我们的姊妹图像优化器插件Imagify可以处理此问题。安装在您的 WordPress 网站上后,它会自动压缩和调整您上传的任何图像的大小。它还可以批量优化图像,将其转换为下一代图像格式,并且使用起来非常简单。您的 Core Web Vitals 报告甚至会向您准确显示哪些图像导致了问题。
  • 使用高效的缓存策略提供静态资产–启用缓存,以便访问者浏览器保留不经常更改的网站文件,以加快后续访问速度。下面,我们还将解释如何使用我们自己的 WP Rocket 插件来缓存您的网站等。
  • 延迟屏幕外图像– 延迟加载图像和视频,直到用户滚动到它们为止。检查您的报告以查看哪些资产存在问题。

交互到下一次绘制 (INP)

WordPress Core Web Vitals错误及评估失败修复插图9

INP 测量从用户首次与您的网站互动(例如点击按钮或链接)到页面响应该互动的时间。要通过测试,您的得分必须在 200 毫秒以下,而超过 500 毫秒则意味着您的网站更新速度很慢。

这些因素会导致 INP 过高:

  • 大型 Javascript 文件– 过多的 Javascript 文件或低效的代码可能会延迟响应时间。
  • 主线程阻塞——阻塞主线程太久的任务会阻止浏览器快速处理交互。
  • 第三方脚本– 加载外部脚本是向网站添加功能的简单方法。然而,字体、广告、社交媒体小工具和分析都会拖累您的网站,而且并非所有这些都是必需的。

以下是使用Core Web Vitals诊断修复失败的 INP 分数的方法:

  • 最小化 CSS最小化 Javascript – WP Rocket 可以帮助您通过最小化和压缩来减少 JavaScript 和 CSS 文件的大小。
  • 减少未使用的 CSS未使用的 Javascript   – 使用延迟或异步属性在主要内容之后加载非必要的 JavaScript。Google 会指出您网站上未使用的脚本。
  • 避免长时间的主线程任务——分解长时间的 Javascript 任务并将其卸载到 Web 工作线程以减少输入延迟。
  • 减少第三方代码的影响尽量减少第三方使用——仅在必要时加载第三方脚本,并异步加载它们,以免阻塞主线程。
  • “没有具有宽度或初始比例的 标签” ——如果不包含此项,可能会导致某些设备出现巨大的输入延迟。

累积布局偏移 (CLS)

WordPress Core Web Vitals错误及评估失败修复插图10

CLS 通过量化用户遇到意外布局变化的频率来衡量您网站的视觉稳定性。计算方法是将元素移动的距离乘以受其移动影响的屏幕份额。CLS 分数为 0.1 或更低表示及格,而超过 0.25 则表示元素可能会意外移动并导致不必要的点击。

出现 CLS 的原因如下:

  • 未指定的图像尺寸——未定义尺寸的图像、广告和其他嵌入内容最终使用的空间比浏览器最初为它们保留的空间更少或更多,这很容易导致布局转变。
  • 字体加载缓慢——较晚出现的网络字体可能会导致文本偏移。
  • 注入内容——初始加载后添加到页面的内容(例如广告或弹出窗口)可以移动其他元素。

如何按照 Google 的诊断提示改进 CLS:

  • 避免布局偏移过大——您的报告将特别突出显示布局偏移非常大的元素,以便您能够纠正原因。
  • 图像元素没有明确的宽度和高度– 始终指定图像、视频和其他嵌入内容的尺寸属性。您的报告会汇总违规者。
  • 使用外观延迟加载第三方资源——为延迟加载的元素提供相同尺寸的占位符,并为广告、iframe 和其他动态嵌入保留空间。
  • 确保文本在 webfont 加载期间保持可见——预加载字体等关键资源,以便浏览器立即可以使用它们。
  • 避免 DOM 尺寸过大——除了占用大量内存外,这还会导致页面移动。

使用性能插件

如果上述措施听起来超出了您的技能水平,那么帮助您的 WordPress 网站通过失败的Core Web Vitals评估的一个简单方法是使用WP Rocket 等性能插件。在上一节讨论缓存以改进 LCP 时,我们已经提到了它。

WordPress Core Web Vitals错误及评估失败修复插图11

对于WP Rocket插件,可以从本站下载

自动改进

一旦激活,WP Rocket 会自动实现多项性能改进,包括:

  • 页面缓存——这意味着创建页面的静态 HTML 版本,这样访问者就不必每次都从服务器请求它们。WP Rocket 也将其应用于移动设备。上述浏览器缓存也默认处于活动状态。
  • GZIP 压缩——与 zip 文件类似,这会缩小您的网站文件大小,以便更快地下载和处理它们。
  • 首屏图像优化——由于页面顶部的图像通常成为 LCP 元素,WP Rocket 现在默认对其进行优化以提升此Core Web Vitals指标。
  • 其他各种改进- WP Rocket 还会分析您的网站设置并进行许多其他优化,例如更好地处理 Google 网络字体或禁用 WordPress 表情符号。

手动选项

以上所有操作都无需您动一根手指,这意味着只要在您的网站上安装 WP Rocket,就会自动改善其Core Web Vitals评估。此外,您可以手动应用我们上面讨论的更多内容,包括:

  • 预加载——您可以选择预加载缓存、链接、外部文件和字体,以提高网站的首次访问量。
  • 文件优化——该插件允许您缩小 CSS 和 Javascript 文件,延迟、延时或异步加载它们,并自动删除未使用的代码。
  • 媒体选项– 延迟加载您的图片、视频和嵌入内容。无需添加高度和宽度声明,即可自动为图片添加高度和宽度声明。使用Imagify压缩并进一步优化您的图片。
  • 数据库优化——WP Rocket 可以清理您的数据库,删除可能减慢您网站速度的不必要的数据。

最好的部分:您只需单击几下鼠标即可在易于使用的界面中完成所有操作,从而快速改善您网站的性能和Core Web Vitals。

维护核心 Web 指标的最佳实践

按照上述步骤,您的Core Web Vitals评估将达到预期水平。但是,获得及格分数只是开始。您还需要投入精力来保持这种状态。以下是方法。

定期监测和测试

持续监控网站的性能非常重要。使用 Google Search Console 和PageSpeed Insights等工具持续检查最重要页面的性能。在进行更新或更改后定期测试网站,以确保它们不会对您的指标产生负面影响。

保持 WordPress 最新

如果您正在运行旧版本的 WordPress,则强烈建议您考虑升级。每次 WordPress 核心更新都会带来更多性能改进和其他增强功能,让您的网站更快、更稳定。

插件和主题也是如此。如果它们过时了,您可能会错过重大的性能增强。定期删除任何可能减慢您网站速度的不必要的插件和主题。

安装配置CDN

CDN 可以将您的内容分发到全球多个服务器,从而显著缩短您网站的加载时间。它使访问者能够从距离他们最近的位置接收您的网站数据。

WordPress Core Web Vitals错误及评估失败修复插图13

立即通过Core Web Vitals评估

如果您未能通过Core Web Vitals评估,并且不知道如何解决,请不要绝望。通过了解潜在问题并采取直接行动来解决这些问题,您可以取得显著的进步。PageSpeed Insights 等工具会告诉您需要做什么才能让您的 WordPress 网站重回正轨。以上就是IT168资讯分享的WordPress Core Web Vitals错误及评估失败修复教程。

原创文章,作者:admin,如若转载,请注明出处:https://www.it168.online/webtech/21228/

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注