Skip to content

Lighthouse Report SVG Embed is a tool that helps you display Lighthouse reports in a visually appealing way directly on your site, README, or other documentation. This tool was created to provide a simple and effective way to embed performance and audit reports without needing a separate installation.

License

Notifications You must be signed in to change notification settings

HangerThem/lighthouse-report-svg

Repository files navigation

GitHub Repo Size GitHub Issues GitHub Stars GitHub Forks GitHub license GitHub last commit

Lighthouse Report SVG Embed

Lighthouse Report SVG Embed is a tool that helps you display Lighthouse reports in a visually appealing way directly on your site, README, or other documentation. This tool was created to provide a simple and effective way to embed performance and audit reports without needing a separate installation.

Overview

When looking to embed Lighthouse reports into a README or other documents, there wasn't an easy solution available. This tool fills that gap by offering a straightforward way to generate and embed SVG reports from Lighthouse metrics. Simply use the provided URL syntax to customize and display your report.

Features

  • No Installation Required: Deployed on Vercel, so you can use it directly via URL.
  • Customizable SVG Reports: Adjust performance, accessibility, best practices, SEO, and PWA metrics through URL parameters.
  • Easy Integration: Use the URL as an image source in markdown files, similar to other badges.

Preview

Lighthouse Report

Usage

To embed a Lighthouse report SVG, use the following URL format:

https://lighthouse-report-svg.vercel.app/?perf=100&acc=40&best=30&seo=58&pwa=4

Parameters

  • perf (Performance): A value between 0 and 100.
  • acc (Accessibility): A value between 0 and 100.
  • best (Best Practices): A value between 0 and 100.
  • seo (SEO): A value between 0 and 100.
  • pwa (Progressive Web App):
    • 0 - No badges
    • 1 - Just fast and reliable
    • 2 - Just installable
    • 3 - Fast and reliable and installable
    • 4 - Full PWA

Example of embedding the SVG in a markdown file:

![Lighthouse Report](https://lighthouse-report-svg.vercel.app/?perf=85&acc=90&best=80&seo=70&pwa=3)

Customization

You can customize the report by modifying the URL parameters. Each parameter directly affects the SVG output, allowing you to tailor the report to reflect your specific metrics.

Contributing

Contributions are welcome! If you'd like to contribute, please follow these steps:

  1. Fork the repository.
  2. Create a new branch for your feature or fix.
  3. Submit a pull request with a detailed description of your changes.

Please adhere to the Code of Conduct when contributing.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contact

For questions or support, please reach out to f.borisjuk@hangerthem.com.

Acknowledgements

This tool leverages the capabilities of Vercel for deployment and showcases the versatility of Lighthouse metrics.

About

Lighthouse Report SVG Embed is a tool that helps you display Lighthouse reports in a visually appealing way directly on your site, README, or other documentation. This tool was created to provide a simple and effective way to embed performance and audit reports without needing a separate installation.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks