如何改进 WordPress 上的最大内容绘制 (LCP)

已发表: 2022-06-24

衡量网站的用户体验 (UX) 可能是一项艰巨的挑战。但这正是谷歌试图用 Core Web Vitals 指标做的事情。在这些方面取得好成绩很重要，因为谷歌在确定搜索引擎排名时会权衡用户体验。

有几个指标是 Core Web Vitals 的一部分，它们听起来有点吓人。好消息是，有几种工具可以让您更轻松地了解您的分数以及如何提高。

在本文中，我们将研究一个特定的指标：最大内容绘制 (LCP)。这可以衡量您的网站加载您在屏幕上看到的最大元素所需的时间。

我们将讨论它如何影响用户体验以及导致 LCP 得分低的原因。然后，我们将向您展示如何改进它。

什么是最大含量涂料 (LCP)？

LCP 是衡量页面上最大元素加载所需时间的指标。对于大多数页面，最大的元素是屏幕顶部的大图像或英雄部分。

LCP 分数本身可以帮助您了解您的网站加载视觉元素的速度。您的页面可以继续在后台加载脚本，而不会影响此指标。简而言之，LCP 分数仅与给定页面上的媒体和文本相关。

LCP 是 Google 用来衡量页面用户体验的三个核心 Web Vitals 之一。另外两个是：

首次输入延迟 (FID)： FID 衡量从访问者采取第一个操作（例如单击链接）到站点响应之间所用的时间。
Cumulative Layout Shift (CLS)：该指标有效地衡量了您的网站在加载时的偏移程度。文本可能首先出现，然后在图像加载时跳下屏幕，导致访问者失去位置。

根据经验，您希望所有三个 Core Web Vitals 分数都尽可能低。低分意味着页面加载快速流畅。

就数字而言，以下是 Google 认为良好、可接受和较差的 Core Web Vital 分数：

请记住，测量页面加载时间与检查您网站的核心网络生命力不同。您的网站加载速度可能相对较快，但 CLS 或 FID 分数可能较差。理想情况下，您将同时测量整体加载时间和核心 Web 生命值，以准确评估您网站的性能。

LCP 如何影响 WordPress 网站的用户体验？

一个糟糕的最大内容绘制分数意味着您的页面可能需要很长时间才能加载。请记住，您需要逐页测量 Core Web Vitals。虽然一页的 LCP 分数可能很差，但其他页可能还不错。

但一般来说，一个站点会看到其 LCP 分数的趋势，因为结果通常与在站点范围内实施的优化实践相关联。如果一个网站的创建没有考虑最佳实践，那么每个页面的得分都可能偏低。如果一个网站已经过仔细优化，大多数页面通常会得分很高。深思熟虑的开发人员会识别得分低于平均水平的页面，并进行特定调整以提高该页面的性能。

总体而言，较差的 LCP 分数意味着访问者可能需要等待太长时间才能完全加载您的页面，而且访问者不喜欢等待。如果您的页面加载时间超过两三秒，您就可以开始吸引大量访问者。

还值得注意的是，Core Web Vitals 是 Google 的排名因素。较差的 LCP 分数会降低搜索引擎结果页面 (SERP) 中的排名，这意味着您将获得更少的自然流量。

如何衡量 LCP 分数

您可以使用多种工具来衡量 LCP 分数。最简单的是 PageSpeed Insights。使用此服务，您可以输入任何页面的 URL，并在几秒钟内获得有关其整体性能的完整报告。

输入 URL 并单击分析后，PageSpeed Insights 将为该页面生成两份报告，一份用于移动设备，另一份用于桌面性能。您可以在报告顶部查看您的 Core Web Vitals 分数，包括 LCP。

如果您向下滚动，该报告还会显示您可以为您的网站做出的潜在性能改进。对于每个建议的改进，PageSpeed Insights 都会为您提供可以节省的加载时间的估计值。

如果您使用 Google Search Console，则无需离开平台即可访问 PageSpeed Insights 报告。一些 WordPress 插件（如 Site Kit）使您能够直接在仪表板中显示 Core Web Vitals 分数。

是什么导致 LCP 评分不佳？

导致 LCP 得分低和加载时间长的潜在原因有很多。通常，这归结为您的服务器问题或您的网站缺乏优化。让我们回顾一下每个潜在的原因：

服务器响应时间慢。 如果您的虚拟主机不能在服务器级别提供良好的性能，那么您几乎无法降低 LCP 分数。缓慢的服务器响应时间意味着访问者的等待时间很长——即使您的网站已得到适当优化。在这种情况下，您可能需要考虑切换到不同的 WordPress 托管服务提供商。
渲染阻止 JavaScript 和 CSS。 在某些情况下，JavaScript 和 CSS 脚本可以阻止页面上的其他资源在加载完成之前呈现。这被称为“渲染阻塞”，它可以增加你的整体加载时间。
大量文件和图像。 如果您使用具有大文件大小的图像，则可能需要一段时间才能加载。理想情况下，您应该压缩和优化您上传到站点的图像。
不利用浏览器缓存。 浏览器缓存会在访问者的浏览器中保存站点静态内容的副本，以加快您未来访问的加载时间。如果您不利用浏览器缓存，则用户每次路过时都必须重新加载页面。
不使用 GZIP 压缩。 这是一个在服务器级别压缩 HTTP 请求和文件的软件应用程序。大多数信誉良好的网络主机都应该提供开箱即用的 GZIP 压缩。

如何改进 WordPress 中最大的内容绘制

有几种方法可以降低您的 WordPress 网站的 LCP 分数并提高其整体性能。让我们来看看最有效的方法。

1. 使用旨在帮助改善 WordPress 中的 Core Web Vitals 的插件

有几个插件旨在帮助您提高 Core Web Vitals 分数。最强大的解决方案之一是 Jetpack Boost。

Jetpack Boost 只需切换相应的设置即可帮助您实现多项性能优化。您可以延迟阻止渲染的 JavaScript、启用延迟加载并优化您网站中的 CSS 代码。

虽然使用 Jetpack Boost 有助于提高您的 LCP 分数，但这并不意味着您应该忽略其他性能优化。启用插件后，我们建议您还实施其他策略以进一步提高您的 Core Web Vitals。

2. 缩小你网站的 CSS

当您使用代码时，将其格式化为其他人易于理解的格式被认为是一种很好的做法。这意味着使用空格，将代码分布在多行中，并以一种更易于阅读的方式对其进行结构化。

这种方法的问题是每个空格和字符都会占用额外的磁盘空间。如果我们只讨论几行代码，那影响不大。但是当您处理数十或数百个 CSS 文件时，每个文件都有数百行代码，这些脚本会影响您网站的加载时间和 LCP 分数。

最小化 CSS 影响的一种方法是“缩小”代码。这涉及删除不必要的字符和空格以减小文件大小。要了解它是如何工作的，下面是一些用于设置多个 div 元素样式的 CSS 代码示例：

 div{ border: 3px solid currentColor; } #div1{ color: green; } #div2{ color: blue; }

现在，这是代码在缩小后的样子：

 div{border:3px solid currentColor}#div1{color:green}#div2{color:#00f}

根据您使用的缩小工具，它还可能用优化的替代品替换值。我们提到缩小工具是因为手动格式化代码需要很长时间并且可能导致错误。

您可以在网络上使用大量免费的缩小工具，包括 Toptal 的 CSS 缩小器等选项。

您还可以使用 WordPress 缩小插件来优化您网站的代码。这些插件中的大多数不仅缩小了 CSS，而且还包括其他功能，例如延迟渲染阻止 JavaScript 和 CSS。我们将在下一节讨论这意味着什么。

3.推迟渲染阻塞JavaScript和CSS

当您访问网站时，它可能不会以尽可能减少加载时间的方式加载资源。在某些情况下，JavaScript 文件可能会导致您的浏览器等待这些脚本完成加载，然后再继续呈现其他元素。

该渲染阻止代码会增加您页面的 LCP 分数。有两种方法可以解决这个问题：

消除渲染阻塞脚本。
推迟渲染阻止脚本，直到其他元素完成加载。

如果您要处理网站关键功能所需的代码，则第二个选项是理想的选择。通过延迟必要的脚本，页面将完成视觉呈现，然后代码将在后台加载。就用户而言，一切都会加载得更快。

找出哪些脚本阻止渲染的最简单方法是使用 PageSpeed Insights。每个 PageSpeed Insights 报告都包含一个包含推荐性能调整的部分。

运行测试后，在“删除渲染阻塞资源”选项卡下查看。在内部，您将看到阻止渲染的 JavaScript 和 CSS 脚本列表。本节还将为您估计通过推迟每个加载时间可以减少多少加载时间。

如果您不介意编辑代码，可以使用 web.dev 工具。或者，您可以再次使用 Jetpack Boost 来推迟渲染阻止脚本。它同时处理改善核心网络生命力的多个元素。

还有几个独立的插件可以延迟渲染阻止脚本并缩小它们。这些包括：

自动优化：您可以推迟阻止渲染的 JavaScript 和 CSS，并为您的网站启用图像延迟加载。
Fast Velocity Minify ：这个插件可以延迟、缩小和合并您网站上的 JavaScript 和 CSS 文件。
Hummingbird ：这个 WPMU DEV 插件使您能够利用浏览器缓存、延迟渲染阻止脚本以及缩小 JavaScript 和 CSS。

在处理可以缩小您网站代码的插件时，我们建议您在激活它们之前完全备份您的 WordPress 网站。这样，如果缩小过程破坏了您网站中的任何核心功能，您可以恢复到早期版本而不会丢失任何数据。

4.优化您网站的图片

WordPress 中 LCP 分数低的主要原因之一是大图像文件。高分辨率图像看起来很棒，但它们也占用了大量存储空间。如果您正在处理未压缩的文件并且在一个页面中有多个图像，则加载时间可能会迅速失控。

解决此问题的最佳方法是优化图像。您可以在将它们上传到 WordPress 之前或之后执行此操作。

优化图像意味着压缩它们。根据您使用的压缩工具，该过程对图像质量的影响应该很小，但它可以大大减少文件大小和整体加载时间。

如果您想在将图像上传到 WordPress 之前对其进行优化，您可以使用免费的在线工具，例如 TinyPNG。

使用 TinyPNG，您可以手动上传和优化 JPG 和 PNG 文件。该服务会压缩图像，然后让您将它们下载到您的计算机上。之后，您可以继续将压缩图像上传到 WordPress。

Jetpack CDN 是直接在 WordPress 中优化图像的绝佳选择。它还可以自动调整移动设备的图像大小，全面加快您的网站速度。说到 CDN 的好处……

5. 使用内容交付网络 (CDN)

CDN 是一项服务，可让您访问分布在战略区域的数据中心。这些数据中心存储您网站的缓存副本并拦截想要访问它的人的连接。

CDN 会自动将这些连接路由到离每个访问者最近的数据中心。由于网站内容的行驶距离更短，因此页面加载速度更快。

此外，CDN 旨在尽可能快地处理请求。这意味着它们加载内容的速度通常比托管服务提供商运行的服务器快得多。

Cloudflare 等服务提供有限的免费 CDN 计划，可以缓存您网站的一些页面。一些托管的 WordPress 网络主机提供内置的 CDN 集成，因此您无需为单独的服务付费。但是，如果您使用 Jetpack，您还可以访问免费的 WordPress 专用 CDN，您可以使用它来加速图像和网站文件。

关于 WordPress 中最大内容绘制的常见问题

如果您仍有关于如何衡量和优化 LCP 分数的问题，本节将为您解答。

如何衡量我的 WordPress 网站的 LCP 分数？

由于 LCP 分数是 Core Web Vitals 指标的一部分，因此您需要使用 Google 工具来衡量它们。 Google 提供了三种方法来衡量您的 LCP 分数：

PageSpeed Insights ：您可以使用此在线服务按需测量任何页面的核心 Web Vitals。当您分析页面时，PageSpeed Insights 还会返回有关改进性能和整体用户体验的建议。
Google Search Console ：此服务使您能够监控网站的搜索引擎优化 (SEO) 和整体健康状况。 Google Search Console 还包含来自 PageSpeed Insights 的内置推荐和评分。
Lighthouse ：在使用浏览器的开发工具时，您可以使用此 Chrome 扩展程序来访问高级功能。

Google 还提供了一个名为 Site Kit 的官方插件，您可以使用该插件从 WordPress 中访问其多项服务。使用 Site Kit，您无需离开仪表板即可访问 PageSpeed Insights 报告，包括 LCP 分数。

什么是好的 LCP 分数？

根据谷歌的说法，任何低于 2.5 秒的 LCP 分数都是不错的。即使您的网站确实符合该标准，但这并不意味着您不应该进一步优化它。

理想情况下，您会希望尽可能减少网站加载时间。如果您的目标是总加载时间少于一到两秒，您可以提供更好的用户体验。

如何在 WordPress 上轻松优化我的 LCP 分数？

在 WordPress 上优化 LCP 分数的最简单快捷的方法是安装 Jetpack Boost。该插件还将帮助您提高其他 Core Web Vitals 分数，包括 First Input Delay 和 Cumulative Layout Shift。

首先在您的站点上安装和激活 Jetpack Boost：

然后，导航到仪表板中的Jetpack → Boost 。在这里，您将看到优化 CSS 加载、延迟非必要 JavaScript 和激活延迟图像加载的选项。我们建议您启用所有三个选项。

启用延迟加载是提高网站 LCP 分数的好方法。从 5.5 版开始，WordPress 将延迟加载作为内置功能包含在内，但您需要为要优化的图像手动启用该设置。

使用 Jetpack Boost，您可以一次为您网站上的所有图像启用延迟加载。通过推迟每个页面上最大的元素，您的 LCP 分数应该会立即提高。

改善您网站的核心网络生命力

改进您网站的核心 Web Vitals 可以帮助您提供更好的用户体验。尤其是 LCP 分数，会极大地影响访问者对您网站性能的满意程度。低分意味着您的网站加载速度快，而快速加载的网站意味着更少的受挫访问者。

让我们回顾一下可用于提高 WordPress 中 LCP 分数的最有效方法：

使用旨在帮助改善 Core Web Vitals 的插件。
缩小你的 CSS。
推迟渲染阻塞 JavaScript 和 CSS。
优化您网站的图像。
使用内容交付网络。

使用 Jetpack Boost，您可以快速优化您网站的 Core Web Vitals，包括其 LCP 分数。 Jetpack Boost 使您只需切换相应的设置即可实现多项性能优化。此外，它是免费的，并且可以与 Jetpack 工具系列的其余部分无缝协作。