作为网站所有者,最大限度地提高网站的搜索引擎优化 (SEO)、可访问性和性能至关重要。然而,为了尽可能有效地解决这些因素,拥有正确的工具和技术至关重要。当今最具创新性的解决方案之一是 Google Lighthouse。

在本文中,我们将向您介绍 Google Lighthouse 及其工作原理。然后我们将解释如何使用它来改进您的网站。

让我们开始吧!

什么是谷歌灯塔?

Google Lighthouse 是一个免费的开源工具,可以帮助您提高网站的速度、性能和整体体验。生成 Lighthouse 报告可以更轻松地提高网页质量。

您可以通过多种不同的方式使用此工具。您可以通过以下方式运行它:

  • Chrome 开发者工具
  • Chrome 扩展
  • 节点模块
  • 网络用户界面(UI )

将 URL 提交给自动化工具后,它会执行多个页面审核并创建一份报告,详细说明页面的执行情况。然后,您可以使用结果中的建议来改进您的网站。

Lighthouse 不仅适用于开发人员。此工具适用于任何有兴趣了解其网站性能和优化网站的具体步骤的网站所有者。

Lighthouse 如何审核页面

Lighthouse 审核的主要重点是 Google 的核心 Web Vitals。如果你不熟悉,这些是谷歌用来衡量页面速度和整体用户体验 (UX) 的基本指标。它们包括 Maximum Content Paint (LCP)、First Input Delay (FID) 和 Cumulative Layout Shift (CLS)。

换句话说,使用 Lighthouse 可以帮助您查看您的网站。您可以使用它提供的可操作见解来优化您的页面以获得更好的搜索引擎排名结果。

Lighthouse 报告包括五个类别:

  • Performance
  • Accessibility
  • Search Engine Optimization
  • Best练习
  • Progressive Web App

它还使用 1 到 100 的评分系统,并针对模拟的 3G 连接测试网站。然而,分数可能会随着时间的推移而变化,因为谷歌经常更新其排名标准。因此,您可能希望随时了解 Lighthouse 的任何更新。

另外,虽然与 PageSpeed Insights 有点相似,但 Lighthouse 却不是。 Lighthouse 提供了比页面性能更全面的图片(就像 PageSpeed Insights 一样)。

如何使用 Google Lighthouse

正如我们所提到的,有一些工作流可用于 Lighthouse。如果不想安装扩展或运行命令,可以使用 web.dev 或 DevTools。下面,我们将引导您完成每个选项的分步说明。

如何使用 Chrome DevTools 运行 Google Lighthouse

要开始,您首先需要下载 Google Chrome(如果您还没有下载的话)。安装后,您可以在 Chrome 中打开一个新的浏览器选项卡,然后导航到您要审核的网页。

接下来,右键单击页面并选择“检查”。您还可以单击浏览器右上角的三个垂直点,然后导航至更多工具 > 开发人员工具。

这将打开页面右侧或顶部的 DevTools 面板。在工具栏中,(1) 点击灯塔:

请注意,如果您在工具栏中没有看到 Lighthouse 选项,您可能需要单击末尾的两个箭头。 Lighthouse 工具打开后,确保选择了所有五个类别,然后 (2) 选择生成报告。

当 Lighthouse 完成审查运行时,它将带您进入结果屏幕。报告将如下所示:

p> 您会找到每个类别的分数和部分。您可以通过单击页面顶部的分数来了解有关每个项目的更多信息。

50 到 89 之间的任何分数都被认为是一个很好的分数。 90 到 100 之间的分数是优秀的。目标是每个类别的得分在 90 到 100 之间。

如何在 web.dev 中使用 Google Lighthouse

使用 Lighthouse 审核网页的另一种快速简便的方法是使用 web dev。导航至此页面并输入页面 URL:

/ p>

下一步,单击“运行审核”按钮。一两分钟后,Lighthouse 将完成对站点的分析并带您查看报告。您可以在这里了解更多关于每个类别的分数和改进机会:

您可以单击每个折叠的部分将其展开并了解更多信息。您还可以通过选择报告顶部的类别名称和分数来访问有关每个类别的详细信息。

如何通过 Chrome 扩展程序使用 Google Lighthouse

或者,您可以下载并安装适用于 Lighthouse 的 Chrome 扩展程序。如果您打算经常使用 Lighthouse,这可能是一个不错的选择。

同样,您需要安装 Chrome 浏览器。接下来,您可以导航到 Chome Web Store 并安装 Lighthouse 扩展:

安装插件后,重新启动浏览器。您现在应该在地址栏的末尾看到一个灯塔符号。访问您要查看的网页,点击灯塔符号,然后选择生成报告:

这会将您直接带到报告页面,您可以在其中查看每个类别的评分详细信息。请注意,审核可能需要一两分钟才能完成。

如何将 Google Lighthouse 与 Node 一起使用

如果您正在寻找 Lighthouse 的配置灵活性,您还可以使用 Node 模块。这是一个更高级的解决方案,但它提供了更精细的控制。

首先需要安装一个长期支持版本的Node:

接下来可以运行命令行安装Lighthouse:

npm install -g lighthouse # 或者使用yarn: # yarn global add lighthouse

最后可以通过以下命令进行审计:

Lighthouse

当然需要将替换为您要审核的页面的 URL。您可以参考 GitHub 以获取有关源代码的更多信息。

结论

定期审核您的 WordPress 网站对于为访问者和搜索引擎提供良​​好体验至关重要。借助 Google Lighthouse 等工具,您可以通过几个简单的步骤快速评估网站的性能、SEO 和可访问性。

正如我们在本文中所讨论的,Lighthouse 是一种免费的自动化工具,可用于深入了解您的网页性能和整体体验。您可以通过安装 Chrome 扩展程序或直接在浏览器中使用 DevTools 来使用它。然后,您可以使用这些报告来了解如何改进您的网站。

您对使用 Google Lighthouse 有任何疑问吗?在下面的评论部分让我们知道!

精选图片来自 Cienpies Design/shutterstock.com

来源