介绍Google LightHouse

2020-03-06

引言

GoogleChrome/lighthouse是一款开源的网页性能审计工具,能够非常全面而精确地分析网站的打开性能,SEO分数,可访问性,最佳实践检验和渐进式得分.

Google Chrome的集成

LightHouse业已经集成到了Google Chrome浏览器的开发者工具中,打开Chrome浏览器的开发者工具后,点击开发者工具标签栏的Audit标签即可在Chrome上运行LightHouse.

Google Chrome 开发者工具中的Audit功能就是LightHouse

下面以我的网站为例,试运行Chrome上的LightHouse,翻到页面下方,点击Run Audit按键即可开始审计,很快就可以完成,首先会显示各方面性能的得分,重复多测几次可以使得分逐步上升而收敛到一个稳定的值:

Chrome 审计得分

点击右边的按钮可以显示出更加详细的信息,其中包括了改进建议和每一项指标的实际意义:

切换到详细显示

看完Metrics各项指标的介绍后,我们可以单击trace按钮,进入Performance页面,得到页面加载的详细过程记录:

性能页面显示加载的详细过程

其中Summary显示的是在给定时间范围内,浏览器内核用在各方面的时间.

Bottom-Up按照加载任务的消耗时间降序排列

Bottom-Up按照各项任务消耗浏览器内核的时间从大到小降序排序.

Call Tree把各项任务按照从属以树形方式显示

Call Tree把各项任务按照从属以树形的方式显示,点击小三角形按钮可以展开子树,查看每项任务的子任务的时间消耗.

Event Log打印出按照时间排序的事件

Event Log打印出按照时间排序的事件,分别有时间开始时间,消耗时间和总消耗时间,可以看到在867.8ms本站的首页就已经产生了DOMContentLoaded事件,加载起来还是比较快的.

图表栏

图标栏能够以一种直观的方式显示页面的加载过程,其中Frames显示的是用户视图中的每一帧,拖动上方的时间范围窗口,可以看到不同时间截止时用户所看到的内容.

任务图示

点击Main左边的小三角形按钮可以看到任务在时间上的分布,图中可以看到在选定的时段,是有4个任务同时进行的,分别是系统任务,解析HTML,对脚本求值和编译脚本,分别点击每一项任务,在Summary栏中都会有相应的更新.

资源下载时间图示

对网页性能影响最大的其实是资源的加载而非页面的渲染,点击Network左边的小三角形展开资源加载的时间分布,拖动时间窗口右边的手柄,能够看到更大范围内资源的下载情况,图中我们看到首先HTML网页被加载,然后是core.min.js,favicon.png,cloudflare-rocket-loader.mi,之后是Mathjax.js,当然,后面的这些资源的下载是异步的,HTML主页面下载完成后就立刻开始并很快完成渲染了.

再次点击DevTools的Audit标签回到LightHouse.

性能提升建议

向下翻页,点击字体左边的灰色图标,可以看到建议的摘要,点击Learn more按钮可以得到详细的建议,

可访问性

虽然是给出了两个红色的建议,但可访问性仍然取得了较高的分数.

详细建议

点击Learn more按钮跳转到建议的详细内容,可以看到还是比较严重的.

感谢

关于LightHouse在Chrome浏览器中的使用,就介绍到这,这次审计让我们得到了很多信息,也感谢LightHouse的开发者.另外LightHouse也支持命令行方式地调用,具体用法可以看LightHouse的GitHub页面,提示,如果能通过命令行的方式调用,那么可以以编程的方式分别审计网站的每一个页面(通过提取sitemap.xml得到每一个页面的URL),进而得到一个网站总体上的更加全面更加综合的审计信息.

工具benchmarkingwebmaster

移除Hugo自动生成sitemap.xml中的无关链接

JSON.stringify中replacer参数的简单介绍