page-speed.dev

轻松查看和分享 Core Web Vitals 和 PageSpeed Insights 结果。

👉  查看

👉 愿景

page-speed.dev 的目标是让分享 Web 性能结果变得简单直接。目前，PageSpeed Insights 和 Core Web Vitals 的结果难以分享，且通常通过截图而非链接回源进行分享。

因此：

• 结果缓存一天加下一次请求，使后续请求快速且易于分享。
• 显示移动端结果。（桌面端结果太容易获得良好分数，且不能充分反映网站的性能。）
• 在可用时优先显示 Core Web Vitals，因为它们是比 Lighthouse/PageSpeed Insights 结果更好的性能衡量标准。
• OpenGraph 图像中的指标，提供分享数据的便捷方式。
• SVG 徽章，用于在 GitHub README 或文档中显示 Core Web Vitals 指标。

功能

• 基于 Nuxt
• Nitro 服务器 API 路由
• CrUX API 和 PageSpeed Insights API
• UnoCSS
• nuxt-og-image，由 Satori 提供支持
• 部署在 Azure Static Web Apps
• 使用 unjs/unstorage 在 Azure Blob Storage 上进行缓存
• 使用 route rules 持久化图像、HTML 和 API 请求
• 用于在 GitHub README 中显示核心 Web 指标（Core Web Vitals）的 SVG 徽章

SVG 徽章

现在，您可以使用我们的 SVG 徽章在 GitHub README 或文档中嵌入核心 Web 指标（Core Web Vitals）：

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

徽章选项

您可以使用不同的指标和样式来自定义徽章：

指标

![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)

示例：

样式

![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)

示例：

在本地尝试

你需要在此处生成一个新的 Google API 令牌，该令牌需具有访问 PageSpeed Insights API 和 Chrome UX Report API 的权限，并将该令牌添加到你的 .env 文件中：

NUXT_GOOGLE_API_TOKEN=<your api token>

设置

# 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

致谢

衷心感谢 Barry Pollard 提供了重要的审阅和建议！ ❤️

链接

• 有一个 Raycast 扩展 使用此 API 作为后端

许可证

用 ❤️ 制作

依据 MIT 许可证 发布。