使用WebPageTest、Lighthouse和Chrome DevTools评估网站性能
目录
一:使用WebPageTest评估网站性能
二:使用Lighthouse分析性能
1、本地npm安装Lighthouse
2、Chrome DevTools中使用
三:使用Chrome DevTools分析性能
一:使用WebPageTest评估网站性能
进入网站首页WebPageTest - Website Performance and Optimization Test,选择Advanced Configuration进行个性化定制
测试结果:
其中,First Byte表示发出的第一个请求得到的响应所需要的时间;Start Render表示开始渲染的时间;并且此时还需要注意Speed Index的时间
然后我们点进First View中的waterfall查看
其中,黄色的部分是重定向查找,也是我们后面可以去优化的部分。最下面Long Tasks中红色的表示用户无法进行交互(即阻塞)的部分。
二:使用Lighthouse分析性能
Lighthouse好处在于除了会生成性能报告以外,还有给出针对性的建议
关于Lighthouse的使用,常见的主要有两种方式:
1、本地npm安装Lighthouse
首先进行下全局安装
npm install -g lighthouse
使用非常简单,直接命令行 lighthouse + 测试网址
就可以,在这里我们以bilibilli主页为例
lighthouse http://www.bilibili.com
它会自动开启一个chrome窗口进行测试(默认命令是Mobile端),等待片刻,然后我们将结果中的html文件地址拷贝至浏览器打开
打开后即可看到我们所关心的报告
其中,Opportunity表示所给出的建议
2、Chrome DevTools中使用
打开谷歌浏览器,在想测试的网站页面打开开发者工具
根据需要选择合适的选项就可以开始测试了
三:使用Chrome DevTools分析性能
在Network选项卡里每个资源都有一些属性:资源名称、大小、总耗时
其中,在size这一栏,第一个1.4M代表网络传输资源时的大小,第二个1.4M代表实际资源的大小
这样,我们通过修改代码server.js文件中,添加如下代码就可以实现资源的压缩
const compression = require('compression');
app.use(compression());
压缩完之后,实际大小虽然是 1.4M,但网络传输时只有 429K,大大减少了网络传输资源的大小
另外在network选项卡也可以自定义设置网络状态
另一个在Performance选项卡里,点击实心圆开始记录,在这个过程中页面发生的一切包括你的交互,都会被记录下来,直到你点击停止之后,这段过程中发生的一切都会出一个详细的性能报告;还有一种方式是点击刷新按钮,就会刷新我们的页面,记录页面从开始刷新一直到整个所有资源加载完成这个过程所发生的一切,然后进行性能分析
- Main 主线程,可以看到随着时间推移,主线程都做了哪些任务。它是自上而下类似堆栈结构,每个调用关系都清晰表示出了,比如我们做个 Task,Task 里面会有一些相关的调用,一层层把我们的调用关系都列出来,一直到最后
- Timings 关键事件节点,DCL 就是 DOM 加载完成时间,它发生之前都做了什么
使用WebPageTest、Lighthouse和Chrome DevTools评估网站性能相关推荐
- 评估网站性能的专业术语
[写在前面] 对于运维的人来说,如何去架构服务器,如何让服务器能够将作用发挥到极致是比较重要的.那么想要去评估服务器好坏,得知道点儿专业术语不是~ 这篇文章就来讲讲评估网站性能的专业术语,对服务器的架 ...
- 怎样用谷歌浏览器测试软件性能,chrome插件:网站性能检测工具lighthouse
chrome浏览器扩展程序lighthouse可以检测网页的质量,分别针对网页的Performance.Accessibility.Best Practices.SEO进行检测评分,并给出相应的优化建 ...
- 【chrome devtools】前端性能分析之chrome devtools的使用 前端项目内存性能优化的建议 前端浏览器崩溃卡死 前端性能分析实战
最近有个项目,静置一段时间,chrome内存一直上涨.就像是这样: 内存会慢慢悄悄的往上涨,最终可以到达2000多M,直至浏览器崩溃卡死.很明显,这应该是内存泄漏了. 但是只知道内存泄漏,并不知道究竟 ...
- lighthouse使用_如何使用Lighthouse分析网站性能
lighthouse使用 by Adam Henson 亚当·汉森(Adam Henson) 如何使用Lighthouse分析网站性能 (How to analyze website performa ...
- Hexo站点建设之——基于Lighthouse查看网站性能
一 概述 查看网站相关信息常用的网站有: 站长之家-ping:ping检测,国内测速,国际测速,网站速度对比等 PageSpeed Insights:网站在移动设备和桌面设备的网页响应速度(墙) 爱测 ...
- Chrome DevTools
2019独角兽企业重金招聘Python工程师标准>>> Chrome DevTools Protocol Chrome开发者工具中文文档 Chrome DevTools Protoc ...
- 网站性能工具Yslow的使用方法
Yslow是雅虎开发的基于网页性能分析浏览器插件,从年初我使用了YSlow后,改变了博客模板大量冗余代码,不仅提升了网页的打开速度,这款插件还帮助我分析了不少其他网站的代码,之前我还特意写了提高网站速 ...
- web:网站性能工具Yslow
2019独角兽企业重金招聘Python工程师标准>>> Yslow是雅虎开发的基于网页性能分析浏览器插件,从年初我使用了YSlow后,改变了博客模板大量冗余代码,不仅提升了网页的打开 ...
- Chrome Devtools 高级调试指南
From ( Chrome Devtools 高级调试指南 ):https://juejin.cn/post/6844903961472974855 chrome devtools 设置黑色主题:ht ...
最新文章
- RxJava debounce()和throttleWithTimeout()
- matlab中添加0向量,如何把在matlab中把a=0:0.1:pi变成列向量啊?
- cocos2d-x-3.2 lua命名空间前缀
- matlab实战系列之人工鱼群算法求解TSP问题原理解析(下篇源码解析)
- 3.1.6 基本分页存储管理的基本概念
- 批处理——服务器的web文件备份
- mailcore -- Mail port
- 使用Spring Boot和React进行Bootiful开发
- python编辑器_资深程序员:学Python我推荐你用这几款编辑器
- c语言输入一个字符 对其进行归类,计算机二级C语言改错题归类 - 图文
- Python_命名空间和作用域_25
- 关于python中的pow(1010、32)_关于Python中的??pow(1010,32),下列说法正确的是.
- jxta java_JXTA-JavaP2P JXT
- 程序员996与工地施工人员谁更累?
- 阿里云大数据ACP认证学习笔记
- 王峰五小时对话冯波:如果今天没有区块链,你会做什么?
- JPush+SAE+J2EE实现微信公众平台账号服务
- clicktorun 离线_Project 2016 和 Visio 2016 的 Office Click-to-Run 永久(C2R P)版本
- Python基础(二) 基本数据类型①:整数型、布尔型、字符串
- 随笔 - 58, 文章 - 0, 评论 - 0, 引用 - 0 三次握手 四次握手 与socket函数的关系
热门文章
- TCP/IP Illustrated Episode 2
- 计算机统考第五次作业操作题,计算机基础第5次作业 第五章 Powerpoint知识题(精选).docx...
- Simotion应用与组网之三 外部传感
- 推荐:远程主机探测技术FAQ集 - 扫描篇 - 黑鹰安全网新闻中心
- 解决 Android APP 启动页白屏问题及如何实现全屏显示
- 你所不知道的华为快服务野心
- python实现分数的加减乘除
- java jsp 日历_一个用JSP做的日历
- plsql登录提示空白_Steam吃鸡游戏账号安全提示
- easyui的iconCls无法显示