Web端性能测试工具-【sitespeed】使用手册

原创于 2024-12-12 16:52:09 发布

· 1.7k 阅读

15 ·

版权

文章标签：

#测试工具

web前端性能测试专栏收录该内容

1 篇文章

订阅专栏

sitespeed能干什么

Sitespeed是一组开源工具，可以轻松监控和衡量您网站的性能

Browsertime - 使用来自 Chrome/Firefox 的 JavaScript/video/HAR 收集指标。
Chrome-HAR - 根据来自 Chrome 调试协议的事件创建 Chrome HAR 文件。
Coach- 从Coach那里获得帮助，您可以如何使您的网页更快。
Compare-相互比较两个 HAR 文件并找到差异。
Humble - Raspberry Pi WiFi 网络链接调节器.
PageXray - 将 HAR 文件转换为更可用的格式。
sitespeed.io - 持续监控您的网站性能（包括 Coach、Browsertime、PageXray 和其他）。
Throttle - 在 Linux 和 Mac OS X 上模拟慢速网络连接。

我们目前主要用sitespeed.io来获取我们各产品主要页面前端的性能；

Web性能指标
常用Web性能指标项及指标含义：
在这里插入图片描述
Web性能测试选用指标项和指标值

sitespeed安装
安装所需：docker，sitespeed-io,graphiteapp
docker离线部署
https://blog.youkuaiyun.com/qq_41878378/article/details/144368757?spm=1001.2014.3001.5501

安装sitespee-io

docker pull sitespeedio/sitespeed.io:25.7.3

安装Graphite Docker镜像并运行

docker pull graphiteapp/graphite-statsd
docker run -d \
--name graphite \
--restart=always \
-p 80:80 \
-p 2003-2004:2003-2004 \
-p 2023-2024:2023-2024 \
-p 8125:8125/udp \
-p 8126:8126 \
-v /data/graphite/data:/opt/graphite/storage \
-v /data/graphite/conf:/opt/graphite/conf \
-v /data/graphite/statsd_config:/opt/statsd/config \
-v /data/graphite/logs:/var/log \
-e GRAPHITE_TIME_ZONE='Africa/Nairobi' \
graphiteapp/graphite-statsd

创建burls.txt文件，内置需要性能测试的url
[图片]

测试执行：

sitespeedio/sitespeed.io:25.7.3需要与安装的sitespeedio版本一致
graphite.host：需要与部署graphiteapp的机器ip一致
-r 测试环境cookie
slug 生成文件夹名称

docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io:25.7.3   --graphite.host=10.0.14.220  burls.txt  -r 'Cookie:csrftoken=OtiUGtD23lh2XVuwAUCBSfsLt6y4Dowd; wgcloud-server=A5CC69860ED555A28B066C16D620C8ED' -d 2 -n 5 --slug test115 --graphite.addSlugToKey true &

测试结果
测试可用场景：***
测试结果：
https://download.youkuaiyun.com/download/qq_41878378/90121555
测试目标：
前端性能
在这里插入图片描述

测试结果：
Largest Contentful Paint (LCP) ：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5 秒内发生。
First Input Delay (FID) ：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为100 毫秒或更短。
Cumulative Layout Shift (CLS) ：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1. 或更少。
在这里插入图片描述