如何修复 WordPress 网站上的核心 Web Vitals

通过在您的 WordPress 网站上修复核心网络活力,您可以显着增强您的SEO并增加您在搜索引擎结果页面上排名的机会。

最好的部分?如果您有 WordPress 网站,您将进行的大部分更改都很简单。因此,让我们从头开始:以下是修复核心网络生命力、WordPress 站点版本的方法。

  • 什么是三个核心网络生命力?
  • 您如何衡量 WordPress 网站上的 Core Web Vitals?
  • 如何在您的 WordPress 网站上改善核心网络活力
  • 优先考虑 Core Web Vitals 以提升您的 WordPress 网站

什么是三个核心网络生命力?

Core Web Vitals是指 Google 用来确定网页整体用户体验的三个指标。谷歌于 2020 年 5 月宣布了这些指标,并于 2021 年 6 月至 2021 年 9 月正式推出。
Core Web Vitals 由三个指标组成:最大内容绘制、首次输入延迟和累积布局偏移。这三个指标都涉及页面速度的各个方面。让我们仔细看看下面的每一个。

Core Web Vitals是指 Google 用来确定网页整体用户体验的三个指标。谷歌于 2020 年 5 月宣布了这些指标,并于 2021 年 6 月至 2021 年 9 月正式推出。
Core Web Vitals 由三个指标组成:最大内容绘制、首次输入延迟和累积布局偏移。这三个指标都涉及页面速度的各个方面。让我们仔细看看下面的每一个。

最大内容绘画 (LCP)

Largest Contentful Paint (LCP) 是指加载屏幕上最大元素所花费的时间。通常这是一张图片,但也可能是视频内容、音频内容或一段相当大的文本。
LCP 背后的想法是最大的元素给用户留下最重要的印象。因此,当它加载时,用户也有整个页面的印象。
如果您的 LCP 低于 2.5 秒,您将在 Core Web Vitals 评估的这一部分获得“良好”分数。相反,如果低于 4 秒,您将获得不错的分数。

第一输入延迟 (FID)

First Input Delay (FID) 是页面响应用户第一次输入所花费的时间。因此,假设一个按钮已经绘制在页面上,用户点击它,但没有任何反应,因为该按钮尚未起作用——这就是首次输入延迟。
谷歌准备容忍 100 毫秒的延迟以获得良好的分数和 300 毫秒的延迟。

累积布局偏移 (CLS)

最后,当页面内容在页面上绘制后四处移动时,就会发生累积布局偏移 (CLS)。您可以通过乘以受内容移动距离影响的屏幕份额来计算 CLS。
良好的 CLS 分数低于 0.1,还可以的分数低于 0.25。

您如何衡量 WordPress 网站上的 Core Web Vitals?

您可以使用多种工具来衡量 Core Web Vitals,但我们必须首先讨论一件事:衡量 Core Web Vitals 的不同方法。一种涉及使用现场数据,另一种涉及使用实验室数据。
现场数据是您的网站对实际用户的表现。它还与您的目标受众有关——如果大多数访问者来自连接速度慢的区域并使用过时的计算机,您的网站就会显得更慢,反之亦然。请记住,您的分数并不完全取决于您网站的优化级别。
实验室数据是您的网站在模拟条件下的性能。实验室数据是一种更全面的测试网站技术稳健性的方法。但是,实验室数据并不能代表您的网站在现实世界中的性能。这就是为什么谷歌使用现场数据而不是实验室数据来对网站进行排名的原因。
有趣的是,您根本无法在实验室中衡量 Core Web Vitals。First Input Delay 需要测量来自实际用户的输入。这就是为什么您可以快速从现场数据工具中分辨出实验室数据工具的原因。实验室数据工具无法计算 FID 分数,而是提供 TBT(总阻塞时间)分数:

在上面列出的 Google 工具中,Search Console是检查您的 Core Web Vitals 最方便、最方便的方法。
在 Search Console 中,如果您转到Experience > Core Web Vitals,您将找到两份报告,一份针对桌面版,另一份针对您网站的移动版。单击其中一个以查看您在特定类型设备上整个网站的性能摘要。下面是一个报告示例:

在图表下方,表格详细说明了困扰您网站的最常见问题:

要进一步调查,导航到您网站的问题,然后在任何 URLS 上,您将获得 PageSpeed Insights 报告。该报告包括对您页面的详细分析,并提供有关如何提高性能的建议:

尽管 Search Console 是 Google 开发人员工具中最人性化的,但导航起来仍然很麻烦。为每个页面查找每个问题也很耗时。这就是第三方工具派上用场的地方。
这些工具使用与谷歌相同的数据,但试图拥有更实用的工作流程。以WebSite Auditor为例,您将深入了解单个表中的失败页面,以及所有 vitals 分数和优化优先级:

当然,还有许多其他带有 Core Web Vitals 报告的SEO 工具。如果您已经在使用 SEO 工具,它可能会提供迎合 Core Web Vitals 的功能。只需确保该工具在评估您的网站时使用现场数据——很多网站都不会。
值得一提的是,这里有一个有趣的工具:Treo Site Speed允许并排查看来自不同网站的 Core Web Vitals 分数:

这可以深入了解您的网站需要多少工作。毕竟,您不必拥有完美的 Core Web Vitals 分数——您只需要比您的竞争对手更好。

如何改善 WordPress 网站的核心网络活力

但是,改进 Core Web Vitals WordPress 网站版本是什么样的呢?我们在这里帮助您解决这个问题。提高 WordPress 网站速度的独特挑战在于,这在很大程度上取决于您的插件、主题和服务器。插件尤其是一把双刃剑。它们可以加快您的网站速度,但您安装的越多,您的网站就越慢。
但让我们从头开始。字面上地。

1. 整理首屏。

Core Web Vitals 更加重视页面的上半部分,称为“首屏”区域。这是用户第一次访问页面时看到的内容,如果这部分加载速度很快,那么整个页面看起来也很快。
巧合的是,页面的上半部分通常是最慢的。想一想:公司倾向于在首屏放置带有高分辨率图像的大量横幅。这也是您会注意到弹出窗口和交互元素的地方。以Canada Goose为例。

这里的建议很明显——确保页面的上半部分尽可能干净、明亮。在大多数情况下,这意味着减少用于迎接访客的图像的大小。
另一种选择是用图像代替CSS 样式。让您的设计师和 Web 开发人员一起制作不需要复杂图像的视觉效果。简单的 CSS 渐变上的几行文本往往在页面速度方面效果最好。并且不必权衡取舍——即使使用简单的工具,您也可以实现强大的设计。
专业提示:避免动态调整大小的内容。一些页面元素,如评论小部件,可能没有特定的大小属性,因此它们会四处移动,直到找到足够的空间。将这些元素重新放置在页面下方。

2. 优化您的图像。

由于图像往往是网页上最重的元素,因此它们通常是 Largest Contentful Paint 指标中最大的内容块。幸运的是,图像也是最容易优化的——这是改进核心网络生命力的一个领域,不需要任何技术技能。

为了优化您的图像,谷歌建议适当调整图像大小,以下一代格式(具有更高质量特性和压缩的格式)提供它们,延迟屏幕外的视觉效果,并对您使用的图片进行有效编码。这听起来可能很复杂,但您可以在大多数图像优化插件的帮助下轻松完成。
在搜索WordPress 图像优化插件时,寻找那些将:

  • 压缩您的图像(包括对您网站上已有的图像进行批量压缩);
  • 为每个图像创建一个 WebP 副本;
  • 延迟加载您的图像;和
  • 必要时管理图像的大小。

WordPress 上一些最流行的图像优化插件包括Smush、Imagify和reSmush.it。它们都没有涵盖图像优化的所有方面,因此每个选择都需要权衡取舍。从 Smush 开始,因为它提供最广泛的图像优化服务。

专业提示:选择插件时请注意。确保插件的效果是可逆的,这样如果优化没有按计划进行,您可以恢复到原始图像。

3. 转向更快的托管服务提供商。

最常见的 Core Web Vitals WordPress 问题之一是服务器传送内容的时间过长。发生这种情况有几个原因;您的页面可能过于复杂或插件过多。但是,它也可能仅仅因为您的服务器太慢而发生。对于共享托管等预算托管设置尤其如此。
如果您不确定服务器响应时间是否是您网站的问题,请使用您用来跟踪 Core Web Vitals 指标的任何工具对其进行测试。例如,如果您使用的是PageSpeed Insights,请测试您的一些页面,看看“减少初始服务器响应时间”是否会不断弹出:

当然,最好是批量执行测试,以便在问题持续出现在您的站点上或仅在几个页面上弹出时通知您。
如果整个网站的服务器响应时间一直很长,您应该考虑转向更快的托管服务提供商。最常见的是,这意味着从共享主机切换到托管主机。
共享主机可能是您在首次构建网站时选择的——它价格适中,而且倾向于提供“无限制”的网站和访问。主要问题是您与其他网站共享服务器,您的性能取决于它们是否为您提供了足够的资源。
托管托管成本更高——基本套餐起价约为每月 20 美元。但您得到的是最新技术、专用服务器、内容分发网络,以及负责处理过于技术性问题的支持团队。但是,这些功能通常会显着提高页面速度。
专业提示:如果您决定切换到更快的托管服务,请查阅此WordPress 网站推荐托管服务提供商列表。

4.优化你的代码。

网站代码从来都不是完美的,您可以做很多事情来改进它。但是,一些唾手可得的成果几乎可以毫不费力地显着提高您的页面速度。
您可以立即尝试两件事:更改不同代码片段的加载顺序并从代码文件中删除不必要的元素。下面让我们仔细看看这些方法。

推迟非必要的 JavaScript

每当您的页面上有一段 JavaScript 时,浏览器将暂停加载 HTML,直到加载 JavaScript。从用户体验的角度来看,这意味着盯着一个冻结的页面,而似乎什么也没有发生。这不仅让用户感到不愉快——这种类型的延迟也会反映在您的 Core Web Vitals 中。
因此,如果这段 JavaScript 不是很重要,您可以更改顺序以使其在呈现所有基本元素后加载。同样,由于我们谈论的是 WordPress,您可以使用插件轻松实现这一点。一些可以延迟 JavaScript 的插件是Async JavaScript、Autoptimize和Speed Booster Pack。另一个推迟 JavaScript 并帮助您解决所有最具挑战性的性能问题的插件是WP Rocket。

缩小 CSS、JS 和 HTML 文件

代码缩小从代码文件中删除了不必要的格式:空格、注释和换行符。这通常是边际改进,但对于某些文件,您最多可以减少 40% 的大小。
在 WordPress 站点上缩小代码的最简单方法是使用插件。一些流行的缩小插件包括Autoptimize、WP Super Minify和Fast Velocity Minify。
专业提示:如果您不想在您的网站上安装更多插件,您可以尝试手动缩小或在线缩小工具。这意味着您必须从 WordPress 下载文件,在线缩小它,然后将其上传回 WordPress。这仅适用于小型网站。一些流行的在线工具包括CSS Minifier、JavaScript Minifier和HTML Compressor。

5. 减少过多的功能。

首次使用 WordPress 的网站建设者通常会对他们添加到页面的功能数量以及他们在管理面板中安装的插件数量感到兴奋。这对页面速度产生了相当大的影响。
在谈到页面设计时,这些过多的功能通常包括沉重的主题、自定义字体、各种图片库和滑块、效果(淡入、滑出等),以及过早出现的弹出窗口。完全没有必要。这些功能可能看起来很吸引人,但其中大多数被实际用户视为麻烦。很少有比旧的静态图像和文本组合更好用的东西了。
在谈论插件时,其中很多是不可避免的,特别是如果您不是技术精通的人并且您的团队中没有开发人员。同时,您还可以手动或使用外部工具完成大部分插件的工作。例如,您可以使用插件来压缩图像,但您也可以使用在线压缩器或图形编辑器来压缩它们。
专业提示:即使您卸载了不必要的插件,您的网站上也可能会留下微量的插件代码。然后,您必须安装另一个插件才能删除该代码。在安装新插件之前,问问自己是否真的没有其他方法可以完成它的功能。

6. 关注其他用户体验指标。

核心网络生命力只是七个用户体验指标中的三个。其他四个早已存在并且已经影响了您今天的网站排名:

多亏了上面的部分,您对侵入式插页式广告了如指掌。这些类型的弹出窗口和中间页面会妨碍查看主要内容。谷歌容忍一些重要的弹出窗口,例如关于 cookie 和隐私政策的弹出窗口,但不会善待占据屏幕大部分的任何内容。保持弹出窗口小而直接。
HTTPS 如今很少成为问题——只要获得托管服务提供商提供的任何免费SSL 证书就足够了。但是,如果您是金融或医疗机构并且可以访问敏感信息,请升级到高级 SSL 证书。
安全浏览不同于安全协议。这是您的页面是否包含恶意或欺骗性内容。有时,这些问题可能会在您不知情的情况下出现,例如,如果您的网站被黑客入侵。为确保您没有触发任何安全警告,请在 Google Search Console 中查看您的安全问题报告。
最后,还有移动友好性。2022年第二季度,移动设备占全球网站流量的58.99%。移动优化有很多内容,但最大的部分是响应式设计——您的内容适应不同的屏幕尺寸。WordPress 用户很少需要为移动优化而烦恼,因为大多数主题都是开箱即用的移动友好型。不过,一旦您的网页发布后对其进行测试也不会有什么坏处——Google 会提供有关在您的移动网页上发现的任何问题的详细报告。
如果发现许多问题,您可以检查有助于使您的WordPress 网站更适合移动设备的插件。
专业提示:如果您的网站在许多这些方面都缺乏,您可以考虑聘请自由用户体验设计师来为您的网站提供急需的提升。

优先考虑 Core Web Vitals 以提升您的 WordPress 网站

本文中的建议大多是唾手可得的成果——可以以最少的努力提供最快的页面速度的改进。但是,如果您已经尝试了此处列出的所有方法,但您的分数仍然落后,那么您可以尝试其他方法。
返回您用于测试网站的任何工具,看看您的网站是否出现任何其他问题。关注出现在多个页面上的那些问题。当您看到结果时,您的努力将证明是无价的。

Newsletter Updates

Enter your email address below and subscribe to our newsletter

留下评论

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