网页性能检测工具 - Lighthouse

Lighthouse是chrome浏览器自带的网页性能检测工具,检测网页性能给出网站优化建议。

chrome pwa lighthouse

性能检测

Chrome浏览器打开需要优化的网站页面,按下功能键F12,开启chrome开发者工具栏。

若功能键不管用,在网页的非图片位置点右键选择[检查]。

website Performance tool

在chrome开发者工具栏之后,找到Audits页签,可能隐藏在“ >>“  更多按钮后面。如上图所示。

注:使用chrome开发者工具检测网站性能时,建议使用隐身模式,快捷键:Ctrl+Shift+N。

检测参数

设备(Device):手机(Mobile)、PC(Desktop)二选一

检测项(Audits):Performance、Progressive Web App、Best practices、Accessibility、SEO

节流(Throttling):Simulated Fast 3G,4x CPU Slowdown、Applied Fast 3G,4x CPU Slowdown、No throttling

清除存储(Clear storage):清除存储,该选项会在每次检测前清除与页面关联的缓存。

点击[Run audits]运行检测。大概需要10~30秒给出网站性能报告。

page Performance

性能报告

page Performance

整体得分/Performance

报告的第一部分是网站的整体得分,分数越高网站性能越好。

该指标是网站性能的定量检测结果,每个指标都是对页面某一方面性能的解读。

First Contentful Paint表示首次将内容绘制到屏幕上的时间点,是用户感知页面加载的重要里程碑。

Time To Interactive表示页面准备就绪能处理用户交互的时间点。

Speed Index表示页面渲染速度。

解决方案

将鼠标悬停在某个指标上能够看到概述,点击了解详情(Learn more)查看到相关的解决方案。

渲染过程/View Trace

整体性能指标下方有一组网站页面截图,表示网站加载过程中的网页渲染过程。

优化项/Opportunities

此处列出的选项都能通过简单操作就能达到优化效果。如:启用压缩(gzip)、修改js、css加载方式(异步、同步)。点击Opportunities项了解更多优化项。

诊断/Diagnostics

”诊断”部分提供了有关影响页面加载速度的详细因素。

审核通过/Passed Audits

审核通过部分显示了该网站哪些方面做对了。

其他优化项

Chrome开发者工具给出了很多优化项,并非每项都需要优化,如:PWA Optimized、Accessibility、Progressive Web App。将前面所提到的几项适当优化,就能够达到很好的效果。