好用的前端页面性能检测工具—sitespeed.io

引言

最近在做HTTP2技术相关调研,想确认一下HTTP2在什么情境下性能会比HTTP1.x有显著提升,当我把http2的本地环境(nginx+PHP)部署完成后进行相关测试时,我遇到了以下问题:

(1)平时使用的都是在线分析工具,如google的PageSpeed InsightsGTmetrix,这些工具无法提供线下测试环境;

(2)自己通过chrome dev-tool的Perfomance进行分析,需要手动刷新,并手动记录,需要大量的重复工作,尤其是要控制变量测试的情况;

(3)通过代码打log,即通过performance.timing中记录的TimeEvent时刻计算页面性能指标,指标的完整性和图形化展示仍需要工作量;

(4)能否在真机上测试,现在都是在PC上模拟。

于是就想着能否有一个工具能够调起浏览器,利用浏览器debug面板中的各种数据(请求、事件等)为用户提供页面性能分析结果,最好能图形化或表格展示。检索了一下,发现了sitespeed.io这个开源工具,基本符合我的预期,这里跟大伙分享一下这个工具。 

 sitespeed.io相关介绍

sitespeed.io的产出

介绍sitespeed.io之前,先看看sitespeed.io的产出。

安装sitespeed.io之后,如果要分析一下百度PC首页性能,执行以下命令:

sitespeed.io  -n 5 -v https://www.baidu.com

该命令将会在chrome浏览器下调起URL为https://www.baidu.com 5次,产出了一个分析文件夹,文件夹下载请戳这里

打开index.html文件后,我们可以看到关于页面性能的相关总结。

页面性能总结

页面相关意见

我们可以看到该工具围绕:页面性能(Performance)、Web最佳实践(Web Best Practice)和可用性(Accessibility)三个核心指标进行打分,每个核心指标考核的内容可以在help.html文件中查找。页面中的其他指标,如文件压缩、文件大小、请求数、缓存时间、请求状态码、首次渲染时间、前端渲染用时、页面加载用时、DNS解析时长等,这些指标都有详细的统计,而且不同等级用相应的颜色表示,基本满足我的诉求。

sitespeed.io的工作原理

sitespeed.io是一个开源工具,旨在检测和提高web页面的性能。它拥有一套插件,如CoachBroswertimeChrome-HAR等,帮助sitespeed搜集浏览器debug状态下的数据,并基于网站最佳实践给出相应的打分和意见,最后把数据可视化展示。

sitespeed.io评价网页的主要依据是:浏览器的网络请求和TimeLine中的Time Event。

Browsertime插件会使用Selenium NodeJS操控浏览器,让浏览器加载指定的页面,并执行配置的JS代码,采集Timeline中各个Time Event触发的时间数据,同时借助Chrome-HAR插件把页面中HTTP请求过程存储在.har文件中,为了便于分析,sitespeed.io利用PageXray插件将.har文件转换成JSON文件;然后Coach插件根据相应的指标进行打分,并提出改进意见。总的来说,sitespeed.io的工作原理如下图所示。

sitespeed.io工作原理图

由于接触sitespeed.io的时间比较短,目前积累比较少,这次仅做个简单的分享,希望更多前端的小伙伴能够接触并使用该工具,写出高性能的页面。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏顶级程序员

微软发布 Windows 命令行参考文档,涵盖超 250 项控制台命令

长久以来,许多人一直对各个版本的 Windows 控制台命令行不是很了解,更别提如何去使用了。显然,这件事主要归咎于文档的缺乏。

12830
来自专栏编程之路

快速搭建自己的直播服务器,完成属于你直播服务

这里我们选用开源srs流媒体服务器https://github.com/ossrs/srs,有兴趣的同学也可选用Adobe Media Server 5,原理都...

3.1K30
来自专栏*坤的Blog

IntelliJ Idea 免费激活方法

5K30
来自专栏程序员互动联盟

【专业技术第四讲】如何检测浏览器的快慢?

现在做浏览器的大概有下面几个方向吧 1. 从事浏览器外壳的工作,开发基于浏览器的各种应用和扩展; 2. 做浏览器内核优化的,大概又分为几个部分: a. 渲染模块...

353120
来自专栏沈唁志

PHP程序猿必知:PHP网站应该怎么做优化

49440
来自专栏CSDN技术头条

1小时入门 Python 爬虫

前言 随着网络技术的发展,数据越来越变的值钱,诸多公司都在探究如何获取更多更有用的数据。万维网是大量信息的载体,如何有效提取这些有效且公开的数据并利用这些信息变...

44150
来自专栏知晓程序

昨晚的小程序新能力,我们早就曝光过了……¯\\_(ツ)_/¯

话又说回来,微信昨晚确实还发布了另一个真 · 新能力——将小程序成员管理功能进行了大幅升级,解决了小程序成员权限逻辑混乱的问题。

7620
来自专栏腾讯移动品质中心TMQ的专栏

抽丝剥茧定位Windows客户端CPU占用问题

摘要 本文主要展示了从电脑管家CPU占用过高问题发现到解决的全过程。包括分析问题的思路、解决问题的方法、压力测试的设计、优化前后数据对比等。同时,在末尾分享了自...

32950
来自专栏即时通讯技术

了解iOS消息推送一文就够:史上最全iOS Push技术详解

1)在线Push:比如QQ、微信等IM界面处于前台时,聊天消息和指令都会通过IM自建的网络长连接通道推送过来,这种Push在本文中暂且称为“在线Push”;

46830
来自专栏程序源代码

互联网云快速开发框架

--我的信息 --我的通告 --文件 2、会员 --用户中心 --用户地图 --积分活动平台 --极光推送 3、营销 --营销活动 --活动汇 --现场活动平台...

24310

扫码关注云+社区

领取腾讯云代金券