网页性能检测工具 - lighthouse

lighthouse是Chrome自带的网页性能检测工具,优化网站速度提升用户体验,应先检测影响网页性能的因素,有针对性的优化。

chrome pwa lighthouse

Chrome不只是浏览器,还是一款网站优化工具,能随时检测网站页面的性能并给出建议。

性能检测

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。若能把前面所提到的几项,做适当的优化,就能够达到很好的效果。