性能文章>自研前端性能监控平台之 Lighthouse 篇>

自研前端性能监控平台之 Lighthouse 篇原创

2年前
5154410

一、综述

前端性能优化是一个永恒的面试必答题,随着时间的推移和业务的发展,几乎每一个前端应用都会面临性能上的考验,根据统计数据,每当页面加载时间增加一秒,就会有大量用户流失,所以做好前端性能优化,对于用户体验和产品留存都有着非常重要的作用。

那么如何知道当前页面的性能情况,并采取针对性的性能优化,以及评估性能优化的效果,我们就需要采集页面性能相关的详细指标。一个页面有很多指标,而且不同产品关注的指标也不尽相同,所以用一套统一的采集分析系统覆盖所有场景是不准确的。拿我们公司 TA 产品来说,除了页面加载时间等常规指标外,我们更关注查询时间、图表和表格的渲染和交互时间等极大影响用户体验的指标。所以,自研一套贴合团队需求的前端性能监控系统是十分有必要的。

目前数数前端小组已经完成了自研的前端性能监控平台 1.0 版的开发,涉及到的技术有 react、node.js、egg、mysql、Lighthouse、Puppeteer 等。其中 react 作为监控平台前端页面编写语言,egg 作为后台服务,mysql 作为数据库,Lighthouse、Puppeteer 均为 node 库,前者为性能指标采集审查工具,后者提供无头浏览器环境模拟页面操作。

二、设计思路

我们目前性能监控平台的整体设计思路是在服务端通过 Puppeteer 访问检测页面,调用 Lighthouse 获取相应指标,计算目标得分并将结果保存在数据库,同时提供给前台页面进行可视化展示。

对于普通网站,除了 Lighthouse 默认支持的审查器,我们还添加了一些针对图片、资源、接口等元素的自定义审查器,用户可以自己选择需要的项目来进行性能评测。

针对 TA 系统,我们事先在业务系统中通过 performance.markperformance.measure 添加了若干性能标记,通过 Lighthouse 的自定义采集器获取这些数据,并使用自定义审查器完成性能评测。

我们关于性能监控的整体分享内容会分为以下四个部分:

  1. Lighthouse 的基本配置和用法
  2. Lighthouse 的自定义采集器和审查器
  3. Puppeteer 的基本配置和用法
  4. Lighthouse 和 Puppeteer 结合完成复杂操作

本篇主要介绍 Lighthouse 的基本用法。

三、Lighthouse 介绍

Lighthouse 是 Google 开源的自动化工具,用于改进网络应用的质量。它可以作为一个 Chrome 扩展程序运行,或从命令行运行。只需要为 Lighthouse 提供一个要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告,从中看看可以采取哪些措施来改进应用。

Lighthouse 由这几部分组成

  • Driver(驱动)—— 通过 Chrome Debugging Protocol 和 Chrome 进行交互。

  • Gatherer(采集器)—— 决定在页面加载过程中采集哪些信息,将采集的信息输出为 Artifact。可自定义。

  • Audit(审查器)—— 将 Gatherer 采集的 Artifact 作为输入,审查器会对其测试,然后得出相应的测评结果。可自定义。

  • Reporte(报告)—— 将审查的结果通过指定的方式报告出来。

简单来说 Lighthouse 的工作流程就是:指定页面 —> 连接页面 —> 测试页面 —> 生成报告。

四、使用 Lighthouse

4.1 Chrome 开发者工具

  1. 打开 Chrome 浏览器,右键点击空白处,选择检查。
  1. 在工具栏后,选择 Lighthouse 选项卡。
  1. 如果工具栏里没有 Lighthouse 选项卡,可以通过设置让其显示。
  1. 设置类别和设备,点击生成报告,其中类别是选择要测试的模块,设备选择是移动端还是桌面端,可根据具体场景选择。
  1. 运行结束后就可以看到如下的结果。

4.2 通过 Node CLI 使用

  1. 全局安装 lighthouse。
npm install -g lighthouse
// 或者 yarn global add lighthouse
  1. 打开命令窗口,运行 lighthouse 命令。
lighthouse https://www.baidu.com

4.3 以 Node 模块使用

也可以在 node 项目中安装 lighthouse,并作为 node 模块来使用。

const fs = require('fs');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
(async () => {
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
  const options = {
    logLevel'info',
    output'html',
    onlyCategories: ['performance'],
    port: chrome.port,
  };
  const runnerResult = await lighthouse('https://www.baidu.com', options);
  // `.report` is the HTML report as a string
  const reportHtml = runnerResult.report;
  fs.writeFileSync('lhreport.html', reportHtml);
  // `.lhr` is the Lighthouse Result as a JS object
  console.log('Report is done for', runnerResult.lhr.finalUrl);
  console.log(
    'Performance score was',
    runnerResult.lhr.categories.performance.score * 100
  );
  await chrome.kill();
})();

五、结果解读

使用 Lighthouse 对网站进行测评后,我们会得到一份评分报告,它包含了性能(Performance),访问无障碍(Accessibility),最佳实践(Best Practice),搜索引擎优化(SEO),PWA(Progressive Web App)5 个部分,每一项下面又有若干小项(audit),还有详细诊断结果和优化建议,帮助开发者有针对性地进行优化。

这里我们将介绍一下 Lighthouse 是如何计算这几个评分的。

5.1 性能

Lighthouse 提供了 6 个性能指标:FCP、SI、LCP、TTI、TBT 和 CLS,权重分别是 10%,10%,25%,10%,30% 和 15%。Lighthouse 会根据权重计算得到一个分数值。详细指标含义可以参考链接:https://web.dev/lighthouse-performance/

5.2 访问无障碍

访问无障碍检测所有用户是否都能有效地访问内容并浏览网站,评分的分值由相关指标的加权平均值计算而来,参考链接:https://web.dev/lighthouse-accessibility/

5.3 最佳实践

最佳实践检测可以改善网页的代码健康状况的一些最佳做法,评分的分值由相关指标的加权平均值计算而来,参考链接:https://web.dev/lighthouse-best-practices/

5.4 搜索引擎优化

搜索引擎优化检测搜索引擎对网页内容的理解程度是怎样的,评分的分值由相关指标的加权平均值计算而来,参考链接:https://web.dev/lighthouse-seo/

5.5 PWA

PWA 衡量网站是否迅速、可靠且可安装,评分的分值由相关指标的加权平均值计算而来,参考链接:https://web.dev/lighthouse-pwa/

六、结尾

以上就是 Lighthouse 的基本用法,基础的 Lighthouse 审查已经可以比较准确的评估一个页面的性能数据,并帮助我们进行很多的优化工作,如果有更特殊的性能需求,可以通过自定义采集器和审查器来实现,下一篇我们将介绍 Lighthouse 自定义采集器和审查器的用法,敬请期待。

参考链接:

  • https://github.com/GoogleChrome/lighthouse
  • https://developers.google.com/web/tools/lighthouse
  • https://web.dev/learn/#lighthouse

 

点赞收藏
thinkingdata

数数科技前端团队,专注于大数据、可视化和工程化。

请先登录,查看4条精彩评论吧
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步
10
4