站点头像

Erythritol's World

我们曾生活在这世界上,但谁记得呢?

谷歌Lighthouse工具使用方法

2021年7月21日 由 Erythritol

Lighthouse是谷歌浏览器以及某些谷歌内核浏览器(如Microsoft Edge)新增的一个功能,可全方位评测某一网页的渲染性能、用户体验、SEO情况等。

使用Lighthouse前需要安装最新的谷歌浏览器或Microsoft Edge。打开该浏览器,首先访问想要评测的页面,然后按Ctrl+Shift+I或F12调出开发者工具:

开发者工具

切换至最右侧的Lighthouse选项卡,在Device区域选择设备类型,接着点击Generate report开始评测:

开始评测

等待评测完成即可,需要几秒至十几秒不等的时间,如果前四项都是100分则会有浮夸的烟花动画:

评测报告

Lighthouse的部分评测项目与谷歌的PageSpeed Insights相同,可详细展示页面加载用时和渲染过程:

渲染过程

页面最下方提供了针对移动设备的优化建议(PWA优化),它们有助于改善用户体验:

其他建议

总而言之,Lighthouse是一款优秀的页面性能评测工具,相比PageSpeed Insights,它的使用情景更加广泛,提供的建议也更多,对于个人站点的优化十分实用。