初学lighthouse前端性能检测工具

521 阅读2分钟

这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战

使用:

1.chrome扩展程序运行使用 2.命令行工具,node Cli安装使用 1. 安装: npm install -g lighthouse # or use yarn: # yarn global add lighthouse 2. 审查: lighthouse www.example.com --view 3. 查看输入输出选项 lighthouse --help

检查类别和设备:

它包含了性能(Performance),PWA(Progressive Web App)渐进式应用程序,访问无障碍(Accessibility),最佳实践(Best Practice),搜索引擎优化(SEO)等几个部分

Performance几个指标:

FCP:第一次内容丰富的绘画(FCP)指标衡量了从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。 Speed Index: LCP:最大内容画(LCP)指标报告了在视口中可见的最大图像或文本块的渲染时间,相对于页面首次开始加载的时间。

CLS:是一种视觉稳定性的测量方法,它量化了页面内容在视觉上的移动程度 TBT:总阻塞时间(Total Blocking Time,TBT)量化了负载响应能力,测量了主线程被阻塞的时间长到足以阻止输入响应的总时间。 TTL:指的是所有的页面内容都已经成功加载,且能够快速地对用户的操作做出反应的时间点。该指标目前仍处于实验阶段。 CLS:Cumulative Layout Shift (CLS)是一种视觉稳定性的测量方法,它量化了页面内容在视觉上的移动程度。它量化了一个页面的内容在视觉上移动的程度。

修改权重

Lighthouse中的性能得分是由多个指标加权混合计算出来的,总结出一个页面的速度。 修改权重链接:googlechrome.github.io/lighthouse/…

PWA评分:

PWA(Progressive Web App)评分的分值区间也是0-100。Lighthouse 使用 PWA 基准检查项列表(Baseline PWA Checklist)进行测评,测评结果将这些指标项分成了四个类别,共包含12个自动测试项和3个手动测试项,其中各个自动测试项的评分权重是相同的。PWA 的评测指标对我们来说非常重要,我们可以从这四个类别详细了解一下基准指标项。

lighthouse测试流程图

  1. Lighthouse 与浏览器建立连接。
  2. 测试的初始化配置与加载待测试页面。
  3. 在页面加载过程中,运行一系列的采集器(gatherers),每个采集器都会收集自己的目标信息,并生成中间产物(artifacts)。
  4. 运行一系列的审计项(audits),每个审计项都会从中间产物(artifacts)中获取所需的数据,计算出各自的评分。
  5. 基于审计项的评分计算出大类的评分,汇总生成报告。