如何改进 WordPress 网站上的核心网络虚拟化?

已发表: 2023-02-09

为什么速度在数字营销中很重要? 体验更快呈现时间的用户更有可能留在页面上并四处浏览。 反过来,这会对您的整体 SERP 排名产生积极影响。 此外,网页呈现第一个显示区域所花费的时间也越来越受到搜索引擎的关注。 事实上,几乎一半的谷歌排名因素都与改善用户体验直接相关。 搜索引擎以强调某些排名因素而闻名,包括加载的几个方面,称为核心网络生命力 (CWV)。 除了对排名有直接影响外,您的页面体验还可能影响用户在浏览您的内容时的参与度以及他们返回的可能性。

核心网络生命力的三个组成部分

Google 的算法不断变化,以推广高质量、用户友好的网站,并将不符合其质量标准的网站降级。 这些算法的一部分是核心 Web Vitals,它在最近推出的一系列更新中发挥着重要作用。 Google 与 CWV 的目标是鼓励开发人员在优化网站性能时更多地关注用户体验。

Largest Contentful Paint、First Input Delay、Cumulative Layout Shift——这些是核心网络生命力的三个组成部分。

  • Largest Contentful Paint——最大的内容绘制(LCP)是一个重要的标准,因为网站的视觉感受在很大程度上受到屏幕最大元素的加载速度的影响。 从加载 DOM 内容到用户在屏幕上看到某些内容(大图像或文本块)之间的时间是 CPL 或内容绘制延迟。 它本质上是从用户点击(例如,加载页面)到他们看到某种内容之间经过的时间。 如果您的内容绘制时间超过 4 秒,则可能会对您的 SEO 分数产生负面影响。
  • First Input Delay — 首次输入延迟是指在您单击某些内容后页面响应您的输入的时间。 FID 通常以毫秒 (ms) 为单位进行测量。 例如,当用户单击站点元素并等待屏幕更新新信息时,浏览器会处理此操作并提供结果。 FID 越短,用户开始浏览您的页面的速度就越快,您可以在其中保留更长的时间并增加转化率。 谷歌澄清说,对于高分,它可以容忍 100 毫秒的首次输入延迟,对于差分,它可以容忍 300 毫秒的首次输入延迟。
  • Cumulative Layout Shift——你是否曾经向下滚动页面并突然注意到页面的一大块在你滚动时向上移动? 累积布局偏移 (CLS) 是指内容在绘制后在页面上移动。 结果是您的用户必须理解和重新分析您页面的内容,尤其是在有大量文本的情况下。 充分的累积布局偏移分数低于 0.1,差的低于 0.25。

如何衡量 WordPress 网站的核心网络活力?

要优化 WordPress 网站的核心 Web Vitals 并确保您的网站以最高效率水平运行,必须配备所有必要的工具来监控、跟踪和分析重要数据点。

谷歌搜索控制台

在测量实际用户数据后,Search Console 生成 CWV 报告,其中包含分别为网站的桌面版和移动版发现问题的页面数。 它涵盖了基于其状态(差、需要改进、好)的 URL 性能、核心网络生命力(CLS、FID、LCP)和类似页面组。 同样重要的是要注意,如果 URL 没有足够的特定指标的报告数据,它将不会包含在报告中。

PageSpeed 洞察力

同时,PageSpeed Insights 可让您从 Google 抓取工具和用户的角度查看您的网站,分析您网页的问题并提供改进性能的建议。 该报告使您可以更好地了解哪些资源导致加载时间增加。 您还将获得一份报告,其中提供了对页面的重要见解,并让您知道如何进行必要的更改。

SE排名

除了上述工具外,SE Ranking 的网站审核还分别为桌面版和移动版提供核心网络生命力部分。 该工具可能为 SEO 专家提供更多信息,因为它可以检测您的网站可能存在的任何技术问题。 根据审核结果,该工具会提供网站的整体健康评分和影响其性能的问题列表,以及有关如何解决这些问题的详细说明和提示。

最常见的核心 Web Vitals 问题及其解决方法

1-服务器太慢

重要的是要记住,并非所有 WordPress 网站都是一样的。 这可能会导致某些网站的性能比具有相同设置的其他网站慢。 这样做的原因是许多因素会影响服务器的速度:您安装的插件数量、脚本和 CSS 的数量、服务器位置等。

但是,有专门针对 WordPress 网站优化的主机。 由于缓存软件,它们通常具有更快的加载速度,并且可以处理许多访问者。 这样的托管可以管理许多技术问题,并且有许多预装的插件。 因此,您可以只创建一个或多个网站,让 WP 托管为您完成所有技术工作。

2- 大图片和视频

当您在网站上工作时,需要运行核心 Web Vitals 测试,您可能会看到一些与图像和视频相关的问题。 页面速度慢的根本原因是图像和视频过重。 “多少兆字节太多了”这个古老的陈词滥调问题最近肯定会在核心网络生命力的世界中出现。 更具体地说,出现了应该如何优化站点对图像、视频和其他大文件的使用的问题。

经验法则是有一个主要图像和视频大小,然后在图像和视频元素中包含宽度和高度属性。 通常最好在上传图像之前将图像自定义为特定宽度,并创建一个新的图像元素来切掉背景、不必要的文本等特定区域。网上有许多免费的图像编辑应用程序,可让您裁剪和调整照片大小. 显示较大图像的问题是下载大小和显示它们可能需要的带宽较大。

这同样适用于视频——预先定制视频可以显着提高页面速度,因为浏览器不需要缩小——视频可以正常尺寸播放。 此外,由于原生视频很重,您可以将它们替换为 Youtube 嵌入,这会大大加快网站速度。

使用延迟加载是在不影响用户体验的情况下提高页面速度的另一种好方法。 延迟加载是一种仅在图像进入视口(或屏幕部分)时才加载图像的技术。 这种方法会导致图像在您滚动时逐渐加载,从而提高页面速度。 最好的部分? 使用像 Lazy Load 这样的 WordPress 延迟加载插件来实现是基本的。 这将显着改善用户体验。 用户不必等待页面加载。 滚动几下后,图像将自行加载。

3- 非优化代码

未经优化的代码可能会损害您的核心网络生命力得分,例如 First Contentful Paint 和您的用户体验。 这里最大的罪魁祸首主要是 JavaScript。 因为它必须在页面加载后下载并执行。 (JavaScript 在 HTML 之前出现,HTML 会阻止页面加载)。 这很容易导致屏幕冻结几秒钟,尤其是在用户的连接速度不快的情况下。 因此,如果 JavaScript 没有优化,您的网站可能会失去性能点。 为确保在加载 JavaScript 之前页面不会被阻止加载,您可以使用 async 和 defer 标签。 此外,从代码文件中删除不必要的元素是一种很好的做法。

代码缩小从代码中删除了不必要的注释、空格和换行符。 这可以帮助您减小文件的大小,从而加快访问者浏览器的下载速度。 这样做有两个原因。 首先,它可以让您的访问者更快地下载。 其次,它使它更小,因此它使用更少的服务器资源。 您可以轻松缩小的一些文件包括 <style> 和 <script> 文件。 您可以通过比较优化前后的文件来测试自己。 对于样式表或 JavaScript 文件,结果可能不是很明显。 这是因为 CSS 和 JS 压缩工具,如 YUI Compressor、Minify 等,在优化这些类型的文件方面比压缩插件做得更好。

DOM(文档对象模型)是文档中所有元素的层次结构。 DOM 由 HTML 标签组成,这些标签具有 CSS 样式和与之关联的 JavaScript。 因为元素的数量可能非常多,所以页面的大小会很大。 如果您将页面提供给移动设备,这可能会导致性能问题。 因此,尽量减少元素数量并优化它们在文档中的位置非常重要。

4-布局转变

布局偏移是一种在访问者的浏览器窗口调整大小时发生的现象。 您网站的元素,例如图像、字体和颜色,可以放松或改变位置。 这使读者很难将注意力集中在您要呈现的内容上。 Layout Shift Score 是一个分数,用于跟踪您的站点受设备布局更改影响的程度。 在谈论视口时,这是一件非常重要的事情。 因为如果您的设计变化太大,您可能会失去访问者和转化。 尽量减少布局变化并尽可能优化它们将导致更少的流失,并最终增加页面浏览量。

此外,重大的布局变化可能会对您的 SEO 工作产生负面影响。 然而,设计大型布局可能难以维护。 这是因为除非您专门使用响应式设计来设计网站。 因此,需要调整布局以适应所有设备。 必须定期执行此操作可能很耗时。 它需要持久性和一致性才能在不影响质量或功能的情况下取得成功。 这就是为什么最好的解决方案是让您的网站设计具有响应性。 响应式屏幕会根据查看它们的屏幕尺寸调整大小。 实施响应式屏幕意味着您的网站将进行调整而不会减慢或崩溃。

5-缓存问题

构建Web资源时,针对不同的资源使用不同的缓存策略。 缓存策略定义每个资源将如何被缓存,并提供有关资源应该被缓存多长时间的信息。 您需要设置这些策略。 这样就可以重用 Web 资源,而不必在用户每次访问它们时都从头开始创建它们。 要提高性能,请务必确保您的服务器不会浪费时间创建已创建的资源。 借助服务器端脚本技术,您可以利用此策略。 确保永远不会重新创建重要资源,除非其中发生了某些变化。

Signed exchange (SXG) 是一项新举措,能够以保护隐私的方式从 Web 预取内容。 已签名的交换包含网站希望预取哪些资源的规范。 此外,确保安全地获取这些资源(不泄露私人信息)。 signed exchange binary 格式是一种资产转移格式。 这意味着内容将通过 HTTPS 传输并附加一个额外的标头。 这是一种使 Google 搜索能够提高页面加载性能的令人兴奋的新方法。 特别是在 AMP 页面或依赖外部资源的任何其他类型的页面上。

结论

Core Web Vitals 是 Google 开发的三个指标,用于对用户加载网页的体验进行评分。 三个核心网络生命力对于了解页面加载速度至关重要。 浏览器对用户输入的响应程度,以及内容在浏览器中加载时的不稳定程度。 缓慢的加载时间会影响访问者是否会留在您的网站上。 他们可能会完全离开或花更少的时间与您在网站上的内容互动。