Google 的 Core Web Vitals 指标告诉您 WordPress 网站的性能、用户交互和整体用户体验。如果您的目标是提高您的 SERP 和用户保留率,那么获得高分至关重要。
什么是 Google Core Web Vitals?您可能听说过或看过以前使用过的术语,但它们到底是什么?它们如何影响您的网站?
在这篇文章中,您将了解有关 Google Core Web Vitals 以及如何在您的 WordPress 网站上改进它们的所有信息。 首先,我们将讨论它们的工作原理以及 Google 用来评估您的网站的三个指标。然后,我们将向您展示如何测试您当前的生命体征分数。最后,我们将向您展示如何改进它们。虽然这个过程看起来很复杂,但实际上非常简单。
让我们开始吧!
什么是 Google Core Web Vitals?
首先,让我们谈谈什么是 Google Core Web Vitals (通常简称为“Web Vitals”)以及 Google 拥有它们的原因。
Web Vitals 是 Google 用来评估您的网站的许多不同指标。它们包括页面速度、页面的交互性、UX/UI、分散注意力的图像或其他元素,以及向下滚动页面时设计的变化量。
这些指标旨在使网站创建者能够轻松改进其网站并使其更加用户友好。那么,指标是什么?
谷歌使用的指标
Google 使用三个指标来确定您的 Web Vital Score:LCP、FID 和 CLS。每一个都衡量您网站的不同方面。虽然这些术语看起来有点技术性,但实际上它们相当简单。让我们来看看每一个:
液晶面板
LCP代表最大内容点。这实际上只是测量网页的初始加载时间。具体来说,它测量“主要内容”的感知加载速度。主要内容是指页面开始加载时可查看的最大图像或文本块,而不是整个页面。
理解这一点很重要,因为它不会测量页面加载时不在视图中的内容——例如,只有在向下滚动后才可见的文章文本。它只测量页面的立即可见部分。
FID
FID代表第一输入延迟。这个指标有点微妙,但基本上只是指用户体验交互性和响应能力。较低(较好)的 FID 分数意味着您的页面具有响应性并对任何用户交互做出快速反应。例如,当他们按下按钮或单击链接时,FID 测量从用户操作到流程开始的时间。
您的网站应该让用户的浏览器很容易开始处理该操作。如果用户单击按钮但操作开始需要几秒钟,您的 FID 分数会更差,因为这会对用户体验产生负面影响。
CLS
最后,CLS代表 Cumulative Layout Shift。这会跟踪页面完全加载后布局的变化量。这通常是由以下两种情况之一引起的:
- 像图像这样的元素在页面本身加载后的很长一段时间内被加载(通常是异步的)
- 用户单击一个按钮或执行另一个操作,这会导致原始布局以一种令人困惑的方式发生变化。
CLS 分数基于意外布局变化的最大“突发”。突发是指连续发生多个布局转换,每次转换间隔不到 1 秒。所以,如果你有不止一个布局转变,你的分数会更差。
为什么 Google Core Web Vitals 很重要
现在我们知道 Google Web Vitals 是什么了。但它们为什么重要?它们如何影响您的网站和 Google 的搜索结果?
对 SEO 的主要影响
Vital Web 分数的最大影响是对搜索引擎优化或 SEO。为了评估您的网站,Google 使用 Web Vitals 以及其他指标,如移动设备友好性、SSL、弹出窗口(或缺少弹出窗口)和内容质量。
因此,如果您想提高 SEO 并在搜索结果中显示得更高,确保您的 Web Vitals 得分良好非常重要。
销售损失
如果您经营一个电子商务网站,您还需要改进您的 Web Vitals。加载缓慢、按钮和用户体验元素缓慢、布局频繁变化的网站会吓跑潜在客户。缓慢的网站似乎不太可靠,并使客户在输入付款信息时犹豫不决。
Tom Fanelli 解释如何使用 GTMetrix 提高 Google Core Web Vital 分数
喜欢观看演练视频而不是阅读文字?没问题 – 查看我们的视频网络研讨会,了解如何使用GTMetrix优化您的网站性能。我们涵盖了您可以测试的各种不同的东西,然后向您展示如何改进它们。
如何测试您当前的核心网络生命力
现在让我们转到您的网站并讨论如何测试您自己的生命体征分数。根据您的技术技能,有多种不同的方法可以做到这一点。然而,检查它们的最简单方法是通过 Google Page Insights,因此我们将主要关注这一点。
请注意,每个工具之间存在细微差异是正常的,因此如果数字不同,请不要担心。同样,桌面和移动测试结果也会有所不同。
谷歌 PageSpeed 见解
Google 提供了一种工具来为您分析 Web Vitals。它被称为PageSpeed Insights,它将为您提供大量有关您网站的数据。
要运行测试,只需在栏中输入您网站的 URL,然后按分析。测试完成后,您将看到结果。第一项涵盖核心网络生命力。
如果分数不令人满意,该条将显示为红色。您还可以单击展开视图以查看更多详细信息。您还应该将设置切换到桌面,以确保您的分数也足够好。
现在让我们简要介绍一些其他用于测试您的 Vital 分数的选项。
谷歌搜索控制台
Google Search Console是一种工具,您可以在您的网站上进行设置,以获得改进 Google 搜索结果性能的反馈和提示。与 PageSpeed Insights 不同,它要求您通过在 DNS 确认中添加 TXT 记录来验证您拥有该域。
完成此操作后,您可以登录 Google Search Console 管理面板,然后在左侧边栏上找到 Core Web Vitals 选项卡。
Web Vitals 扩展
如果您使用 Google Chrome 浏览器,现在您可以安装一个扩展程序来直接在浏览器中检查您的 Vital 分数。它称为Web Vitals,您可以从 Chrome 网上应用店下载。
安装扩展程序后,只需导航到您网站的 URL,单击顶部导航栏中的扩展程序按钮,然后单击 Web Vitals 扩展程序。片刻之后,您将看到 Web Vitals 结果:
Chrome DevTools 和 Lighthouse
Chrome 用户的另一个选择是 Web 开发工具的DevTools套件,它内置在浏览器本身中。其中一种工具称为 Lighthouse,它允许您检查 Web Vitals 分数。
要打开 Lighthouse,请导航到您的网站,然后右键单击该页面。选择Inspect,然后选择顶部的Lighthouse选项卡:
在那里,单击“生成报告”并稍等片刻以创建报告。该报告包括可访问性、搜索引擎优化、性能和其他指标的分数。
如何提高您的网络生命力得分
因此,您已经运行了上面的测试并看到需要改进。让我们谈谈如何修复你的分数!
无论您在上面使用哪种方法,如果有问题,您都应该这样做。一些测试方法(例如 PageSpeed Insights)会直接在测试结果中为您提供改进列表。但是您还可以采取其他一些措施来提高分数。
由于这三个指标中的每一个都针对您网站的不同方面,因此单独组织解决方案是有意义的。对于大多数网站,您不太可能同时遇到 LCP、FID 和 CLS 问题。
如何提高您的最大内容绘画 (LCP) 分数
让我们从 LCP 分数开始。如上所述,此分数衡量页面上主要内容的初始加载时间。
什么是理想分数
什么是理想的 LCP 分数?根据Google 官方指南,您的 LCP 应为 2.5 秒或更短。通常,您的网站加载速度越快越好,因此请尽量减少此数字。
如果你的 LCP 分数是 2.5 秒或更高,你应该怎么做?让我们讨论一些解决方案。
使用更好的主机
也许最简单的解决方案是升级您的主机。更高质量的主机(如 Convesio)将提高您的 LCP 分数,而您无需自己做太多事情。如果您当前正在使用共享托管计划或单层云托管,则改进将特别明显。
Convesio 专为速度、可扩展性和安全性而设计。基于运行容器化环境和运行 Cloudflare Enterprise 以提高速度和安全性的高性能 Google 计算服务器,您可以确保您的高流量网站将具有稳定的页面加载时间。
页面缓存
大多数主机将实现自己的缓存解决方案,但您也可以使用页面缓存插件,如WP Rocket或WP Super Cache。这些插件将减少您的网站加载所需的时间。
缩小 JS 和 CSS 文件
JavaScript 和 CSS 文件通常是一些最大的文件,因此将它们最小化肯定是值得的。有很多不同的方法可以做到这一点,从WP Super Minify之类的插件到UglifyJS之类的更手动的解决方案。
删除未使用的 JS 和 CSS
同样,您可能需要考虑完全删除不必要的 JavaScript 和 CSS 代码。大多数网站都有相当多的旧的、未使用的代码,所以看看你是否可以删除任何东西是值得的。
删除或调整大图像
图像通常是网站上最大的单个文件,尤其是在没有尽可能优化和压缩的情况下。上传不必要宽的图像也很常见。
如果您能够在不影响内容质量的情况下删除图像,我们建议您这样做。如果没有,请尝试使您的图像仅在必要时足够宽。对于大多数设备,这意味着最大宽度为 2500 像素。任何比这更大的东西通常是不必要的。
使用内容交付网络 (CDN)
CDN 或内容交付网络是一种分布式服务器网络,可帮助根据访问者的位置更快地加载您的网站。例如,如果访问者在欧洲,CDN 将从附近的服务器加载您的网站,而不是从北美、亚洲或您家的其他任何地方加载。
卸载未使用的插件和主题
最后,删除未使用的插件和主题总是一个好主意。我们建议定期检查您已安装的主题和插件,并删除您一段时间未使用的任何内容。
如何提高您的首次输入延迟 (FID) 分数
现在让我们看看 FID。如果您还记得上一节中的内容,FID 关注的是交互性以及从采取行动到流程开始之间的延迟。例如,单击一个按钮,然后执行一个操作。
什么是理想分数
根据Google 的 web.dev 网站,一个好的 FID 分数应该是 100 毫秒或更短。
那么,如果你的分数超过 100 毫秒,你能做些什么来降低它呢?在大多数情况下,FID 与 JavaScript 代码有关,因为 JS 用于大多数交互元素。
因此,提高 FID 分数的最佳方法是优化您的 JavaScript 代码并删除您不使用的任何内容。您还应该有一个更轻的前端和不太重的主题:
- 使用 async 加载 JavaScript 或延迟它。
- 检查 WordPress 定制器,看看您是否插入了任何不必要的 JavaScript 代码。
- 您的主题也可能有一个单独的部分用于添加 JS。检查它以确保代码仍在使用中。
- 如果可能的话,减少依赖。您的代码具有的依赖项越多,您需要加载的内容就越多。
- 使用WP Super Minify 之类的插件或直接使用UglifyJS来缩小 JavaScript 。
如何提高您的累积布局转换 (CLS) 分数
最后,让我们看一下 CLS,它测量布局的变化量。
什么是理想分数
如果我们查看 Google 的官方 Web.dev 网站,好的分数被定义为 0.1 或更低。这个数字的计算方式相当复杂,但本质上归结为计算不稳定元素的运动。
如果你的 CLS 分数高于 0.1,你能做些什么来提高它?您通常只需要为任何“灵活”元素指定某些尺寸。也就是说,如果元素的大小或形状基于用户的屏幕大小或操作,例如单击按钮。
- 图片。首先,您应该为您网站上的所有图像制作特定尺寸。这意味着您不应该有一个巨大的图像(5000 像素或更大),它会根据设备显着改变网站的布局。
- 动态广告。如果您的网站上有动态广告空间,请务必为查看窗口设置特定的宽度和高度。这一点尤其重要,否则您通常无法控制所展示广告的大小和形状。
- 嵌入和 iFrame。最后,确保任何嵌入的元素(例如,YouTube 视频)都设置了特定的尺寸。
其他提示和技巧
最后,这里还有一些可能会提高你分数的其他技巧。尽管您不太可能通过执行这些操作来显着改善您的 Web Vitals,但它们仍然是一个好主意。
使用优化的轻量级插件和主题
不幸的是,许多 WordPress 主题和插件可能因不必要或编写不佳的代码、无关功能和其他元素而变得臃肿。这些会使您的网站变慢,有时会干扰浏览器。这导致较低的 Web Vital 分数。
保持插件和主题更新
将主题和插件更新到最新版本始终是一个好主意。出于安全原因,通常建议这样做,但还应注意,更新也(通常)使插件更高效。随着开发人员的改进,这也将提高您的 Web Vital 分数!
通过 CDN 使用优化的 Web 托管
虚拟主机在您网站的响应能力和加载速度方面非常重要。在 Convesio,我们使用容器确保您的网站与其他网站隔离。借助容器化,您可以为您的网站获得专用资源,并扩展用于缓存、Web 文件和数据库的资源,即使在流量激增的情况下也是如此。
结论
在这篇文章中,我们介绍了您需要了解的有关 Google Core Web Vitals 的所有信息。首先,我们讨论了 Google 使用的三个指标(LCP、FID 和 CLS)以及如何找出您自己的分数。然后,我们介绍了各种不同的解决方案来改进它们,谢天谢地,其中大部分都很简单。