利用Docker安装Web前端性能测试工具Sitespeed.io

目录结构

一、Sitespeed.io概述
    1.Sitespeed.io简介
    2.Sitespeed.io使用场景
二、Sitespeed.io的安装和使用
    1.安装Sitespeed.io
    2.连接Docker,驱动浏览器进行Web性能测试
        1)连接Docker
        2)驱动浏览器进行测试
        3)测试报告查看
三、Sitespeed.io测试原理描述

一、Sitespeed.io概述

1.Sitespeed.io简介

Sitespeed.io:是一款开源的Web性能测试工具,用来衡量Web网站的综合性能,帮助开发和测试人员分析网页的加载速度和渲染性能。 Sitespeed.io通过驱动浏览器(如:Chrome、Firefox)进行测试,然后从开发者的站点收集多个页面的数据,并根据最佳实践等规则来分析这些网页,然后将结果以HTML报告的形式输出。

Sitespeed.io满足了一个完整的Web性能测试工具所需的3个关键功能: 1)使用真实的浏览器测试Web站点,模拟真实的用户进行请求连接,收集以用户为中心的重要指标,如:响应速度指标、第一视觉呈现 2)可分析页面的组成,并给出相应性能反馈,增加终端用户的使用体验友好性 3)通过收集和保存页面组成的数据,便于跟踪定位

2.Sitespeed.io使用场景

1)运行于持续集成环境中,将代码提交or迁入到测试环境时,及早发现Web性能问题,便于提早进行回归检查 2)监控生产环境(正式环境)中的Web性能表现,发现异常及早提醒回归

二、Sitespeed.io的安装和使用

官网-传送门:https://www.sitespeed.io/

1.安装Sitespeed.io

Docker安装完成后,通过以下命令可下载安装Sitespeed.io所需的组件,如下:

docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/

Pull 完成

2.连接Docker,驱动浏览器进行Web性能测试

1)连接Docker 通过Xshell远程连接,or通过命令docker-machine ssh default连接进入Docker容器

docker-machine ssh default 命令连接

Xshell连接

2)驱动浏览器进行测试 被测URL=https://www.baidu.com 操作命令:

docker run --shm-size=1g --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.baidu.com

备注说明: 1)Sitespeed.io通过工具集(sitespeed.io,Browsertime,Coach,VisualMetrics)中的各个组件协作完成Web性能测试 2)Sitespeed.io测试过程中默认会迭代3次,一定程度上可以增加分析的可靠性 3)本次驱动测试的浏览器默认是:Chrome 70.x 4)测试完成之后,所生成的HTML报告,存放路径为:/home/docker/sitespeed-result/之下

利用WinSCP连接Docker虚拟机之后,即可在以上输出的指定目录下查看到本次Web性能测试生成的测试报告 报告的详细路径:/home/docker/sitespeed-result/www.baidu.com/2018-11-10-10-51-06

3)测试报告查看 综合评分、性能数据展示:

性能优化建议:

页面概要信息描述:

三、Sitespeed.io测试原理描述

Sitespeed.io工具集中的部分组件&作用:

  • Sitespeed.io:基于其他一系列开源工具构建而成的sitespeed.io集
  • Browsertime:作为驱动浏览器、收集Web性能度量指标的工具
  • Coach:该组件知道如何构建快速响应的网站,通过分析测试页面,反馈所需调整的优化项
  • VisualMetrics:通过从浏览器的屏幕进行视频录制,收集Web性能度量的视觉指标(如:视觉变化、速度指数)

Sitespeed.io测试执行过程:

  1. sitespeed.io启动并初始化所有需要的组件
  2. URL通过队列传递给组件 1)Browsertime获取URL并打开浏览器 2)开始对浏览器屏幕录制视频 3)驱动浏览器访问URL 4)当页面加载完成时,Browsertime会对页面截屏 5)然后运行一些JavaScript脚本(Coach、Browsertime脚本)来分析页面 6)停止视频录制,并关闭浏览器 7)分析视频,以获取视觉指标,如:第一视觉变化、速度指数 8)Browsertime传递队列上的所有指标和数据,以使其他组件可以使用这些指标和数据
  3. HTML/Graphite/InfluxDB组件,收集队列中的指标
  4. 当所有URL都被测试完成时,sitespeed会发送一条消息通知组件集进行总结指标,然后将指标呈现出来
  5. 组件集获取到所呈现的信息,然后HTML组件将这些信息以HTML格式写入到磁盘进行存储为测试报告

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

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券