网站页面性能优化检测工具

优化网站速度提升用户体验,页面优化是网站优化必不可少的一部分,优化网页首先要检测影响网页性能的方面,有针对性的做优化方案。

chrome pwa lighthouse

今天介绍一款网站页面优化工具,可以说在网站页面优化方面没有比它更有发言权了,因为它就是当下最流行的浏览器Chrome。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项了解有关它的更多信息(Learn more),从而对这些项进行优化。

诊断(Diagnostics)

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

审核通过(Passed Audits)

顺利审核通过的部分,显示了该网站哪些方面做对了。可以点击展开进行查看。

其他优化项

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