Sitespeed.io -岩石教程

特点

多浏览器支持：支持在多个浏览器（如 Chrome 和 Firefox）上运行性能测试。
详细的性能报告：生成包含网页加载时间、资源利用率、速度指标等详细信息的报告。
自动化测试和监控：集成到 CI/CD 流程中，实现自动化性能测试和持续监控。
视频和瀑布图分析：提供网页加载过程的视频记录和瀑布图，帮助开发者识别性能瓶颈。
页面优化建议：根据网页性能数据提供具体的优化建议，提升网页性能。
多视图支持：在不同设备和网络条件下测试网页性能，确保跨平台一致性。
插件扩展：支持使用插件扩展功能，满足特定需求。

使用场景

性能优化：识别和修复性能瓶颈，提高网页加载速度和用户体验。
持续监控：持续监控网站性能，及时发现并解决性能问题。
多设备和浏览器测试：确保网页在不同浏览器和设备上的一致性和性能。
自动化测试：集成到 CI/CD 流程中，自动化性能测试，确保每次发布的高质量代码。
页面优化：根据优化建议改进网页性能，提高用户满意度和搜索引擎排名。

安装方式

使用 npm 安装 Sitespeed.io：

npm install -g sitespeed.io

使用示例

基本使用 在命令行中运行 Sitespeed.io 进行性能测试：

sitespeed.io https://example.com

自定义测试参数

指定浏览器、设备和网络条件进行测试：

sitespeed.io https://example.com --browsertime.viewPort=375x667 --mobile --browsertime.connectivity.profile=3g

生成详细报告

通过指定参数生成详细的性能报告：

sitespeed.io https://example.com --outputFolder ./output

集成 CI/CD

在 CI/CD 流程中集成 Sitespeed.io，以自动化性能测试和监控，例如在 GitHub Actions 中：

name: Performance Testing

on: [push]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install Sitespeed.io
        run: npm install -g sitespeed.io

      - name: Run Performance Test
        run: sitespeed.io https://example.com --outputFolder ./output

常用 API 介绍

browsertime：配置 Browsertime 相关的性能测试参数。
- --browsertime.viewPort：设置浏览器视口大小。
- --browsertime.connectivity.profile：设置网络连接配置，如 3g、4g 等。
```
sitespeed.io https://example.com --browsertime.viewPort=1366x768 --browsertime.connectivity.profile=3g
```
coach：启用或禁用 Coach 的页面优化建议。
- --coach：启用 Coach。
- --no-coach：禁用 Coach。
```
sitespeed.io https://example.com --coach
```

outputFolder：指定输出报告的目录。

sitespeed.io https://example.com --outputFolder ./output

browsertime.iterations：设置测试迭代次数，以获取更稳定的测试结果。
```
sitespeed.io https://example.com --browsertime.iterations=3
```
browsertime.headless：启用无头浏览器模式，适用于 CI 环境。
```
sitespeed.io https://example.com --browsertime.headless
```

高级用法

自定义脚本

通过自定义脚本进行更复杂的测试，例如模拟用户交互：

module.exports = async function(context, commands) {
  await commands.navigate('https://example.com');
  await commands.click.byId('loginButton');
  await commands.wait.byTime(3000);
};

在命令行中指定脚本文件：

sitespeed.io --browsertime.script path/to/script.js https://example.com

与 Grafana 集成

使用 InfluxDB 和 Grafana 进行性能数据的可视化展示：

启动 InfluxDB 和 Grafana 服务。

配置 Sitespeed.io 将测试数据发送到 InfluxDB：

sitespeed.io https://example.com --graphite.host=INFLUXDB_HOST --graphite.port=2003

使用 Docker

使用 Docker 运行 Sitespeed.io，以便于在不同环境中快速部署：

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

Sitespeed.io

特点

使用场景

安装方式

使用示例

常用 API 介绍

高级用法

官方资料