DOCSEARCHbyAlgolia
Submit Docs

sitespeed.io Documentation

repository·main·Indexed 26 days ago

https://github.com/sitespeedio/sitespeed.io

An open-source tool for comprehensive web performance analysis, enabling users to test, monitor, and optimize website speed using real browsers. It collects Core Web Vitals, visual metrics, and HAR waterfalls for debugging, CI regression testing, and production monitoring. Supports installation via Docker and npm, testing on desktop and real mobile devices (Android and iOS), and integration with Grafana and Graphite for visualization.

Tokens
125.8K
Snippets
302
Records
760
Agent score
89%

What's inside sitespeed.io

  2. Introduction to sitespeed.io

    main

    sitespeed.io is a web performance tool used to measure website performance by simulating real user connectivity using real browsers. It analyzes page construction, provides optimization feedback, and collects data for tracking performance changes over time.

    Key Capabilities

    • Real Browser Testing: Simulates real user connectivity.
    • Performance Analysis: Provides feedback for speed optimization based on page construction.
    • Data Collection: Maintains metrics for tracking performance regressions.

    Common Use Cases

    • Continuous Integration (CI): Detect performance regressions early in the development cycle.
    • Production Monitoring: Monitor live production performance and alert on regressions.
    • Web Performance Audits: Run performance tests directly from the terminal.

  3. Introduction to Browsertime

    main

    Browsertime is a performance testing engine that drives a real browser to collect performance data. It powers sitespeed.io but can also be used as a standalone tool.

    Core Capabilities:

    • Browser Automation: Drives Chrome, Firefox, Edge, and Safari (desktop), as well as Chrome/Firefox (Android) and Safari (iOS).
    • JavaScript Probes: Runs built-in probes and custom JavaScript once a page is ready to collect metrics.
    • Visual Metrics: Records the browser viewport via FFmpeg to calculate metrics like Speed Index, First Visual Change, and Last Visual Change.
    • User Journeys: Supports Selenium-style scripts to perform actions like logging in or navigating single-page-app (SPA) routes before, during, or after navigation.

    Usage Modes:

    1. Standalone CLI: Use it as a command-line tool to collect metrics for a URL or a user journey.
    2. JavaScript Runner: Integrate it into your own tools as a library that boots a browser and returns results.

  4. Overview of sitespeed.io tools

    main

    sitespeed.io is a suite of tools for web performance monitoring and analysis. You can use the following tools to collect metrics, compare performance, or simulate network conditions:

    • sitespeed.io: The main tool for continuous web performance monitoring. It integrates several other tools like Coach, Browsertime, and PageXray.
    • Browsertime: Collects metrics using JavaScript, video, and HAR files from Chrome or Firefox.
    • Chrome-HAR: Creates Chrome HAR files based on events from the Chrome Debugging Protocol.
    • Coach: Provides actionable advice on how to make your web pages faster.
    • Compare: Compares two HAR files to identify performance regressions.
    • PageXray: Converts HAR files into a more usable format.
    • Throttle: Simulates slow network connections on Linux and macOS.
    • Humble: A Raspberry Pi WiFi network link conditioner.
    • OnlineTest: Allows you to deploy your own version of sitespeed.io online.

  5. Overview of sitespeed.io capabilities

    main

    sitespeed.io is an open-source web performance tool used to analyze and optimize website speed. It provides several key outputs and integration capabilities:

    • Debugging: Generates an HTML report containing Core Web Vitals, a video of the page loading, a HAR waterfall, and actionable advice (Coach's advice) to fix performance issues.
    • Monitoring: Can be run continuously (e.g., every hour) to track performance over time.
    • Data Export: Supports shipping metrics to Graphite or InfluxDB for visualization in Grafana dashboards.

  8. Understand the Coach analysis mechanism

    main

    The Coach is a rule-based analysis engine that runs by default within sitespeed.io. It provides actionable advice by combining two distinct data sources:

    • DOM advice: JavaScript executed inside the browser to inspect the live page (e.g., checking for render-blocking scripts, image scaling, or decoding="async" attributes).
    • HAR advice: Analysis of the HAR file generated during the run (e.g., checking request counts, cache headers, third-party usage, and render-blocking timings).

    The results from both sources are merged to provide comprehensive rule evaluations.

  9. Understand metric grouping: run, pageSummary, and summary

    main

    Sitespeed.io metrics are categorized into three distinct groups based on their scope:

    • run: Metrics collected for a single iteration.
    • pageSummary: Encapsulates metrics for a single page. If a page is tested multiple times (e.g., 10 times), this group contains the min/median/max values for metrics that vary.
    • summary: Holds information per group or per domain. If you test multiple different pages on the same domain, the summary aggregates those metrics.

  10. Measure Google Web Vitals with sitespeed.io

    main

    sitespeed.io measures Core Web Vitals automatically during performance tests. The following metrics are captured out of the box:

    • Largest Contentful Paint (LCP)
    • Interaction to Next Paint (INP)
    • Cumulative Layout Shift (CLS)
    • First Contentful Paint (FCP)
    • Time to First Byte (TTFB)

    Results are presented in the HTML report, categorized against Google's p75 thresholds into three states: Good, Needs improvement, or Poor. The visual progress charts align these metrics with the page load filmstrip to help identify exactly when each metric occurred during the page load process.

  11. Understand the CPU Benchmark metric

    main

    The CPU benchmark is a simple loop executed in the browser after the page has finished loading and other tests have completed. It produces a metric in milliseconds representing the time taken to execute the loop.

    Common use cases include:

    • Comparing hardware: Compare benchmark values between real mobile devices and emulated mobile tests on a computer.
    • Monitoring test environment stability: Track the benchmark over time on your test server. Unstable benchmark values often indicate that other performance metrics will also be unstable.
    • RUM Comparison: If collecting Real User Monitoring (RUM) data, you can collect this CPU metric (ideally off the main thread) to compare synthetic test results with real user data.