如何提高 WordPress 上的 Lighthouse 性能分数和指标

什么是Google Lighthouse？

Google Lighthouse 是一款免费的开源工具，可衡量网站的性能并提供一系列指标和见解来帮助您改善整体用户体验。该工具本身使用起来很简单，只需几秒钟，就会向您提供一份有关所有相关核心网络生命信息的报告，以及一些可操作的项目，以改进多个网站的方面，例如搜索引擎优化和网络可访问性 – 这样您就可以准确评估您的网站的表现。

该性能分数是通过对各种性能指标进行加权计算得出的，可全面了解您的网站的性能。如果您想了解更多关于如何计算分数的信息，这里有一个非常有用的计算器。

在 WordPress 网站上运行 Lighthouse 审核非常重要，因为它可以揭示网站的某些性能缺陷，这些缺陷会对用户体验产生负面影响，并为您提供扭转和优化问题所需的见解。

分解 Lighthouse 报告和指标

Lighthouse 指标分为五个不同的类别，即：性能、可访问性、最佳实践、SEO 和渐进式 Web 应用程序 (PWA)。所有这些都有助于提高网页的整体质量。

1. 绩效审核

首次 内容绘制 (FCP) 标志着用户可以在屏幕上看到任何内容的第一个点，因此它被视为感知的加载速度。⚖️ 该指标对您的性能得分有 10% 的权重。✅ 最佳网站那里的执行速度为 1.5 秒，但只要您的 FCP 低于 2 秒，您仍然被认为处于“快速”范围内，这正是您需要达到的水平。
速度指数 (SI)显示网页内容的可见填充速度。⚖️ 在计算性能分数时，该指标还具有 10% 的权重。✅ 理想情况下，您正在寻找低于 4.3 的速度指数时间秒 – 与 75 及以上的速度指数得分相关。
最大 内容绘制 (LCP) 是衡量渲染网站上最大可见元素所需时间的指标。⚖️ 这个特定指标的权重为 25%，使其成为最重要的元素之一，以便正确处理优化性能分数。✅ 该部门的良好分数约为 2.5 秒或更短，因为这可以获得最佳的用户体验。
总 阻塞时间(TBT) 量化页面对用户输入的负载响应能力。它可用于替换实验室数据中的 FID（首次输入延迟）分数。它们衡量不同的事物（用户输入与用户交互），但通过改进 TBT，您通常也会改进 FID，这是核心 Web 生命力。⚖️ 这是性能分数的另一个重要组成部分，权重为 30%。✅ 良好的 TBT 时间被认为是小于 300 毫秒的任何时间。
累积 布局偏移 (CLS) 通过量化用户可能遇到意外布局偏移的频率来衡量页面的视觉稳定性。⚖️ 该指标在整体性能得分中的权重为 25%。✅ 良好的 CLS 得分被认为是 0.1或更少，接近最佳用户体验。

请注意，交互时间已在 Lighthouse 10 中删除，并且不再作为 Lighthouse 性能指标包含在内。

2. 无障碍审核

可访问性分数与您的网站对所有用户（各种类型）的可用性有关。理想情况下，您的网站对于那些有视觉、运动、听力或认知障碍的人来说应该表现得与那些幸运地没有这些问题的人一样好。

✅ 您的目标应该尽可能接近完美 100。改善这一点的最常见方法是确保您的文本具有高对比度，以便易于阅读。您的网站应该只用键盘就可以有效地导航，并且您的图像应该包含相关的替代文本，供那些看不到它们的人使用。

这里的想法与 Web 内容可访问性指南 (WCAG) 2.0的原则一致，该指南列出了我们都应该努力实现的各种最佳实践。

3. 最佳实践审核

本部分对您的网站进行多次审核，以寻找可带来出色用户体验的最佳实践 Web 开发组件。

✅ 这些是您绝对应该关注的容易实现的目标，因此，如果您的分数未达到 100，请查看未通过的审核并实施这些更改以优化此特定指标。

通过的审核旁边有一个绿点，每个部分都是可扩展的。如果您点击它们，您将找到每项审核的深入解释。

4. SEO审核

Lighthouse 指标的倒数第二部分是 SEO 部分，它分析您的网站以确保其针对搜索引擎排名进行优化。当然，这并不是查看您的特定关键字，而只是确保页面的整体结构设置良好以实现排名。

在这里，它将查找自动生成的内容、链接方案、伪装、偷偷摸摸的重定向、隐藏文本、门页、抓取的内容等等——所以不要认为你可以逃脱任何这些。在这个部门，你确实应该是诚实的、光明正大的。

5. 渐进式 Web 应用程序 (PWA) 审核

最后一部分是 PWA。这些检查验证渐进式 Web 应用程序的各个方面。PWA 是一种内置和增强的 API，可为世界各地的每个人提供更好的功能、可靠性和稳定性。例如，Uber 是按照 PWA 的原则从头开始重建的。

这就是 Lighthouse 6.0 测量系统！

现在，让我们看看我们如何测试性能。

如何使用 Lighthouse 测试速度和性能

您可以使用四种不同的工具在您的网站上运行 Lighthouse 审核。 它们都使用上面解释的相同指标以及相同的 KPI。

Web.Dev： 一种直观的工具，可以运行完整的审核（性能、可访问性、SEO 和最佳实践），但不会考虑您正在进行分析的设备。
Gooogle Chrome 开发者工具： 最完整的工具，可在 移动设备和桌面上分析上述所有 KPI（加上 PWA）。
Google PageSpeed Insights (PSI)：最流行的工具，仅测量网站的性能 KPI。
GTmetrix：一种流行的性能工具，还可以测量 Lighthouse 性能指标。

1. 网络开发

第一个工具是一个名为 Web.Dev的基于浏览器的工具，您只需在其中输入站点的 URL，单击“运行审核”，它就会执行其操作。

审核完成后，它将向您显示一份如下所示的报告：

请务必单击 “查看报告” 按钮以更深入地了解每个指标并获得您需要的见解。

Web.dev 不会为移动设备或桌面设备提供两种不同的报告，您只能获得一份分析报告。

2. 谷歌浏览器开发者工具

第二种方法是使用 Chrome 浏览器本身的开发人员工具。要在 Chrome 中运行审核，请按照以下步骤操作：

以隐身模式打开 Google Chrome。
导航到您想要运行审核的网站。
右键单击页面上的任意位置，然后单击“检查”。

然后，您需要查找名为“ Lighthouse ”的选项卡，该选项卡可能隐藏在开发人员工具部分顶部的箭头后面。

到达那里后，单击“生成报告”即可获取完整的 Lighthouse 审核。

提示：您还可以下载名为“Lighthouse”的 Chrome 扩展程序，但 Google 表示“除非您有特定原因，否则您应该使用 Chrome DevTools 工作流程而不是此 Chrome 扩展程序工作流程。DevTools 工作流程允许测试本地站点和经过身份验证的页面，而扩展则不允许。”

3.Google PageSpeed Insights (PSI)

Google PageSpeed Insights 是我们客户最常用的衡量性能的工具。该工具非常简单。您所需要做的就是输入任何 URL，并在几秒钟内对其进行分析。

⚠️ 重要提示：PSI 只能提供您网站的性能报告。与 Web.dev 和 Google Chrome 开发者工具相反，它不会评估“SEO、可访问性和最佳实践”指标。

该报告包含六个主要部分。让我们回顾一下它们，看看 Lighthouse 指标是如何组织的。

全局得分： 这是您网站的总体性能等级。它可以是红色 (0-49)、橙色 (50-89) 或绿色 (90-100)
“现场数据”： 基于现实生活中的用户
“实验室数据”： 一组人工数据。

Google 定义的现场数据与实验室数据：

“现场数据是关于特定 URL 执行情况的历史报告，代表现实世界中用户在各种设备和网络条件下的匿名性能数据。实验室数据基于单个设备上页面的模拟负载和一组固定的网络条件”。

Lighthouse 提供的第一个数据包括 Core Web Vitals 和其他三个指标。

核心网络生命线：

以下是 Lighthouse 还测量的其他四个指标：

速度指数 (SI)
互动时间 (TTI)
总阻塞时间 (TBT)
首次内容绘制 (FCP)。

“诊断” 部分告诉您需要改进的地方。

“ 机会” 部分为您提供了一些有关如何加快网站加载速度的建议。

“通过审核”部分：运行审核时看到一些绿色总是令人放心。这部分基本上告诉你你一直在做正确的事情。

4. GTmetrix

GTmetrix 是另一种流行的性能工具，可以分析站点的性能并测量 Performance Lighthouse 指标。您可以从不同位置测试您的网站。默认情况下，该工具将从桌面执行测试。您只需输入您的 URL 并单击“测试您的网站”。

审核完成后，您将获得性能等级，并且您将了解核心 Web Vitals 的执行情况：

此外，该工具还为您提供了多个选项卡，从“摘要”开始。可以很容易地看到页面加载需要多长时间以及最重要的问题是什么。

然后，“性能”选项卡为您提供 Lighthouse 指标的完整概述：

我们建议您也探索其他选项卡：它们将为您提供有关站点性能的有用见解。

如何分析 Lighthouse 性能报告

获得报告后，下一步是分析结果并确定如何提高网站的性能分数。

⚠️请务必点击“查看报告”按钮，否则您将只能看到标题而不是细节。

当您单击详细报告时，您将能够单独查看每个组件并准确了解正在发生的情况，包括诊断和通过的审核。仔细阅读报告，并确保打开所有选项卡来检查所有指标（性能、可访问性、最佳实践、SEO 和渐进式 Web 应用程序）。

花点时间仔细研究每一项，看看 Lighthouse 在哪些方面提出了改进建议。通常，消息传递非常简单直观，因此您应该能够采纳这些建议，更改需要更改的内容，然后再次运行报告。

现在，让我们重点关注灯塔报告的绩效类别。

如何阅读演奏部分的分数？

“性能”部分显示核心 Web Vitals 分数（FCP、LCP 和 CLS）以及 SI、TBT 和 TTI 指标。

通过阅读上面的性能分数，我们可以看到：

第 一个内容绘制 是 0,5 秒（这也很好，因为 Google 将限制设置为 2,5 秒）
速度指数为 0.7 秒（低于 Google 推荐的 4.3 秒阈值）
最大 内容绘制 为 0.6 秒（低于 Google 推荐的 2.5 秒）
交互时间为 1.2 秒（这很好，因为分数应低于 5 秒）
总 阻塞时间 为 100 毫秒（这很好，因为 Google 建议分数低于 300 毫秒）
累积 布局偏移 为 0,065 秒（Google 也可以接受，因为它低于 0,1 秒）。

解释良好与不太好的性能分数：

良好分数的示例（⬤ = 良好的指标）

不太好的得分指标示例，其中 ▲ = 不良指标，◼ = 需要改进

如何优化 WordPress 上的 Lighthouse 性能分数

有多种方法可以优化 WordPress 网站上的 Lighthouse 性能。让我们浏览其中的一些内容，让您了解如何改进 Lighthouse 指标：

设置页面缓存 可显着加快服务器响应时间，并有助于改进最大内容绘制 (LCP)。这是 WP Rocket 解决方案的重要组成部分。

优化浏览器缓存 以确保您拥有正确的策略来维护浏览器中的静态文件。WP Rocket 可以帮助您自动获得最佳的过期时间——完全减轻您的压力。您将再次处理 LCP 等级。
优化您的字体、图像和代码， 以确保您不会加载不必要的 CSS 或未使用的 JavaScript 文件，这些文件会妨碍您的主要内容（以及 LCP 分数）。您可以使用 WP Rocket 中的“文件优化”选项卡轻松进行此类优化，这有助于消除渲染阻塞资源、避免链接关键请求、缩小 JS 和 CSS 文件、删除未使用的 CSS以及延迟加载图像。您还可以使用Smush Pro等工具来优化 WordPress 网站上图像的大小。
优化您的字体 – 例如，使用字体预加载来提高累积布局偏移 (CLS) 性能。
如果您在多个国家/地区开展业务，请使用内容交付网络 (CDN)，这样您就可以确保在世界各地提供出色的体验。
使用服务器级压缩 来减小站点的文件大小以实现快速加载。为此， WP Rocket 自动启用 Gzip 压缩，并负责 LCP 分数。
确保所有图像和嵌入内容都有尺寸 – 特别是那些使用代码手动添加的图像和嵌入物。WordPress 会自动添加您通过编辑器上传的任何图像，但它无法捕获手动图像。此操作将帮助您提高 CLS。
不要在现有内容之上动态注入任何内容 ，除非它是为了响应用户的操作。您将再次减少累积布局偏移。
推迟或删除不必要的 JavaScript 或 CSS – 如果您正在努力缩短交互时间 (TTI) 和总阻塞时间 (TBT)，您应该查看是否有任何不必要的 JavaScript 和 CSS 会减慢页面的渲染速度。这些通常是常见的罪魁祸首。
最小化主线程工作 或 减少 JavaScript 执行时间以提高速度指数 (SI)。

这些只是您可以用来优化 Lighthouse 分数的一些示例。