谷歌灯塔是什么？
谷歌灯塔是一个免费的谷歌工具，可以帮助您提高网站上的网页质量。
该工具审核页面的性能、可访问性、SEO等。并提供建议，让你可以改进这些方面。
它是开源软件——任何人都可以在任何网页上使用它。
无论你是一个网站开发人员，搜索引擎优化，或网站所有者，谷歌灯塔可以帮助你提高你的网站的整体体验和性能。
在这篇文章中，我们将介绍谷歌灯塔是如何工作的，以及如何使用它来审计你的网页。
让我们开始吧。
谷歌灯塔是如何工作的？
谷歌灯塔的工作是对五个主要的网站优化类别进行审计。
1. 表演
在这个审计中，Lighthouse衡量一个网站的加载速度和用户访问它的速度。
它报告五个速度指标的性能，每个指标衡量页面速度的某些方面：
第一次内容绘制（FCP）：测量第一个文本或图像对用户可见的时间
最大内容绘制（LCP）：计算页面为用户加载其最大元素所需的时间
总阻塞时间（TBT）：测量页面对用户输入（如鼠标点击）的响应被阻塞的时间
累积布局移位（CLS）：测量用户访问页面时发生的布局移位
速度索引（SI）：显示页面内容的加载速度
Lighthouse根据页面对所有这些指标的执行情况为页面分配总体性能分数。分数可以是0到100之间的任何值。
如果你的分数在90到100之间，这表明你的页面对用户体验进行了很好的优化。
任何低于90的值都意味着页面上的大量资源正在减慢速度，影响整体页面体验。
Lighthouse也提供建议。你可以用它来提高你的表现。
2. 可访问性
Lighthouse的可访问性测试分析了使用辅助技术的人如何使用你的网站。
具体来说，它会查看按钮和链接等元素，看看它们是否被描述得很好。
它还分析图像以查看是否指定了所有文本。因此，当视力有限或没有视力的用户使用屏幕阅读器时，他们就能理解图像的含义。
与性能审计报告类似，可访问性报告的评分为100分。分数越高越好。
该工具还突出了提高整体可访问性的机会。
3. 最佳实践
Lighthouse中的最佳实践审核检查您的页面是否建立在现代web开发标准之上。
灯塔调查是否：
使用HTTPS从安全服务器加载资源。
所有图像都以正确的宽高比和适当的分辨率显示
所有JavaScript库都是安全的，没有任何漏洞。
页面具有HTML文档类型
内容安全策略（CSP）可以有效防止跨站点脚本（XSS）攻击
页面没有任何浏览器错误
Page没有过时的框架和api
页具有有效的源映射
页面没有出现在Chrome DevTools面板的问题，如网络请求失败，安全措施不足，以及其他浏览器问题
页面的字符编码由元字符集标签设置
页面允许用户在密码字段中粘贴密码
Page通过在页面加载时阻止地理定位和通知权限请求来创建良好的用户体验
所有这些因素决定了你的分数。
关于最佳实践的灯塔报告还强调了需要您注意的特定元素。这样可以提高你的分数。
4. 搜索引擎优化
Lighthouse运行一个测试来分析你的网页的一些技术方面的SEO。
具体来说，它检查是否：
你的网页是移动友好的
页面具有有效的结构化数据
内部链接是可抓取的
页具有有效的hreflang属性
设置标题和元描述标签
页面是可索引的
Robots.txt是有效的
页面正在返回HTTP 200 （OK）状态响应码
页面有一个有效的“rel=canonical”标记集
页面内容独立于插件
页面上的链接是用描述性文字介绍的
页面上的图像具有指定的图像和文本
页面有一个带有宽度或初始缩放设置的视窗元标签
然后给一个满分100分的分数。
它还突出显示了在运行审计时检测到的任何SEO问题。
但是这个工具并不能给你SEO的全貌。
如果你想让你的网站在b谷歌中排名更高，你需要确保它在SEO的各个方面都得到了优化。确保没有任何问题影响你的排名。
这就是Semrush的工具可以派上用场的地方。
例如，网站审计检查你的网站超过140个方面的SEO。比如重复内容、重定向、内部链接、URL结构等等。
要使用该工具，请设置一个项目并运行审计。
一旦审计完成，您将对网站的SEO健康状况有一个高层次的概述。
您还可以查看影响性能的特定问题。去“问题”选项卡。
对于检测到的每个问题，该工具都会提供有关如何修复它的建议。
解决该工具为您的站点检测到的每个问题。所以你的网站的SEO保持在一个健康的状态。
5. 渐进式Web应用程序（PWA）
Lighthouse中的PWA审计验证您的web应用程序是否使用了现代web功能来提供最佳的用户体验。
它检查你的web应用是否：
在移动网络上快速可靠，并提供离线功能
可安装在多种设备类型上，并具有离线功能和推送通知等功能
通过将HTTP流量重定向到HTTPS，配置自定义启动屏幕，调整网页内容以适应移动屏幕以及实现Lighthouse列出的所有其他最佳实践，对pwa进行了优化
测试将根据这些因素运行您的web应用程序，并分配一个PWA徽章。
（图片来源：Github）
这意味着，与前四个报告不同，当您在Lighthouse中运行PWA审计时，您将获得一个徽章（不是100分）。
是这样的:
审计报告还将提供改善PWA整体绩效的建议。包括需要解决的具体问题。
如何使用谷歌灯塔
现在您已经了解了谷歌Lighthouse是什么以及它是如何工作的，接下来让我们看看可以使用它来审计页面的不同方法。
使用灯塔与Chrome DevTools
在Chrome浏览器中，您可以使用Chrome DevTools运行谷歌灯塔审计。
打开要审核的网页。
然后右键单击页面上的任何地方，选择“检查”。
Inspect功能将在网页的右侧打开一个DevTools面板。
从面板的工具栏中选择“Lighthouse”。(如果找不到Lighthouse选项，请单击工具栏末尾的两个箭头。你会在那里看到的。)
从这里，你可以选择一个，多个，或所有类别，这取决于你的网站的哪些方面你想分析。然后点击“分析页面加载”。
然后该工具将为您生成一个报告。您会发现每个类别的审计分数都在顶部。
你可以点击一个特定的类别来了解更多。在本例中，我们单击“Performance”审计。
注意：当你使用DevTools进行性能审计时，你会注意到Lighthouse用6个速度指标（而不是5个）来衡量你的性能。
这个额外的指标就是互动时间（TTI）。它计算页面与用户完全交互所需的时间。
这个指标是他们退役的指标之一。目前还不清楚为什么当你在DevTools中运行Lighthouse审计时，它仍然被考虑在内。
使用灯塔与Chrome扩展
灯塔有一个Chrome扩展，可以为您执行审计。
在您的Chrome浏览器上，安装灯塔Chrome扩展。
访问您想要测试的网页。
然后打开Chrome扩展菜单，选择“灯塔”。
然后点击齿轮图标。
您将看到可以根据要生成的报告选择或取消选择特定类别的设置。
然后单击“生成报告”按钮开始审计。
Lighthouse将在新选项卡中为您生成报告。
在pagespeedinsights中使用Lighthouse
Lighthouse也可以通过谷歌的pagespeedinsights工具获得。
打开工具。输入您的页面URL，然后单击“分析”。
该工具将为所有类别生成报告，除了PWA。PageSpeed insights不执行PWA审计。
通过节点模块使用谷歌灯塔
您还可以使用Node JavaScript模块来运行Lighthouse审计。
在系统上安装当前Node。
然后运行如下命令行安装Lighthouse：
NPM安装-g lighthouse
一旦安装了Lighthouse，使用下面的命令行生成报告。
灯塔< url >
（您需要将“url”替换为您想要测试的页面的网址。）
常见问题
Lighthouse与pagspeed Insights有何不同？
Lighthouse与PageSpeed Insights的不同之处在于，Lighthouse只使用实验室数据来衡量页面的性能。而PageSpeed insights同时使用实验室和现场数据。
实验室数据反映了假设用户可能会如何体验您的站点。相反，现场数据反映的是真实用户对网站的体验。
为什么我每次考试的分数都不一样？
每次运行测试时，您在Lighthouse中看到的分数都会有所不同。
网络条件、修改网络请求的浏览器扩展以及在特定页面上显示的广告都会影响您每次进行测试的分数。
灯塔报告是否包含核心网络生命指标？
是的。Lighthouse的性能审计分析您的网站的以下核心Web vital指标：
最大含量涂料（LCP）
总阻塞时间（TBT）（作为原始首次输入延迟（FID）度量的代理）
累积布局移位（CLS）