当前位置: 首页 > 科技观察

Lighthouse性能测试工具的使用方法

时间:2023-03-12 04:35:28 科技观察

前言最近在做一个性能测试工具,很多知识点都不清楚。我打算查漏补缺。接下来,我们将从官方的性能测试工具Lighthouse(灯塔)开始我们的学习,简单介绍一下Lighthouse的一些要点。看完这篇文章,你就能明白Lighthouse是什么了。如何快速开始使用Lighthouse(入门)。Lighthouse中的一些Metrics指标。什么是灯塔?官方对它的解释:Lighthouse是一个开源的提高web应用质量的自动化工具。您可以将其作为Chrome扩展程序或从命令行运行。您为Lighthouse提供一个您想要查看的URL,它会对页面运行一系列测试,然后生成关于页面性能的报告。它是如何工作的?如果你像我一样翻看它的代码,看完它的介绍一定很迷茫。它的代码依赖如下:如果你对lighthouse内部模块依赖感兴趣,可以看看它的仓库。给出了参考链接。https://github.com/GoogleChrome/lighthouseGettingStarted有两种运行Lighthouse的方式:作为Chrome扩展,或作为命令行工具。Chrome扩展程序提供了更加人性化的界面,便于阅读报告。一个命令行工具,允许您将Lighthouse集成到持续集成系统中。Chrome扩展程序下载GoogleChrome52或更高版本。安装LighthouseChrome扩展程序。地址:https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk单击生成报告按钮以针对当前打开的页面运行Lighthouse测试。命令行工具NodeCLI在配置和报告Lighthouse操作方面提供了最大的灵活性。如果用户需要更高级的功能,或者想要自动运行Lighthouse,他们可以使用NodeCLI。安装Lighthouse作为全局节点模块。要安装:npminstall-glighthouse#oruseyarn:#yarnglobaladdlighthouse针对页面运行Lighthouse审查。灯塔https://www.example.com--view传递--help标志以查看可用的输入和输出选项。lighthouse--help对于一些不太清楚的选项,可以点击这个链接:https://github.com/GoogleChrome/lighthouse#cli-options假设我们review,会出现这样的结果:newmetricscanseeatotal在6个指标中,Lighthouse6.0在报告中引入了三个新指标。其中两个新指标——最大内容绘制(LCP)和累积布局偏移(CLS)——是CoreWebVitals的实验室实施。那么接下来,我们来看一下这些Metrics指标的含义。几个度量指标FirstContentfulPaint(FCP)FirstContentfulPainting(FCP)指标测量从页面开始加载到页面内容的任何部分在屏幕上呈现的时间。对于此指标,“内容”是指文本、图像(包括背景图像)、svg元素或非白色画布元素。FCP在上面的加载时间轴中,FCP出现在第二帧,就像第一个文本和图像元素被渲染到屏幕上一样。您会注意到,虽然呈现了一些内容,但并不是所有内容都呈现了。这是FirstContentfulPaint(FCP)和LargestContentfulPaint(LCP)之间的重要区别-LCP的目的是衡量页面主要内容何时完成加载。了解概念,如何测量FCP,我们可以接触Fieldtools和Labtools在JavaScript中测量FCP,可以使用PaintTimingAPI。以下示例展示了如何创建一个PerformanceObserver来侦听名为first-contentful-paint的绘制条目并将其记录到控制台。newPerformanceObserver((entryList)=>{for(constentryofentryList.getEntriesByName('first-contentful-paint')){console.log('FCPcandidate:',entry.startTime,entry);}}).observe({type:'油漆',缓冲:真});速度指数速度指数是Lighthouse报告的性能部分中跟踪的六个指标之一。每个指标都反映了页面加载速度的某些方面。那么它是如何检测的呢?SpeedIndex衡量内容在页面加载期间视觉显示的速度。Lighthouse首先捕获浏览器中页面加载的视频,并计算帧之间的视觉进度。Lighthouse然后使用SpeedlineNode.js模块生成速度指数分数。具体计算可以参考GitHub中的代码,这里不再展开。那么我们有机会提高它的性能吗?利用Lighthouse报告中的“机会”部分来确定哪些改进对您的页面最有价值。机会越重要,对绩效得分的影响就越大。例如,下面的Lighthouse屏幕截图显示移除渲染阻塞资源将产生最大的改进。SpeedindexLargestContentfulPaint(LCP)LargestContentfulPaint(LCP)指标报告视口中可见的最大图像或文本块的渲染时间,相对于页面首次开始加载的时间。从图中也可以看出LCP。为了提供良好的用户体验,网站应努力使最大内容帧达到2.5秒或更短。有关更多信息,请观看PaulIrish对LCP的深入分析。https://www.youtube.com/watch?v=diAc65p15agCumulativeLayoutShift(CLS)官方对它的解释:CumulativeLayoutShift(CLS)是一种视觉稳定性的度量,它量化了页面内容流动性的视觉稳定性程度。它量化页面内容在视觉上移动的程度。简单的理解就是:CLS衡量的是在页面的整个生命周期中发生的每一次意外的布局转换,所有单独的布局转换分数的总和。只要可见元素将其位置从一个渲染帧更改为下一个渲染帧,布局就会发生变化。有关如何计算各个布局偏移分数的信息,请参见下文)。https://web.dev/cls/CLS从上图中可以看出,低CLS分数向开发人员发出信号,表明他们的用户没有遇到不必要的内容移动;低于0.10的CLS分数被认为是“好”。总阻塞时间(TBT)我们来看看官方对它的解释:总阻塞时间(TotalBlockingTime,TBT)量化了负载响应能力,衡量主线程被阻塞足够长以阻塞输入响应的总时间。TBT测量首次内容绘制(FCP)和交互时间(TTI)之间的总时间。它是TTI的一个配套指标,它为量化阻碍用户与页面交互能力的主线程活动带来了更多细微差别。此外,TBT与核心网络活力的现场指标FirstInputDelay(FID)具有良好的相关性。更多信息,您可以参考链接:https://web.dev/tbt/最新的评分标准Lighthouse中的性能评分是通过对多个指标进行加权和混合来总结一个页面的速度。6.0的性能评分公式如下。那你就会和我一样,有疑惑,我们不能修改这个权重,当然你可以试试:https://googlechrome.github.io/lighthouse/scorecalc/点击上面的链接,会显示这个画面:计分计算器本网站发布计分计算器,帮助您了解绩效计分。同时,计算器还可以为您提供Lighthouse5.0和6.0版本的分数对比。当您使用Lighthouse6.0版本进行审核时,报告中会有链接到计算工具,并填写结果。总结到这里,其实Lighthouse的使用方法和一些关键指标也已经说明了。你肯定有疑问:我如何计算它们的具体值?有对应的JavaScriptAPI吗?既然可以使用Lighthouse来衡量性能,找到加速页面加载的机会,那么我们该如何优化呢?这个我肯定是看到了,你遇到的疑惑和之前一样,那么怎么解决呢。嗯,上面说的部分没有详细展开。剩下的,尽量多翻看官方文档,查资料,一定收获不少。我是TianTianUp,我们下期见!!!参考[1]Lighthouseperformancescoring:https://web.dev/performance-scoring/[2]GoogleChrome-lighthouse:https://github.com/GoogleChrome/lighthouse[3]Lighthouse6.0的新功能:https://web.dev/lighthouse-whats-new-6.0/[4]Measure:https://web.dev/measure/[5]Lighthouse是如何工作的?:https://github.com/GoogleChrome/lighthouse/blob/master/docs/architecture.md[6]LargestContentfulPaint(LCP):https://web.dev/lcp/[7]TotalBlockingTime(TBT):https://web.dev/tbt/[8]CumulativeLayoutShift(CLS):https://web.dev/cls/[9]FirstContentfulPaint(FCP):https://web.dev/fcp/[10]速度指数:https://web.dev/speed-index/