# sitespeed.io [![Unit tests](https://github.com/sitespeedio/sitespeed.io/actions/workflows/unittests.yml/badge.svg)](https://github.com/sitespeedio/sitespeed.io/actions/workflows/unittests.yml) [![Linux browsers](https://github.com/sitespeedio/sitespeed.io/actions/workflows/linux.yml/badge.svg)](https://github.com/sitespeedio/sitespeed.io/actions/workflows/linux.yml) [![Docker](https://github.com/sitespeedio/sitespeed.io/actions/workflows/docker.yml/badge.svg)](https://github.com/sitespeedio/sitespeed.io/actions/workflows/docker.yml) [![Docker security scan](https://github.com/sitespeedio/sitespeed.io/actions/workflows/docker-scan.yml/badge.svg)](https://github.com/sitespeedio/sitespeed.io/actions/workflows/docker-scan.yml) [![Windows Edge](https://github.com/sitespeedio/sitespeed.io/actions/workflows/windows.yml/badge.svg)](https://github.com/sitespeedio/sitespeed.io/actions/workflows/windows.yml) [![OSX Safari](https://github.com/sitespeedio/sitespeed.io/actions/workflows/safari.yml/badge.svg)](https://github.com/sitespeedio/sitespeed.io/actions/workflows/safari.yml) [![Test upload functionality](https://github.com/sitespeedio/sitespeed.io/actions/workflows/upload.yml/badge.svg)](https://github.com/sitespeedio/sitespeed.io/actions/workflows/upload.yml) [![Downloads][downloads-image]][downloads-url] [![Docker][docker-image]][docker-url] [![Stars][stars-image]][stars-url] [![npm][npm-image]][npm-url] [![Changelog #212][changelog-image]][changelog-url] [Website](https://www.sitespeed.io/) | [Documentation](https://www.sitespeed.io/documentation/sitespeed.io/) | [Changelog](https://github.com/sitespeedio/sitespeed.io/blob/main/CHANGELOG.md) | [Bluesky](https://bsky.app/profile/sitespeed.io) | [Mastodon](https://fosstodon.org/@sitespeedio) # Table of Contents - [Welcome to the Wonderful World of Web Performance](#welcome-to-the-wonderful-world-of-web-performance) - [What is sitespeed.io?](#what-is-sitespeedio) - [Why Choose sitespeed.io?](#why-choose-sitespeedio) - [Dive Into Our Documentation](#dive-into-our-documentation) - [Installation](#installation) - [Docker](#docker) - [NodeJS](#nodejs) - [Usage](#usage) - [Basic Usage](#basic-usage) - [Advanced Configuration](#advanced-configuration) - [Mobile Performance Testing](#mobile-performance-testing) - [Examples](#examples) - [Contributing](#contributing) - [Reporting Issues](#reporting-issues) - [Community and Support](#community-and-support) - [License](#license) # Welcome to the wonderful world of web performance! Welcome to `sitespeed.io`, the comprehensive web performance tool designed for everyone passionate about web speed. Whether you're a developer, a site owner, or just someone curious about website performance, `sitespeed.io` offers a powerful yet user-friendly way to analyze and optimize your website. ## What is sitespeed.io? `sitespeed.io` is more than just a tool; it's a complete solution for measuring, monitoring, and improving your website's performance. Built with simplicity and efficiency in mind, it enables you to: - **Test Websites Using Real Browsers**: Simulate real user interactions and conditions to get accurate performance data. - **Speed Optimization Feedback**: Get detailed insights into your website's construction and discover opportunities for enhancing speed. - **Track Performance Over Time**: Monitor changes and trends in your website's performance to stay ahead of potential issues. Use cases on when to use `sitespeed.io`. - **Web performance audit**: Run performance tests from your terminal. - **Continuous Integration**: Detect web performance regressions early in the development cycle. - **Production Monitoring**: Monitor performance in production and get alerted on regressions. ## Why Choose sitespeed.io? - **Open Source and Community-Driven**: Built and maintained by a community, ensuring continuous improvement and innovation. - **Versatile and Extensible**: Whether you're running a simple blog or a complex e-commerce site, `sitespeed.io` adapts to your needs. - **Seamless Integration**: Easily incorporate `sitespeed.io` into your development workflow, continuous integration systems, and monitoring setups. ## Dive Into Our Documentation We've put countless hours into our [documentation](https://www.sitespeed.io/documentation/sitespeed.io/) to help you get the most out of `sitespeed.io`. From installation guides to advanced usage scenarios, our documentation is a treasure trove of information and tips. # Installation Getting started with `sitespeed.io` is straightforward. You can install it using Docker or NodeJS, depending on your preference and setup. Follow these simple steps to begin optimizing your website's performance. ## Docker Using Docker is the easiest way to get started with `sitespeed.io`, especially if you don't want to handle dependencies manually. Run the following command to use `sitespeed.io` in a Docker container: ```bash docker run --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io https://www.sitespeed.io/ ``` This command pulls the latest sitespeed.io Docker image and runs a test on the sitespeed.io website. The **-v "$(pwd)":/sitespeed.io** part mounts the current directory into the container, allowing you to easily access test results. ## NodeJS If you prefer installing `sitespeed.io` as an npm package, ensure you have NodeJS installed on your system. Then, install `sitespeed.io` globally using npm: ```bash npm i -g sitespeed.io ``` After installation, you can start using sitespeed.io by running: ```bash sitespeed.io https://www.example.com ``` Replace https://www.example.com with the URL you wish to test. Note that using NodeJS might require additional dependencies like FFmpeg and Python. Detailed installation instructions for these dependencies can be found [here](https://www.sitespeed.io/documentation/sitespeed.io/installation/). Choose the method that best suits your environment and get ready to dive into web performance optimization with sitespeed.io! # Usage `sitespeed.io` is tailored to be user-friendly, making web performance testing accessible regardless of your technical expertise. Here's a straightforward guide to help you begin your web performance optimization journey. ## Basic Usage To start testing your website, simply run `sitespeed.io` with the URL of the site you want to analyze. For example: ```bash sitespeed.io https://www.example.com --browser chrome -n 5 ``` This command tests https://www.example.com using Chrome and performs 5 iterations of the test. This approach helps in obtaining a more accurate median performance measurement by testing the site multiple times. ## Advanced Configuration sitespeed.io offers a wide range of configuration options to tailor the tests to your specific needs. You can specify different browsers, adjust connectivity settings, and much more. For a comprehensive list of all available options, visit our [configuration documentation](https://www.sitespeed.io/documentation/sitespeed.io/configuration/). Additionally, for a quick overview of all command-line options, you can run: ```bash sitespeed.io --help ``` This command displays all the available flags and settings you can use with sitespeed.io, helping you fine-tune your performance testing to fit your unique requirements. Whether you're running a quick check or a detailed analysis, sitespeed.io provides the flexibility and power you need to deeply understand and improve your website's performance. ## Mobile Performance Testing In today's mobile-first world, ensuring your website performs optimally on smartphones and tablets is crucial. With `sitespeed.io`, you can simulate and analyze the performance of your website on mobile devices, helping you understand and improve the user experience for mobile audiences. ### Why Test on Mobile? - **User Experience**: A significant portion of web traffic comes from mobile devices. Testing on mobile ensures your site is optimized for these users. - **Search Engine Ranking**: Search engines like Google prioritize mobile-friendly websites in their search results. - **Performance Insights**: Mobile devices have different performance characteristics than desktops, such as CPU limitations and network variability. ### How sitespeed.io Helps - **Real Browser Testing**: Simulate mobile browsers to get accurate performance data as experienced by real users. - **Device-Specific Metrics**: Gain insights into how your site performs on different mobile devices and networks. - **Responsive Design Analysis**: Test how well your site adapts to various screen sizes and orientations. ### Getting Started To start testing your website’s mobile performance, you need to setup your mobile phone for testing. We got [documentation for setting up your Android phone](https://www.sitespeed.io/documentation/sitespeed.io/mobile-phones/#test-on-android) and [iOS](https://www.sitespeed.io/documentation/sitespeed.io/mobile-phones/#test-on-ios). When your setup is ready, you can run tests on your Android phone. ```bash sitespeed.io https://www.example.com --android ``` ## Examples `sitespeed.io` provides insightful HTML reports that help you visualize and understand your website's performance. Here are some examples to illustrate what you can achieve: ### Summary Report Here's an example of a summary report in HTML, offering a comprehensive overview of your site's performance metrics: ![Summary Report](https://raw.githubusercontent.com/sitespeedio/sitespeed.io/main/docs/img/start-readme.jpg) This report includes key performance indicators like load times, page size, and request counts, giving you a quick snapshot of your site’s overall health. ### Individual Page Report For more detailed analysis, here's an individual page report: ![Individual Page Report](https://raw.githubusercontent.com/sitespeedio/sitespeed.io/main/docs/img/start-url-readme.jpg) This report dives deeper into a single page's performance, providing metrics on aspects like scripting, rendering, and network activity, crucial for pinpointing specific areas of improvement. ### Performance Monitoring Dashboard To monitor your website’s performance over time, check out our live setup at [dashboard.sitespeed.io](https://dashboard.sitespeed.io/), which integrates `sitespeed.io` with Graphite and Grafana. #### Metrics in Graphite/Grafana Collected metrics from a URL visualized in Graphite/Grafana: ![Graphite/Grafana Metrics](https://raw.githubusercontent.com/sitespeedio/sitespeed.io/main/docs/img/grafana-readme.jpg) This setup allows for continuous tracking of performance, helping you identify trends and potential issues. #### Trends in Grafana Trends over time in Grafana provide a long-term view of your site's performance: ![Grafana Trends](https://raw.githubusercontent.com/sitespeedio/sitespeed.io/main/docs/img/grafana-trends-readme.jpg) With these insights, you can make informed decisions about optimizations and track the impact of changes you make. ### Video Performance Analysis For visual feedback, `sitespeed.io` can generate videos, making it easier to see how your site loads in real-time. Here's a sample video: ![Video Analysis](https://raw.githubusercontent.com/sitespeedio/sitespeed.io/main/docs/img/barack.gif) Video analysis is most easily done using Docker and offers a unique perspective on user experience, highlighting areas that need attention. # Contributing We welcome contributions from the community! Whether you're fixing a bug, adding a feature, or improving documentation, your help is valuable. Here’s how you can contribute: 1. **Create an Issue**: Create an issue and discuss with us how to implement the issue. 2. **Fork and Clone**: Fork the repository and clone it locally. 3. **Create a Branch**: Create a new branch for your feature or bug fix. 4. **Develop**: Make your changes. Ensure you adhere to the coding standards and write tests if applicable. 5. **Test**: Run tests to ensure everything works as expected. 6. **Submit a Pull Request**: Push your changes to your fork and submit a pull request to the main repository. Before contributing, please read our [CONTRIBUTING.md](.github/CONTRIBUTING.md) for more detailed information on how to contribute. # Reporting Issues Found a bug or have a feature request? Please use the [GitHub Issues](https://github.com/sitespeedio/sitespeed.io/issues) to report them. Be sure to check existing issues to avoid duplicates. # Community and Support Join our community! Whether you need help, want to share your experience, or discuss potential improvements, there are several ways to get involved: - **Slack**: Connect with fellow users and the development team on [Slack](https://join.slack.com/t/sitespeedio/shared_invite/zt-296jzr7qs-d6DId2KpEnMPJSQ8_R~WFw). - **GitHub Issues**: For technical questions, feature requests, and bug reports, use our [GitHub issues](https://github.com/sitespeedio/sitespeed.io/issues). - **RSS/Changelog**: Latest releases and information can always be found in our [RSS feed](https://github.com/sitespeedio/sitespeed.io/releases.atom) and in our [changelog](https://github.com/sitespeedio/sitespeed.io/blob/main/CHANGELOG.md). - **Mastodon**: Follow us on Mastodon [https://fosstodon.org/@sitespeedio](https://fosstodon.org/@sitespeedio). We're excited to have you in our community and look forward to your contributions and interactions! # License [The MIT License (MIT)](LICENSE). [stars-url]: https://github.com/sitespeedio/sitespeed.io/stargazers [stars-image]: https://img.shields.io/github/stars/sitespeedio/sitespeed.io.svg?style=flat-square [downloads-image]: https://img.shields.io/npm/dt/sitespeed.io.svg?style=flat-square [downloads-url]: https://npmjs.org/package/sitespeed.io [docker-image]: https://img.shields.io/docker/pulls/sitespeedio/sitespeed.io.svg [docker-url]: https://hub.docker.com/r/sitespeedio/sitespeed.io/ [changelog-image]: https://img.shields.io/badge/changelog-%23212-lightgrey.svg?style=flat-square [changelog-url]: https://changelog.com/212 [npm-image]: https://img.shields.io/npm/v/sitespeed.io.svg [npm-url]: https://npmjs.org/package/sitespeed.io