sitespeedio/sitespeed.io-autobuild

sitespeed.io

https://www.sitespeed.io/ | https://www.sitespeed.io/documentation/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：驱动浏览器并收集指标的工具。
• https://github.com/sitespeedio/coach：了解如何构建快速网站，分析页面并提供改进反馈。
• 视觉指标（Visual Metrics）：通过浏览器屏幕录制视频收集的指标。
• 所有功能均通过https://www.sitespeed.io/documentation/sitespeed.io/plugins/实现，插件通过消息队列通信。

工作流程

测试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测试网站是否符合Web性能最佳实践。
• 使用https://github.com/sitespeedio/browsertime从Firefox/Chrome收集导航时序API、用户时序API和视觉指标。
• 运行自定义JavaScript，收集所需的任何指标。
• 测试单个或多个页面，进行多次运行以获取更准确的指标。
• 生成HTML结果页面或将指标存储在Graphite中。
• 编写自定义插件以执行任何所需测试。

查看https://github.com/sitespeedio/sitespeed.io/blob/main/CHANGELOG.md了解所有最新变化。

使用WebPageReplay测试

我们提供包含https://github.com/catapult-project/catapult/blob/main/web_page_replay_go/README.md的特殊Docker容器（早期alpha版本），可在本地重放页面（消除服务器延迟），获得稳定指标。

Chrome示例

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

赞助商

我们的Mac Mini由MacStadium赞助。通过https://github.com/***/soulgalore支持我们，帮助维持sitespeed.io的运行和测试环境。