Performance Testing

Site Speed

Github Actions

Git

Automation Testing

Sitespeed.io: Open-Source Web Performance Monitoring with CI Integration

When it comes to ensuring lightning-fast websites and catching performance regressions early, Sitespeed.io is a powerful open-source tool you should definitely have in your toolbox. It not only runs Lighthouse and WebPageTest-style audits but also gives deep insights into frontend metrics like Speed Index, TTFB, First Paint, and JavaScript execution time.

In this guide, we’ll cover:

• Setting up Sitespeed.io locally
• Generating performance reports
• Automating performance tests in CI (GitHub Actions & GitLab CI)
• Recording performance test videos
• Integrating Grafana dashboards (optional)

1. Installing Sitespeed.io

Requirements:

• Node.js 18+
• Docker (for isolated browser testing)
• Chrome (if not using Docker)

Install globally

npm install -g sitespeed.io

Alternatively, using Docker:

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

2. Running Basic Tests

Test a website:

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

To record a video of the page load:

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

Test with multiple iterations:

sitespeed.io https://example.com --iterations 5 --browsertime.chrome.includeResponseBodies all

3. Report Output

The output folder ( — outputFolder) includes:

• index.html: The main performance summary
• browsertime.json: Detailed performance metrics
• video/: Video of the page load
• data/: Raw metrics for programmatic use

4. CI Integration

GitHub Actions

Create .github/workflows/performance.yml:

name: Sitespeed Performance Test
on:
  push:
    branches:
      - main
jobs:
  performance:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Run Sitespeed.io
        run: |
          docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://example.com --outputFolder output --video
      - name: Upload report artifact
        uses: actions/upload-artifact@v3
        with:
          name: performance-report
          path: output/

GitLab CI

Create .gitlab-ci.yml:

performance-test:
  image: docker:latest
  services:
    - docker:dind
  variables:
    DOCKER_TLS_CERTDIR: ""
  script:
    - docker run --rm -v "$CI_PROJECT_DIR":/sitespeed.io sitespeedio/sitespeed.io https://example.com --outputFolder output --video
  artifacts:
    paths:
      - output/

5. Sample Video Output

Here’s a sample from a test run on https://example.com. Notice how it tracks the visible rendering timeline:

To extract videos:

open output/video/1.mp4

Or embed them in Slack or CI reports.

6. Optional: InfluxDB + Grafana Integration

Sitespeed.io supports exporting metrics to InfluxDB:

sitespeed.io https://example.com \
  --graphite.host=localhost \
  --graphite.namespace=my-site \
  --browsertime.influxdb.host=localhost \
  --browsertime.influxdb.database=sitespeed

Then visualize your metrics over time in Grafana dashboards:

Final Thoughts

Sitespeed.io is more than just another performance tool. It’s an end-to-end performance pipeline that can help your team:

• Track frontend regressions over time
• Capture real-world loading behavior
• Generate meaningful CI feedback
• Automate page load monitoring

I have created a project on GitHub and added the code here.

Feel free to hit clap if you like the content. Happy Automation Testing :) Cheers. 👏

If you’d like to support my work, please leave a good rating for my Chrome plugin here and my Firefox plugin here.