LightHouse使用

原创 已于 2025-12-08 17:15:09 修改 · 925 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #学习 #性能

于 2025-03-31 09:51:58 首次发布

目录

一、Chrome 开发者工具（DevTools）

1、三种模式

2、设备

3、主要监测指标

二、Node CLI

三、Chrome 扩展

四、测试结果分析

Performance

Accessibility

SEO

LightHouse是一个开源的自动化工具，用于提高网页质量。它可以帮助你分析网页性能、可访问性、SEO 等多方面，给出优化建议。

原文链接：https://blog.youkuaiyun.com/m0_74823842/article/details/144730032 

  • Chrome 开发者工具（DevTools）
  • Node CLI
  • Chrome 扩展
一、Chrome 开发者工具（DevTools）

安装插件

F12 打开DevTools，选择“分析网页加载情况”，进行网页性能分析

1、三种模式

导航模式（默认）

获取性能分数和所有性能指标。
评估渐进式 Web 应用功能。
在页面加载后立即分析可访问性。

无法分析表单提交或单页应用转换。
无法分析在页面加载时无法立即提供的内容。

时间跨度模式

测量某个时间范围内的布局偏移和 JavaScript 执行时间，包括交互。
发现性能机会，以改善长期存在的页面和 SPA 的体验。

不提供总体性能分数。
无法分析基于时刻的性能指标（如：最大内容绘制）。
无法分析页面状态问题（如：没有无障碍功能类别）

快照模式

分析当前状态的页面。
查找 SPA 或复杂表单深处的可访问性问题。
评估隐藏在交互后面的菜单和 UI 元素的最佳实践。

不提供总体性能分数或指标。
无法分析当前 DOM 之外的任何问题（如：没有网络、主线程或性能分析）。

2、设备

分为2种：移动设备和桌面设备

3、主要监测指标

性能指标（Performance）

性能检测（重点）。对页面的性能评分，如：网页的加载速度、响时间等。
指标包括：首次内容绘制（First Contentful Paint）、首次有效绘制（First Meaningful Paint）、首次 CPU 空闲（First CPU Idle）、可交互时间（Time to Interactive）、速度指标（Speed Index）、输入延迟估值（Estimated Input Latency）。

可访问性（Accessibility）

铺助检测。监测页面的可访问性与优化建议，如：网页的可访问性问题，HTML代码标签之类的优化等

最佳实践（Best Practice）

实践性检测。如：网页安全性，如是否开启HTTPS、网页存在的漏洞等

搜索引擎优化（SEO: Search Engine Optimisation）

搜索引擎优化检测。如：网页title是否符合搜索引擎的优化标准等

PWA（Progressive Web App）

验证 PWA 的各个方面的性能情况。

测试流程：

  • 选择配置后，点击 生成报告（Generate report）。Lighthouse 将开始分析网页，并生成一个报告。

  • 分析报告将展示评分（从 0 到 100），并提供具体的优化建议。

测试结果：

二、Node CLI

安装 Lighthouse

npm install -g lighthouse

运行 Lighthouse

lighthouse https://example.com --output html --output-path ./report.html

  • --output json：输出 JSON 格式。

  • --view：运行完毕后自动在浏览器中打开报告。

三、Chrome 扩展

四、测试结果分析

Lighthouse 报告将包括多个部分：

  • 性能：评估网页加载速度和用户体验，包括 LCP（最大内容绘制）、FCP（首次内容绘制）等指标。

  • 可访问性：检查网页是否符合 WCAG 可访问性标准。

  • 最佳实践：如页面是否使用 HTTPS、是否存在不安全的资源等。

  • SEO：检查网页是否符合搜索引擎优化标准。

  • PWA（渐进式 Web 应用）：评估网页是否符合 PWA 标准。

Performance

指标介绍

FCP（First Contentful Paint）即首次内容绘制。它统计的是从进入页面到首次有 DOM 内容绘制所用的时间。这里的 DOM 内容指的是文本、图片、非空的 canvas 或者 SVG。

LCP（Largest Contentful Paint）即最大内容绘制。它统计的是从页面开始加载到视窗内最大内容绘制的所需时间，这里的内容指文本、图片、视频、非空的 canvas 或者 SVG 等。

SI（Speed Index）即速度指数。Lighthouse 会在页面加载过程中捕获视频，并通过 speedline 计算视频中帧与帧之间视觉变化的进度，这个指标反映了网页内容填充的速度。页面解析渲染过程中，资源的加载和主线程执行的任务会影响到速度指数的结果。 ​

Minify JavaScript  

缩减 JavaScript 文件大小

Serve images in next-gen formats

修改图像格式

1、下载安装webp转换工具cwebp

地址：Index of downloads.webmproject.org/releases/webp

2、解压后将其中的bin目录路径添加至path

设置成功后查看版本：

3、其他格式图片转换为webp格式

 cwebp [options] -q quality input.png -o output.webp

对比图片大小：

Accessibility

<html> element does not have a [lang] attribute

Add a lang attribute to the html element (e.g. <html lang="en">) whose value represents the primary language of document.

SEO

Document does not have a meta description

添加描述：<meta name=description content="">

修改之后，评估结果会提高:

    基于lighthouse对网站进行性能优化
    Astar的博客
    07-07 241
    theme: channing-cyan 前言 是这样的，我写了一个在线聊天的demo，前端vue后端koa。访问链接在此 作为一个爱折腾的年轻人，我总想让访问我网站的朋友们访问时十分顺畅、心情舒适、宾至如归，所以使用chrome devtool中自带的lighthouse工具对网站进行了方方面面(性能、可访问性、SEO等等)的分析，顺带做了一波性能优化。 优化前 我们可以看到p...
    Lighthouse（灯塔）—— Chrome浏览器强大的性能测试工具
    热门推荐
    Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
    11-27 1万+
    详细介绍chrome浏览器的Lighthouse使用方法，及测试结果分析解读
    【性能测试工具】Lighthouse Google技术
    weixin_42901443的博客
    02-14 2860
    前端性能测试工具Lighthouse 前端代码审计工具 前端性能优化
    Lighthouse（灯塔）—— Chrome 浏览器性能测试工具
    weixin_43993310的博客
    12-04 4516
    介绍LightHouse 以及如何测试网站的性能
    【Lighthouse前端性能分析工具】超详细！！！
    m0_43550804的博客
    03-24 6880
    详解web前端页面的性能问题如何观察，通过Lighthouse分析前端页面性能，通过resource分析前端组件性能
    记录学习vue遇到的问题
    LYQ980705876的博客
    07-04 2578
    element does not have the "lang" attribute.解决方法：在。运行npm install --save element-ui安装时要在项目目录下。-- 页面内容 -->
    谷歌性能测评工具lighthouse使用指导
    技术引领业务创新
    04-29 1万+
    谷歌性能测评工具lighthouse使用指导
    HTML5网页性能测试：Lighthouse使用教程
    小白菜的博客
    07-10 848
    本教程将帮助前端开发者、网站运营人员和SEO优化师掌握使用Lighthouse进行网页性能分析的完整流程，涵盖移动端/桌面端测试、性能指标解读、优化方案制定等内容。：页面最大内容元素渲染时间：首次输入延迟时间：累计布局偏移量Lighthouse的五大检测维度及其相互关系Web Vitals三大核心指标的优化方法从手动检测到自动化监控的实现路径性能优化与业务目标的平衡之道。
    【高频考点精讲】前端性能分析工具：Lighthouse的定制化使用指南
    全栈老李的博客
    05-18 926
    / 全栈老李的定制配置示例onlyCategories: ['performance'], // 只检查性能throttling: { // 自定义网络节流},screenEmulation: { // 模拟移动设备},audits: ['interactive' // 只关注这两个指标// 全栈老李的自定义审计示例：检查是否使用了过大的GIF图return {title: '避免使用大尺寸GIF',failureTitle: '发现了大尺寸GIF图片',
    lighthouse的介绍和基本使用方法
    问白的博客
    02-25 4582
    Lighthouse是一个开源的自动化性能测试工具，我们可以使用该功能检测我们的页面存在那些性能方面的问题，并会生成一个详细的性能报告来帮助我们来优化页面。
    初级测试工程师入门：如何使用 Lighthouse 进行网站性能测试
    qq_33537164的博客
    01-08 1314
    Lighthouse 是一个开源的自动化工具，可以在 Chrome 浏览器中运行，用于评估网页的性能、可访问性、PWA（渐进式网络应用）等。它生成详细的报告，并提供改进建议。
    前端性能测试工具 LightHouse （灯塔）使用
    金乌的博客
    03-14 9058
    — 一种工具Lighthouse 是一个开源的自动化工具，用来测试页面性能。—— 提升用户体验Web性能可以直接影响业务指标，例如转化率和用户满意度分析收集各种应用页面性能指标，并进行评估，以此我们可以根据评估结果进行针对性优化，不断提升用户体验—— 用法多样，根据需求进行选择目前官方提供了4种使用方式：Chrome 开发者工具（DevTools）Node CLIChrome 扩展。
    前端性能分析工具——Lighthouse
    DY_优快云的博客
    04-07 4970
    例如，FMP（First Meaningful Paint）的原始值是从页面初始化开始到主要内容渲染成功的耗时，根据真实站点的数据，顶级性能的站点的 FMP 值约为 1220ms，这个值会被映射成 Lighthouse 的 99 分。除了上述基准指标项之外，为了让 PWA 的体验更加完美，还有一些 Lighthouse 未实现检查的进阶指标，也就是可以作为示范性参考的 PWA 的指标，比如用户体验、缓存、推送通知等等。指的是所有的页面内容都已经成功加载，且能够快速地对用户的操作做出反应的时间点。
    谷歌性能测评工具lighthouse使用
    翛然树的博客
    05-06 1万+
    谷歌性能测评工具lighthouse使用 1、谷歌插件lighthouse的基本介绍 Lighthouse 是一个网站性能测评工具， 它是 Google Chrome 推出的一个开源自动化工具，能够对 PWA 和网页多方面的效果指标进行评测，并给出最佳实践的建议以帮助开发者改进网站的质量。它的使用方法也非常简单，我们只需要提供一个要测评的网址，它将针对此页面运行一系列的测试，然后生成一个有关页面性能的报告。通过报告我们就可以知道需要采取哪些措施来改进应用的性能和体验。 2、lighthouse使用
    移动端项目优化方案基于chrome中的lighthouse
    liuben118的博客
    12-15 2218
    背景 H5商城在使用过程中，发现首屏的加载速度比较慢，网络情况良好的情况下。在一些中等配置的手机上，页面加载比较卡顿，以下为对项目首屏问题调研，及相关优化点的整理。 技术方案 基于chrome中的lighthouse 问题调研 性能评测主要的用到的工具为，chrome中的lighthouse。在Performance面板中，分数为62分，略微偏低。 基于以上的报告截图基本可以看到主要的问题都在于LCP和FCP，经过查看报告，针对相关的功能进行了优化。 优化点 1、优化运营位图片 在报告中，发现有很多的图片没
    使用WebPageTest、Lighthouse和Chrome DevTools评估网站性能
    不想学习的打工人的博客
    12-27 2150
    进入网站首页WebPageTest ，选择Advanced Configuration进行个性化定制
    Lighthouse && DevTools
    weixin_44189802的博客
    06-12 150
    前端开发者在开发过程中更倾向于Chrome作为开发浏览器的原因有很多，主要原因大概集中在以下几点：Chrome的性能、开发工具、标准兼容性等。强大的。
    个人所遇的各种BUG，不用谢，多点赞收藏（禁止转载）
    weixin_45042569的博客
    04-17 6866
    bug终结者
    浏览器工作原理 39 [#] 加载阶段性能：使用 Lighthouse 来优化 Web 性能
    qq_44376306的博客
    07-04 858
    Lighthouse 是前端性能优化的强大工具，通过全面的分析和详细的优化建议，开发者可以发现网页性能问题并进行改进。
    Lighthouse如何使用
    最新发布
    11-29
    Lighthouse 可通过多种方式使用，不同方式有不同使用步骤： ### Chrome 浏览器插件 以 Chrome 插件形式使用 Lighthouse 时，其提供了更加友好的用户界面，方便读取报告。安装插件后，在 Chrome 浏览器中打开目标网页，点击插件图标即可开始测试，测试完成后会在浏览器中显示详细报告[^1]。 ### Chrome DevTools 该工具集成在最新版本的 Chrome 浏览器中，无需安装即可使用。打开 Chrome 浏览器，访问目标网页，右键点击页面，选择“检查”打开开发者工具，切换到“Lighthouse”面板，配置测试选项后点击“Generate report”按钮，即可生成性能报告[^1]。 ### Lighthouse CLI 命令行工具 方便将 Lighthouse 集成到持续集成系统中。需要先安装 Node 14 LTS（14.x）或更高版本，然后使用以下命令进行全局安装： ```bash npm install -g lighthouse ``` 安装完成后，可使用以下命令查看帮助信息： ```bash lighthouse --help ``` 使用示例，对百度进行测试并生成 HTML 报告： ```bash lighthouse https://www.baidu.com --output html --output-path ./report.html ``` 上述命令会在当前目录下生成一个名为 `report.html` 的文件，该文件详细展示了网页在各个维度的得分和性能指标[^1][^2]。 ### 编程的方式 能通过 Node.js 模块引入 Lighthouse 工具包，以编程的形式来使用它。以下是一个简单示例： ```javascript const lighthouse = require('lighthouse'); const chromeLauncher = require('chrome-launcher'); async function runLighthouse() { const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']}); const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port}; const runnerResult = await lighthouse('https://example.com', options); // `.report` is the HTML report as a string const reportHtml = runnerResult.report; console.log(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(); } runLighthouse(); ``` 上述代码通过编程方式调用 Lighthouse 对 `https://example.com` 进行性能测试，并输出 HTML 报告和性能得分[^1]。 ### 自定义审计规则 Lighthouse 最强大的地方在于可以自己写审计规则。以下是一个检查是否使用了过大的 GIF 图的自定义审计示例： ```javascript const { Audit } = require('lighthouse'); class NoLargeGifsAudit extends Audit { static get meta() { return { id: 'no-large-gifs', title: '避免使用大尺寸 GIF', failureTitle: '发现了大尺寸 GIF 图片', description: 'GIF 图片通常体积较大，建议使用视频或 WebP 格式替代', requiredArtifacts: ['ImageElements'] }; } static audit(artifacts) { const gifElements = artifacts.ImageElements .filter(img => img.src.endsWith('.gif') && img.naturalWidth > 500); return { score: Number(gifElements.length === 0), details: { items: gifElements.map(img => ({ src: img.src, size: `${img.naturalWidth}×${img.naturalHeight}` })) } }; } } ``` 将自定义审计规则集成到 Lighthouse 中，可实现更个性化的性能检测需求[^4]。
    评论
    成就一亿技术人!
    拼手气红包6.0元
    还能输入1000个字符
     
    红包 添加红包
    表情包 插入表情
    表情包 代码片
     条评论被折叠 查看
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值