暂无图片
暂无图片
暂无图片
暂无图片
暂无图片
首页 / 前端性能工具Lighthouse安装使用总结

前端性能工具Lighthouse安装使用总结

IT那活儿 2025-11-17
73
点击上方“IT那活儿”公众号--专注于企业全栈运维技术分享，不管IT什么活儿，干就完了！！！  

  
Lighthouse是谷歌的一款开源的前端性能分析工具。Lighthouse用于分析 Web 应用程序和网页，收集性能指标，帮助改进网络应用的质量，开发人员根据生成的评估结果，进行网站优化和完善，提高用户体验。

一

Lighthouse安装

Lighthouse集成在 Chrome 开发者工具-Lighthouse，可将其作为一个 Chrome扩展程序运行，也可以从命令行运行。本例集成在Chrome运行使用。
1.1 正常可以在Chrome的扩展程序中搜索并安装
Chrome--设置--扩展程序，搜索Lighthouse安装。
但chrome应用商店可能会连接不上，这种情况下需要下载离线安装包再安装。
1.2 下载离线安装包并安装到chrome
下载安装包后，Chrome--设置--扩展程序，开启开发者模式(不开启会安装失败)，将安装包拉倒chrome中即可自动安装，安装完成后，在我的扩展程序中有Lighthouse，如下图：
二

操作步骤

2.1 打开，安装完成后，F12打开开发者工具，能看到多了一个Lighthouse的标签页
2.2 设置，Lighthouse里面有三项生成Lighthouse报告的配置项
可以选择【模式】【设置】【类别】，如下图：
Navigation mode(导航模式)：
  • 作用：分析单个页面加载，模拟用户首次访问页面的完整加载过程。
  • 局限：无法分析表单提交或单页应用程序转换。
  • 侧重点：分析页面加载性能。
  • 核心指标：FCP, LCP, TBT。
  • 应用场景：电商页面加载。
Timespan mode(时间跨度模式)：
  • 作用：分析任意一段时间内用户在页面的操作，包括用户交互，如点击按钮、滚动页面等。
  • 局限：生成结果没有性能评分。
  • 侧重点：分析交互期间的性能问题(如输入延迟、布局抖动等)，关注用户操作期间的性能。
  • 核心指标：输入延迟、布局抖动、长任务。
  • 应用场景：在线编辑。
Snapshot mode(快照模式)：
  • 作用：分析页面当前状态的性能数据(不触发页面加载或用户操作)。
  • 局限：不提供性能整体评分或指标。
  • 侧重点：页面静态分析。
  • 核心指标：内存占用、DOM 节点数量。
  • 应用场景：后台管理系统。
2.3 分析，选择好模式、设备和类别
以导航模式为例，选择桌面设备，类比全选，如在当前页面访问https://www.baidu.com，页面加载完成后，点击右上角【分析网页加载情况】，Lighthouse会自动回放刚才的页面访问，并分析生产分析结果，如下图：
2.4 查看分析结果
生成的结果有多种查看模式，也可以保存为HTML或JSON格式，如下图：

三

结果分析

导航模式生成的测试结果分为4项，分别为Performance(性能指标)，Accessibility(可访问性)，Best Practice(最佳实践)，SEO(搜索引擎优化)，并分别对这四项进行综合评分。
3.1 Performance(性能指标)
Performance中分为3部分，metrics(指标)、view treemap(树状图视图)、Diagnostics(诊断)。
  • metrics
    性能指标，页面主要性能指标的耗时；
  • view treemap
    树状图视图是一个可视化工具，可以直观的展示出页面加载过程中的各个请求资源大小及占比，帮助开发者快速识别哪些资源占用了最多的带宽、加载时间或可能成为性能瓶颈。
  • Diagnostics
    指出资源加载、渲染、代码执行等环节的问题及影响，并针对问题提出优化建议。
Metrics中的性能指标：
  • First Contentful Paint(FCP)
    首次内容绘制，统计的是从进入页面到首次有 DOM 内容绘制所用的时间，这里的 DOM 内容指的是文本、图片、非空的 canvas 或者 SVG。和白屏问题相关的指标。
  • Largest Contentful Paint(LCP)
    最大内容绘制，统计的是从页面开始加载到最大可见元素（如图片、视频、大段文本块）加载完成的时间，关注的是最大内容元素的呈现时间，反映用户感知的页面主要内容加载速度。
  • Time to Interactive (TTI)
    可交互时间，页面完全可交互的时间（主线程空闲且所有关键资源已加载）。
  • Total Blocking Time(TBT)
    总阻塞时间，指在页面加载过程中，用户输入或交互受到阻塞的总时间，即FCP 到 TTI 之间主线程被长任务（>50ms）阻塞的总时间。衡量了在加载过程中由于JavaScript执行和主线程忙碌而导致用户输入延迟的总时间，用于评估页面加载过程中的交互性能。
  • Cumulative Layout Shift(CLS)
    累积布局偏移，页面生命周期内所有意外布局偏移的累计分数，通过比较单个元素在帧与帧之间的位置偏移来计算，偏移越小越好，反映页面的视觉稳定性。
  • Speed Index
    速度指数，衡量页面内容在加载过程中的视觉填充速度（数值越低越好），Lighthouse 会在页面加载过程中捕获视频，并通过 speedline 计算帧与帧之间视觉变化的进度。
图1：四个评分项
图2：性能指标
3.2 Accessibility(可访问性)
  • 无障碍设计，评估网页是否符合无障碍标准，确保所有用户（包括残障人士）能够正常访问和使用页面内容。
  • 所有用户(包括视觉障碍、听觉障碍、运动障碍等用户)能通过屏幕阅读器、键盘导航等辅助技术正常使用网页。
  • 满足法律要求和行业标准。
  • 提升整体交互友好性，例如清晰的焦点状态、可读的文本对比度等。
3.3 Best Practice(最佳实践)
  • 评估的是网页是否符合现代 Web 开发的最佳实践标准，涵盖安全性、性能优化、代码质量、用户体验等多个维度。
    如：防止安全漏洞，使用https，避免使用过时或废弃的技术，确保资源加载和代码执行的高效性，提升用户隐私保护和交互友好性等。
  • 重点关注 安全性、兼容性、资源优化。
3.4 SEO(搜索引擎优化)
  • 评估网页是否符合搜索引擎优化的最佳实践，帮助提升网站在搜索引擎结果页（SERP）中的排名和可见性。
  • 提升可索引性：确保搜索引擎爬虫能正确抓取和理解页面内容。
  • 增强内容相关性：优化页面结构与元数据，使搜索引擎准确识别页面主题。
  • 改善用户体验：通过移动友好性、加载速度等间接提升 SEO 效果。
  • 重点关注 元数据、移动友好性、结构化数据、链接可用性 等直接影响爬虫理解和排名的因素。

END


本文作者：杜俊芝(上海新炬中北团队）

本文来源：“IT那活儿”公众号

文章转载自IT那活儿，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

评论