使用 R.O.S.E. 为 Core Web Vitals 优化 Elementor
VPS1352主机测评网(www.vps1352.com)
本文链接：https://www.vps1352.com/7586.html
Core Web Vitals 是使用的标准由 Google 来衡量整体页面 Web 体验.如果您使用 Elementor，您可以做很多事情来优化您的网站以获得高性能.
本文将向您展示如何根据名为 R.O.S.E.的 4 步流程，将配置不当的 Elementor 网站转变为在 Google 中获得高分的网站.机制(减少、优化、简化、消除).我们的成员 Nathan Onn，有一个整个系列在这里.
Core Web Vitals 将很快成为 SEO 排名因素，因此了解它们是什么、它们如何工作并相应地调整您的 WordPress 网站非常重要.
我们将根据使用我们的插件将其分解并总结此方法，Smush 和 Hummingbird — 以及我们管理的 WordPress 托管.
我们将继续:
当您通读本文时，您的 Elementor 网站的生命体征会因 Google 的健康状况良好而看起来不错.
要开始，让我们看看……
Google 的核心 Web 要素是什么?
Google 的 Core Web Vitals 专注于重要的指标大多数是在优化方面.这是 Google 的一项举措，旨在为在网络上提供优质用户体验提供指导，并且是衡量整体页面体验的新标准.
它适用于所有网页，应由所有网站所有者衡量.
尽管 Vitals 不断发展和变化，但目前，核心 Vitals 可以帮助 WordPress 网站专注于三件事:
- 加载(LCP – 最大的内容绘制):这衡量加载性能.良好的用户体验意味着 LCP 应在初始页面开始加载时的 2.5 秒内发生.
- 交互性(FID – 首次输入延迟):这衡量交互性.良好的用户体验意味着页面的 FID 应小于 100 毫秒.
- 视觉稳定性(CLS – 累积布局偏移):衡量视觉稳定性.页面的 CLS 应小于 0.1.
为了更好地了解您网站的位置，Google 提供了一个 Core Web Vitals 报告您可以执行.它根据实际使用数据显示您的网页的表现.
从另一个角度来看，您可以在这个快速概览视频中很好地了解 Google 的核心 Web Vitals:
如您所见，一旦您知道它们是什么，就很容易理解.
既然我们知道了 Google 的 Core Web Vitals 的组成，让我们来实施它们吧！我们将首先建立一个 Elementor 网站，然后从那里开始.
获取 Elementor 站点设置
一个很好的例子是一个网站上有一些好的内容(例如，图像和文本)，所以我将使用 Elementor 产品 – 应用页面.
以下是我将用于该网站的内容:
服务器:WPMU DEV 托管青铜计划，美国西海岸地区
主题: 你好元素
Elementor 主题主页:产品 – 应用页面
插件: Elementor、Smush、蜂鸟和WPMU DEV仪表板
PHP: 7.4
该网站是从头开始创建的.Elementor 页面上的所有设计均未调整或更改.我对它所做的唯一一件事就是将它设置为我的主页.
我们将从这里开始:
为此:
所有这些都将使用 R.O.S.E. 方法完成.
如果您安装了 Elementor 网站、Hummingbird 和 Smush，请继续使用 Core Web Vitals 优化您的网站.
最好从配置主题自己的优化设置开始.但是，这会有所不同，具体取决于您使用的主题.我按照我在本文中所述的相同方式设置了这个 Elementor 的主题.
让我们开始吧！
减少资产文件使您的 WordPress 网站更轻量
我们将首先减少资产文件，以帮助简化我们的 WordPress 网站.毕竟，您的 WordPress 网站拥有的资产文件越多，加载所需的时间就越长.
为了实现这一点，我们将涵盖两件事:
- 合并 JavaScript 文件
- 延迟加载您的图片
通过所有四个方面后，我们的资产文件将减少，为优化网站铺平道路.
合并 JavaScript 文件
在资产优化区域中，使用 Hummingbird 可以轻松组合 JavaScript 文件.
将其设置为自动压缩和组织您的 JavaScript 文件，或通过点击合并图标手动合并它们.
一一测试以提高您的分数.有关合并 JavaScript 文件的更多信息，请务必阅读我们的文档.
延迟加载图片
延迟加载图像会阻止加载屏幕外图像，直到访问者滚动到它们为止.这有助于通过使用更少的带宽和延迟屏幕外图像来更快地加载您的页面.
您可以在延迟加载区域中使用 Smush 一键激活它.
激活后，您有其他选项，例如选择要延迟加载的媒体类型，包括/排除帖子类型，激活本机延迟加载等(稍后我将讨论特定的延迟加载功能).在此处查找更多信息.
您还可以采取其他几个步骤，例如不使用字体库、预加载字体文件和删除 WP 表情符号.
有关这些步骤和我们刚刚介绍的步骤的更多详细信息可以在这里找到.
优化初始服务器响应时间
服务器响应是您在浏览器中输入 URL 时的响应.完成后，浏览器会向托管该站点的服务器发送请求.服务器生成一个响应并发送回浏览器.然后，您将获得网站的视觉效果.
可能导致响应缓慢的几个因素包括服务器配置、代码执行、同时连接数和服务器的位置.
拥有快速响应时间至关重要，在优化初始服务器响应时间方面，正如您所见，您可以做很多事情.它们包括:
- 使用支持 HTTP/2 的良好托管
- 删除不需要的插件
- 使用像 Hummingbird 这样好的缓存插件
让我们更仔细地检查这些优化方法.
使用支持 HTTP/2 的良好托管
HTTP/2 是 HTTP(超文本传输协议)，它经过优化，可以让您的网站加载速度更快，而无需任何额外的提升.
HTTP/2 的目标是减少延迟以提高网页浏览器的页面加载速度.它包括改进，例如二进制与文本、完全多路复用、标头压缩等.
如果你想优化你的服务器响应时间，你需要一个好的主机.
我们自己的 WPMU DEV 专用主机默认使用 HTTP/2 TLS(传输层安全)1.3.它将为您提供优化的服务器配置，从而大大加快响应时间.
要了解有关我们托管的更多信息，您可以查看此处包含的内容.
删除不需要的插件
这是一项不言自明的任务，很容易完成，可以帮助优化您的 WordPress 网站.您需要做的就是删除所有不需要的未使用插件.
不必要的插件可能会使您的网站陷入困境并导致性能问题.如果你不使用它们-摆脱它们.如果需要，您可以随时重新安装它们.
使用像蜂鸟一样好的缓存插件
Hummingbird 在这篇文章中已经多次提到，在这里，我们不得不再次提到她的缓存.
缓存通过加快页面加载来提高性能.Hummingbird 提供多种类型的缓存，包括页面缓存、Gravatar 缓存、浏览器缓存和RSS缓存.
此外，它很容易激活.只需点击一下.
简化您的内容
到目前为止，如果您一直遵循，那么您的 Core Web Vitals 正在不断改进.但是，您还可以做更多的事情——尤其是在"首屏"内容方面.这是指无需滚动或点击即可在屏幕上看到的内容.
我们将通过以下方式研究如何简化:
- 使用 Smush 压缩图像
- 将您的图像限制在"首屏"
- 不要将 JavaScript 驱动的内容放在"首屏"部分
使用 Smush 压缩图像
您需要压缩图片以加快加载速度.
与 Hummingbird 一样，Smush 再次成为在 WordPress 网站上压缩图像的完美解决方案.Smush 使用她的 Bulk Smush 功能可以轻松实现，一键优化您的图像.
之后，她会告诉您您在 MB 中节省了多少.
当涉及到您的图像时，还有很多其他优化选项.请务必在此处阅读有关它们的更多信息.
限制您的图片"首屏"
在完美的世界中，您应该只在"首屏"部分使用两张图片.这包括您的网站徽标和您的英雄形象.如果您有背景图片，也将其包含在计数中.
当然，添加许多花里胡哨的东西很诱人，但它确实会影响您的网站.
添加额外的图片会增加您的加载时间.只有两张图片会增加你的 LCP 分数.尽量减少.
不要将 JavaScript 驱动的内容放在"首屏"部分
总而言之，最好让"折叠上方"部分保持整洁.这包括任何具有 JavaScript 驱动内容的内容，例如滑块、轮播、动画等.
这样做的原因是它会导致意外的布局变化和更多的 LCP 元素加载时间.这导致我们进入......
消除意外的布局偏移
在上面我提到没有将 JavaScript 驱动的内容放在首位，我还提到了意外的布局变化.例如，滑块可能会发生这种情况.
意外的布局变化是网页上功能位置的变化.它们是一个问题，因为它们可以通过动画创建跳跃和弹出，使内容更难以阅读.
它们可能以不同的方式发生.它们包括:
- 由图像引起的布局偏移
- iframe 引起的布局偏移
- 由 JavaScript 驱动的内容(例如轮播)引起的布局变化
- 由 Google 字体引起的布局偏移
可能需要进行一些测试才能确定导致布局偏移的正确元素.但是，如果您继续寻找，您一定会找到罪魁祸首并解决问题.
让我们来看看每一个.
图像引起的布局偏移
如果图像导致布局偏移，您可以通过添加固定的高度和宽度来解决这个问题.通过这样做，尺寸将保持不变并消除任何变化.
此外，Smush 的延迟加载设置可以帮助解决此问题.此功能会阻止加载图像，直到用户滚动到它们为止.
由 iframe 引起的布局偏移
与图像一样，您可以确保为 iframe 启用延迟加载.这有助于防止视频布局发生任何变化.
在 Smush 中，它是您可以在 媒体类型 区域中选择的选项之一.
一旦您点击了 iframe(以及其他选项)，您的网站就会加载得更快，并有助于防止布局发生变化.
由 JavaScript 驱动的内容引起的布局偏移
您可以在 Elementor 本身中修复的一个布局偏移问题是由 JavaScript 驱动的内容引起的.这包括滑块、旋转木马和砖石网格等.
如果您使用滑块小部件或轮播小部件，则可以通过向 Elementor 仪表板中的所有不同视口添加固定高度来解决此问题.
如果使用插件，您通常可以有一个自适应高度选项.确保禁用此功能，否则随着图像高度的变化，轮播会跳跃并弹出.
对于砌体网格插件，请确保网格容器的高度是固定的.通过这样做，您的网格将不再随着用户向下滚动页面而波动.
由 Google 字体引起的布局偏移
您可以移除 Google 字体并改用系统字体.
在 Elementor 中预加载 Google 字体等存在一些问题，但不能完全解决问题.您仍然会看到一些布局变化.
Hummingbird 即将发布优化 Google 字体的版本.您可以在我们的测试中心(计划在几天内发布)查看.
通过测试
配置完我所经历的一切后，分数不言自明！在 Google PageSpeed Insights 上，我的 Elementor 网站得分为 98(如本文开头所示).不是太破旧.
需要注意的一点是，并非每种技术都适用于每个网站，您可能必须也可能不必在优化过程中包括每一步.但是，值得测试所有提到的方法并查看它在您网站上的外观.
主要目标是消除尽可能多的资产，从而获得更好的 Google PageSpeed Insights 分数.
您是否已准备好迎接优化 WordPress 的挑战?
这是在 Elementor 网站上进行测试的；但是，此方法也可用于其他主题和网站构建器.
有关使用我们的插件和其他选项的这些方法的完整摘要，我们的成员 Nathan 在他的文章 使用 ROSE 机制优化您的 WordPress 网站的核心 Web Vitals.
请务必阅读以更好地了解 R.O.S.E 方法和优化 Elementor 等网站.
有关优化 Elementor 的更多提示，请务必阅读我们的文章如何使用我们的 Smush 和 Hummingbird 插件免费优化 Elementor. >
您的 WordPress 网站的优化将很快得到健康和 R.O.S.E.-y！
贡献者
本文与以下人员合作撰写:
Nathan Onn:超过 13 年的 WordPress 开发人员的经验.Nathan 痴迷于构建 WordPress 产品，并与其他 WordPress 爱好者分享他的知识.
***
注意:我们不接受来自外部来源的文章.但是，WPMU DEV 成员可以通过 Blog XChange 为我们博客上的教程和文章贡献想法和建议.
