sitespeedio/sitespeed.io-autobuild

sitespeed.io

网站 | 文档 | https://github.com/sitespeedio/sitespeed.io/blob/main/CHANGELOG.md | ***

欢迎来到Web性能的精彩世界！

sitespeed.io是一款完整的Web性能工具，帮助您测量网站性能。具体意味着什么？

在详细介绍之前，您可以先尝试使用：

bash
$ docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/

或使用npm（需安装Chrome、Firefox、Edge、Safari，或Android上的Chrome/Firefox）：

bash
$ npm i -g sitespeed.io && sitespeed.io https://www.sitespeed.io/

核心能力

我们认为完整的Web性能工具具备三项关键能力：

• 使用真实浏览器测试网站，模拟真实用户网络连接，收集速度指数、首次视觉渲染等重要用户中心指标。
• 分析页面构建方式，提供优化建议，帮助提升用户体验。
• 收集并保存页面构建数据，便于追踪变更。

关键概念

• sitespeed.io基于sitespeed.io套件中的其他开源工具构建。
• https://github.com/sitespeedio/browsertime%EF%BC%9A%E9%A9%B1%E5%8A%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E5%B9%B6%E6%94%B6%E9%9B%86%E6%8C%87%E6%A0%87%E7%9A%84%E5%B7%A5%E5%85%B7%E3%80%82
• https://github.com/sitespeedio/coach%EF%BC%9A%E4%BA%86%E8%A7%A3%E5%A6%82%E4%BD%95%E6%9E%84%E5%BB%BA%E5%BF%AB%E9%80%9F%E7%BD%91%E7%AB%99%EF%BC%8C%E5%88%86%E6%9E%90%E9%A1%B5%E9%9D%A2%E5%B9%B6%E6%8F%90%E4%BE%9B%E6%94%B9%E8%BF%9B%E5%8F%8D%E9%A6%88%E3%80%82
• 视觉指标（Visual Metrics）：通过浏览器屏幕录制视频收集的指标。
• 所有功能均通过插件实现，插件通过消息队列通信。

工作流程

测试URL时的大致流程：

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插件将结果写入磁盘。

快速开始

使用Docker（推荐最新Docker）

bash
$ docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/

使用npm安装

bash
$ npm i -g sitespeed.io

源码克隆（测试最新变更）

bash
$ git clone https://github.com/sitespeedio/sitespeed.io.git
$ cd sitespeed.io
$ npm install
$ bin/sitespeed.js --help
$ bin/sitespeed.js https://www.sitespeed.io/

详细功能

使用sitespeed.io，您可以：

• 通过https://github.com/sitespeedio/coach%E6%B5%8B%E8%AF%95%E7%BD%91%E7%AB%99%E6%98%AF%E5%90%A6%E7%AC%A6%E5%90%88Web%E6%80%A7%E8%83%BD%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%E3%80%82
• 使用https://github.com/sitespeedio/browsertime%E4%BB%8EFirefox/Chrome%E6%94%B6%E9%9B%86%E5%AF%BC%E8%88%AA%E6%97%B6%E5%BA%8FAPI%E3%80%81%E7%94%A8%E6%88%B7%E6%97%B6%E5%BA%8FAPI%E5%92%8C%E8%A7%86%E8%A7%89%E6%8C%87%E6%A0%87%E3%80%82
• 运行自定义JavaScript，收集所需的任何指标。
• 测试单个或多个页面，进行多次运行以获取更准确的指标。
• 生成HTML结果页面或将指标存储在Graphite中。
• 编写自定义插件以执行任何所需测试。

查看https://github.com/sitespeedio/sitespeed.io/blob/main/CHANGELOG.md%E4%BA%86%E8%A7%A3%E6%89%80%E6%9C%89%E6%9C%80%E6%96%B0%E5%8F%98%E5%8C%96%E3%80%82

使用WebPageReplay测试

我们提供包含https://github.com/catapult-project/catapult/blob/main/web_page_replay_go/README.md%E7%9A%84%E7%89%B9%E6%AE%8ADocker%E5%AE%B9%E5%99%A8%EF%BC%88%E6%97%A9%E6%9C%9Falpha%E7%89%88%E6%9C%AC%EF%BC%89%EF%BC%8C%E5%8F%AF%E5%9C%A8%E6%9C%AC%E5%9C%B0%E9%87%8D%E6%94%BE%E9%A1%B5%E9%9D%A2%EF%BC%88%E6%B6%88%E9%99%A4%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%BB%B6%E8%BF%9F%EF%BC%89%EF%BC%8C%E8%8E%B7%E5%BE%97%E7%A8%B3%E5%AE%9A%E6%8C%87%E6%A0%87%E3%80%82

Chrome示例

bash
docker run --cap-add=NET_ADMIN --rm -v "$(pwd)":/sitespeed.io -e REPLAY=true -e LATENCY=100 sitespeedio/sitespeed.io -n 5 -b chrome https://en.wikipedia.org/wiki/Barack_Obama

Firefox示例

bash
docker run --cap-add=NET_ADMIN --rm -v "$(pwd)":/sitespeed.io -e REPLAY=true -e LATENCY=100 sitespeedio/sitespeed.io -n 11 -b firefox https://en.wikipedia.org/wiki/Barack_Obama

赞助商

我们的Mac Mini由MacStadium赞助。通过https://github.com/***/soulgalore%E6%94%AF%E6%8C%81%E6%88%91%E4%BB%AC%EF%BC%8C%E5%B8%AE%E5%8A%A9%E7%BB%B4%E6%8C%81sitespeed.io%E7%9A%84%E8%BF%90%E8%A1%8C%E5%92%8C%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83%E3%80%82