了解如何使用lighthouse测试性能，哪些指标构成lighthouse的性能得分，以及这些指标的含义。
也许您在这里是因为您是性能指标的忠实拥护者。或者，也许您不知道灯塔是什么，并且太害怕问了。
两者都是很好的选择。欢迎！
为了使开发人员文档神秘化，我招募了技术seo和google data studio的书呆子rachel anderson。
总之，我们希望您的绩效改善工作从“使所有数字?变为绿色”到一些清晰而有意义的行动项目。
我们来看看：
灯塔到底是什么？（以防您不知道并且不敢问。）更新了性能得分的计算方式（版本6和7）。如何使用lighthouse测试性能。哪些指标构成了lighthouse的绩效得分。这些指标是什么意思。如何改善它们。什么是灯塔？lighthouse是一个开放源代码审核工具，可在五个方面提供标准化分数：
性能。渐进式web应用程序。最佳做法。辅助功能。seo。出于本文的目的，我们将使用名称lighthouse来指代共享github存储库执行的一系列测试，而与执行方法无关。
lighthouse使用模拟数据（也称为实验室数据）运行性能测试。
这是在具有预定义设备和网络设置的受控环境中收集的性能数据。
实验室数据有助于调试性能问题。这并不意味着在受控环境中在本地计算机上的体验代表了野外真实人类的体验。
灯塔更新：web核心生命2020年5月5日，chromium项目宣布了一套三个指标，由google支持的开源浏览器将以此指标衡量性能。
这些指标称为web vitals，是google计划的一部分，旨在为质量信号提供统一的指导。
这些指标的目标是以用户为中心的方式衡量web性能。
在两周内，lighthouse v6在更新的中心发布了web core vitals的修改版本。
2020年7月，随着chrome 84的发布，lighthouse v6的统一指标在所有google产品中采用。
chrome devtools审核面板已重命名为lighthouse。pagespeed见解和google search console也引用了这些统一指标。
“网络核心生命”占lighthouse加权绩效得分的55％。重点的改变设定了新的，更完善的目标。
总体而言，大多数页面看到的影响很小，有83.32％的测试在转换到v6时得分降低了10分或更少。
第7版目前已在github上发布，并计划于2021年3月推出稳定的chrome 89进行大规模推广。
如何使用lighthouse测试性能方法学问题开箱即用，lighthouse一次审核一个页面。
单页得分并不代表您的网站，快速的首页并不意味着快速的网站。
在您的网站中测试多种页面类型。
确定您的主要页面类型，模板和目标转换点（注册，订阅和结帐页面）。
示例页面测试清单
网址 页面类型
/ 主页
/工具 分类模板
/ tools / screwdrivers 产品清单页面模板
/ acme /豪华砧 产品详细信息页面模板
/大车 大车
/查看 查看
/订单确认 订单确认
/博客 博客根
/ blog / roadrunners-101 博客模板
在开始优化之前，请在每个示例页面上运行lighthouse并保存报告数据。
记录您的分数和改进的待办事项清单。
通过保存json结果并?在需要详细的结果信息时利用lighthouse viewer来防止数据丢失。
使用roi获取待办事项
很难将开发资源用于seo建议。
内部seo可以通过为每个积压票证的生日准备一个生日蛋糕来破坏其胰腺。或至少学会讨厌蛋糕。
根据我作为内部企业seo的经验，优先考虑绩效计划的技巧是获得支持该投资的数字。
这些原始数据将成为美元符号，可以证明和奖励开发工作。
在测试期间，您可能会标记多个区域。没关系！
如果您想知道哪些变化会带来最大的收益，请查看lighthouse scoring calculator。
如何进行灯塔测试这是通往奥兹省的许多道路的案例。当然，某些稻草人对某种阴影的砖块可能会特别响亮，但这与您的目标有关。
希望将seo测试集成到发布过程中？是时候学习一些npm了。
有不到五分钟的时间为准客户会议做准备？一些一次性报告应该可以解决问题。
无论执行哪种方式，除非您有台式机的特殊用例，否则默认为移动方式。
对于一次性报告：chrome devtools使用chrome devtools中的lighthouse面板一次测试一页。由于该报告将模拟用户使用浏览器的体验，因此请使用具有所有扩展名的隐身实例，并禁用浏览器的缓存。
专家提示：创建用于测试的chrome配置文件。使其保持本地状态（不启用同步，保存密码或与现有google帐户关联），并且不为用户安装扩展程序。
如何使用chrome devtools运行测试灯塔
打开chrome的隐身实例。导航到chrome开发者工具的“网络”面板（在mac上为command + option + i，在windows和linux上为control + shift + i）。勾选该框以禁用缓存。导航到lighthouse面板。单击生成报告。保存文件。从devtools运行lighthouse的优点
您可以测试本地版本和经过身份验证的页面。可以使用lighthouse ci diff工具比较保存的报告。从devtools运行lighthouse的缺点
一次一份报告。需要您手动保存结果。用于频繁测试同一页面：web.dev就像devtools一样，但是您不必记住禁用所有讨厌的扩展！
访问web.dev/measure/。使用您的google帐户登录。输入您的url。单击运行审核。从web.dev运行灯塔的优点
捕获结果的漂亮时间表！（只要您已登录）。
快速指南以改进问题。可以使用lighthouse ci diff工具比较保存的报告。从web.dev运行灯塔的缺点
一次一份报告。您需要记住一段时间后要跟踪的url。对于大规模（健全性）测试：node命令行安装npm。
（mac pro技巧：使用自制软件来避免令人讨厌的依赖问题。）安装灯塔节点模块具有npm install -g lighthouse与运行单个文本lighthouse <url>通过以编程方式运行测试，在使用列表上运行测试。从节点运行灯塔的优点
可以一次运行许多报告。可以设置为自动运行以跟踪随时间的变化。从节点运行灯塔的缺点
需要一些编码知识。更耗时的设置。灯塔性能指标解释
在版本6和7中，lighthouse的性能得分由七个指标组成，每个指标占总性能得分的百分比。
指标名称 重量
最大含量的涂料（lcp） 25％
总封锁时间（tbt） 25％
首次合格涂料（fcp） 15％
速度指数（si） 15％
互动时间（tti） 15％
累积版式移位（cls） 5％
最大含量的涂料（lcp）它代表的是：用户对加载体验的感知。
灯塔性能得分比重：?25％
它的测量方式：页面加载时间轴中在视口中可见页面最大图像或文本块时的点。
测量方式：?lighthouse从chrome的跟踪工具中提取lcp数据。
最大的内容丰富的涂料是否对web核心至关重要是!
lcp评分
目标：在不到2.5秒的时间内达到lcp。
lcp时间
（以毫秒为单位） 颜色编码
0–2,500 绿色（快速）
2,501-4,000 橙色（中等）
超过4,000 红色（慢）
lcp可以包含哪些元素？
文本。图片。影片。背景图片。什么算作您网页上的lcp？
这取决于！lcp通常因页面模板而异。
这意味着您可以使用同一模板测量少量页面并定义lcp。
如何使用chrome devtools定义lcp
在chrome中打开页面。导航到开发工具的“性能”面板（在mac上为command + option + i，在windows和linux上为control + shift + i）。将鼠标悬停在“时间”部分的lcp标记上。“相关节点”字段中详细说明了与lcp对应的元素。网站建设
lcp较差的原因是什么？
lcp较差通常来自四个问题：
服务器响应时间慢。渲染阻止的javascript和css。资源加载时间。客户端渲染。如何解决较差的lcp
如果原因是服务器响应时间较慢：
优化您的服务器。将用户路由到附近的cdn。缓存资产。首先缓存html页面。尽早建立第三方连接。如果原因是阻止渲染的javascript和css：
缩小css。推迟非关键css。内联关键css。缩小并压缩javascript文件。延迟未使用的javascript。尽量减少未使用的polyfill。如果原因是资源加载时间：
优化和压缩图像。预加载重要资源。压缩文本文件。根据网络连接（自适应服务）交付不同的资产。使用服务工作者缓存资产。如果原因是客户端渲染：
尽量减少关键的javascr