网页性能分析工具 PageSpeed Insights 和 Lighthouse 的使用教程。
最编程
2024-04-07 09:40:06
...
web性能分析工具 PageSpeed Insights 和 Lighthouse 使用教程
背景:
如何使用工具来一键生成性能报告,并且给出解决方案?
-
公网:PageSpeed Insights
-
本地或内网(比如localhost,或公司内局域网):打开 chorme控制台 -- tab切到 Lighthouse -- 点击生成报告
使用简介:
公网:以下以分析掘金网为案例
PageSpeed Insights
内网:打开 chorme控制台 -- tab切到 Lighthouse -- 点击生成报告
内网的Lighthouse工具同 公网的 PageSpeed Insights 内容是一样。但是是英文版,需要翻译的话:可以导出成HTML,在浏览器打开,在用页面翻译工具翻译
性能指标介绍
- FCP(First Contentful Paint):首次内容渲染
- from -- 用户开始输入url(开始导航) to -- 页面出现东西(浏览器渲染第一段DOM。图片、非白色的 < canvas > 元素和 svg 被认为是 DOM 内容,iframe中的任何内容不包含在内)
- TTI(Time to Interactive):首次可操作(比如可点击可滚动)
- from -- 用户开始输入url(开始导航) to -- 可操作(比如可点击可滚动)
- SI(Speed Index):速度指数
- shows how quickly the contents of a page are visibly populated.
- 显示页面内容(全部内容渲染完成)的速度有多快
- TBT(Total Blocking Time):总阻塞时间
- 在FCP和TTI之间,所有超过50ms的long task的超过时间之和
- TBT = (T(long task 1) - 50ms) + (T(long task 2) - 50ms) + (T(long task 3) - 50ms) + .... ---「假设3个long task的执行时间都超过50ms」
- long task 是 JavaScript 代码, 可以让主线程保持忙碌,延迟用户交互,‘冻结’UI
- 为什么是50ms?RAIL模型建议
- LCP(Largest Contentful Paint):当前页面上”最大的内容“渲染时间
-
概念诞生的原因:有时候越简单越好。基于 W3C Web 性能工作组的讨论和 Google 的研究,发现一个更准确的测量页面主要内容何时被加载的方法是 查看最大的元素何时被渲染
- 范围:可视区内。具体如何查找最大元素,同上链接
-
概念诞生的原因:有时候越简单越好。基于 W3C Web 性能工作组的讨论和 Google 的研究,发现一个更准确的测量页面主要内容何时被加载的方法是 查看最大的元素何时被渲染
- CLS(Cumulative Layout Shift):累积布局移位
- 可视区内,累积 布局移动的位置
- 意思是 元素的偏移量,比如最开始a元素渲染出现在(1,1)的位置,结果1秒后变成了(7,7)的位值。有可能造成用户的误触
总结:
-
想尽快看到东西(参考FCP)
-
想尽快看全东西(参考SI,LCP)
-
想尽快能操作(参考TTI,TBT)
-
页面元素布局最好不要移位(参考CLS)
另外
如果要测试海外的,可以用:WebPagetest
码字不易,点赞鼓励
性能优化合集快速入口:
-
如何制定前端资源的最佳缓存策略?
- 浏览器缓存的起点 -> Cache-Control
- 浏览器缓存机制(结合响应头)
-
和
- 浏览器多进程架构简介
-
理解web性能概念以及常用分析工具
- web性能分析工具 PageSpeed Insights 和 Lighthouse 使用教程
-
web性能-白屏时间详解以及优化
- web性能-HTML和CSS优化
- web性能-图片优化
- web性能-字体优化
- web性能-js优化
- web性能-优化dom操作(重排 重绘)
- TCP传输基本原理简述及优化
-
web性能-CDN架构介绍和优化
- webpack工程项目中配置第三方库的CDN,并做CDN容错
- 真实用户的前端性能监控