Sanity PageSpeed Monitoring Plugin (for Sanity Studio v3)

This plugin is for Sanity Studio v3 and uses the PageSpeed Insights API to provide insights into the speed and performance of your website. To use this plugin, you will need to have an API key for the PageSpeed Insights API.

Get your credentials here

To use the PageSpeed Insights API, you will need to obtain an API key. You can get your API key by following the instructions provided in the PageSpeed API documentation.

Additionally, if you use Gmail for your Google account, you may need to generate an app password to use as your API key. Instructions for generating app passwords can be found in Google's support documentation.

Once you have obtained your API key, add it to your .env file as follows:

SANITY_STUDIO_PAGE_SPEED_INSIGHTS_API_KEY=<your API key here>

This will allow the Sanity Page Speed plugin to access the PageSpeed Insights API and provide speed and performance insights for your website.

Installation

To install this plugin, use the following command:

npm install sanity-page-speed-monitoring-plugin

Usage

To use this plugin, add it as a plugin in your sanity.config.ts (or .js) file, as shown in the example below:

import {defineConfig} from 'sanity'
import {pageSpeedMonitoringPlugin} from 'sanity-page-speed-monitoring-plugin'
//import your key from .env file
const API_KEY = `${process.env.SANITY_STUDIO_PAGE_SPEED_INSIGHTS_API_KEY}`

export default defineConfig({
  // ...
  plugins: [pageSpeedMonitoringPlugin({API_KEY})],
})

After adding the plugin, you can access it by opening the "Page Speed" tab in the Sanity Studio. From there, you can enter the URL of the page you want to analyze and click "Run Analysis" to get insights into the speed and performance of your website.

Acknowledgments

This plugin uses the PageSpeed Insights API by Google to provide insights into website speed and performance.

Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.