page-speed.dev

See and share Core Web Vitals and PageSpeed Insights results simply and easily.

👉 Check it out

Screenshot of page-speed.dev showing performance metrics for https://roe.dev

Screenshot of performance metrics being shared on Twitter

👉 Vision

The aim of page-speed.dev is to make it easy and straightforward to share web performance results. Currently, PageSpeed Insights and Core Web Vitals results are difficult to share, and and often shared via screenshot rather than via a link back to the source.

So:

Results are cached for a day plus next request making subsequent requests fast and easy to share.
Mobile results are displayed. (Desktop results are too easy to get good results for and don't adequately reflect a site's performance.)
Core Web Vitals are prioritised where available as these are a better measure of performance than Lighthouse/PageSpeed Insights results.
Metrics in OpenGraph images to provide an easy way to share data.
SVG badges to display Core Web Vitals metrics in GitHub READMEs or documentation.

Features

Built on Nuxt
Nitro server API routes
CrUX API and PageSpeed Insights API
UnoCSS
nuxt-og-image, powered by Satori
Deployed on Azure Static Web Apps
Using unjs/unstorage for caching on Azure Blob Storage
Using route rules to persist images, HTML and API requests
SVG badges for displaying Core Web Vitals metrics in GitHub READMEs

SVG Badges

You can now embed Core Web Vitals metrics in your GitHub README or documentation using our SVG badges:

![Core Web Vitals](https://page-speed.dev/badge/roe.dev)

Example:

Badge Options

You can customize the badges with different metrics and styles:

Metrics

![LCP](https://page-speed.dev/badge/roe.dev?metric=lcp)
![CLS](https://page-speed.dev/badge/roe.dev?metric=cls)
![INP](https://page-speed.dev/badge/roe.dev?metric=inp)

Examples:

Styles

![Core Web Vitals](https://page-speed.dev/badge/roe.dev?style=flat)
![Core Web Vitals](https://page-speed.dev/badge/roe.dev?style=flat-square)
![Core Web Vitals](https://page-speed.dev/badge/roe.dev?style=plastic)

Examples:

Try it out locally

You will need to generate a new Google API token here with permissions to access PageSpeed Insights API and Chrome UX Report API, and add the token to your .env file:

NUXT_GOOGLE_API_TOKEN=<your api token>

Setup

# install dependencies
corepack enable
pnpm install

# serve in dev mode, with hot reload at localhost:3000
pnpm dev

# build for production
pnpm build

# preview in production mode
pnpm preview

Credits

Many thanks to Barry Pollard for providing essential review and suggestions! ❤️

Links

there is a Raycast extension which uses this API as a backend

License

Made with ❤️

Published under MIT License.

License

aksharahegde/page-speed.dev

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages