站点头像

Citrino's Cafe

少女祈祷中……

谷歌 Lighthouse 工具使用方法

2021年7月21日 由 Citrino

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

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

开发者工具

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

开始评测

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

评测报告

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

渲染过程

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

其他建议

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