网站性能测试

这里我选择了谷歌亲儿子"灯塔"(LightHouse)进行性能体检.
FCP (First Contentful Paint)

79ac911f8f411496f3990a8ce477bf74.png

渲染第一个元素(文本、图片、canvas...)的时间点

SI (Speed Index)

首屏展现时间

LCP (Largest Contentful Paint)

渲染可视区域内最大内容元素的时间点

TTI (Time to Interactive)

页面资源加载成功并能响应用户交互的时间点

TBT (Total Blocking Time)

FCP到TTI之间,主线程被long task(超过50ms)阻塞的时间之和

CLS (Cumulative Layout Shift)

累计布局偏移值

FID (First Input Delay)

用户第一次在页面进行交互(点击链接、按钮、自定义js事件),到浏览器实际开始处理这个事件的时间

安装

1.命令行工具

Node CLI在配置和报告Lighthouse运行情况方面提供了最大的灵活性。如果用户需要更多的高级功能，或者想自动运行Lighthouse，可以使用Node CLI。安装 Lighthouse 作为一个全局节点模块。

npm install -g lighthouse
or use yarn:
yarn global add lighthouse

例子：针对一个页面运行 Lighthouse 审查。
lighthouse https://www.example.com --view

传递 --help 标志以查看可用的输入和输出选项。
lighthouse --help

2.谷歌浏览器LightHouse

打开最新版本Google Chrome，F12一下弹出开发者页面，在顶部的导航栏选项选择Lighthouse选项（旧版本的浏览器是需要从应用商店下载Lighthouse插件的）

• 基本信息

参考文章
[1] Lighthouse performance scoring: https://web.dev/performance-scoring/

[2] GoogleChrome-lighthouse: https://github.com/GoogleChrome/lighthouse

[3] What's New in Lighthouse 6.0: https://web.dev/lighthouse-whats-new-6.0/

[4] Measure: https://web.dev/measure/

[5] How does Lighthouse work?: https://github.com/GoogleChrome/lighthouse/blob/master/docs/architecture.md

[6] Largest Contentful Paint (LCP): https://web.dev/lcp/

[7] Total Blocking Time (TBT): https://web.dev/tbt/

[8] Cumulative Layout Shift (CLS): https://web.dev/cls/

[9] First Contentful Paint (FCP): https://web.dev/fcp/

[10] Speed Index: https://web.dev/speed-index/