Sanity Lighthouse — a tool that brings Google's Pagespeed insights into your Sanity CMS

What is Sanity Lighthouse?

Sanity Lighthouse is a free plugin developed by Halo Lab that offers seamless integration of PageSpeed Insights (PSI) into Sanity CMS. This integration makes it much easier to analyze the performance of both desktop and mobile site versions for their subsequent optimization. It is also convenient for evaluating competitor websites as part of SEO campaigns.

The plugin’s UI is clear and simple. On the left side, you’ll find a list of tested URLs. Clicking on any of them opens a dashboard with the latest analytical information. 

On the top right, you’ll find the results of the latest check. And on the bottom right, there is some historical information, particularly how the numbers have changed from one check to another.

Additionally, Sanity Lighthouse allows users to filter data based on date and testing type, including categories such as SEO, Performance, Accessibility, and more.

Why do you need to use PageSpeed Insights?

Tracking website performance is of paramount importance in the digital era, and Google PageSpeed Insights is a powerful tool for conducting such an analysis. It offers insights into both mobile and desktop versions, helping website owners and developers better optimize their sites for different devices.

The integration between Sanity Lighthouse and Google PageSpeed Insights eliminates the need for manual switching between platforms, streamlining your workflow and saving you valuable time and energy.{{sergey-diniovskiy}}

One of the key advantages of PageSpeed Insights is its reliance on real-user experience data powered by the Chrome User Experience Report dataset. This dataset maintains a record of important metrics such as First Contentful Paint, First Input Delay, Largest Contentful Paint, Cumulative Layout Shift, and Interaction to Next Paint over a 28-day collection period.

By leveraging all this real-user data, Sanity Lighthouse enables developers or other specialists working within the Sanity environment to make informed decisions based on the actual experiences of website visitors. Take note, however, that to use our plugin, you’ll need to have a PageSpeed Insights API key.

The underlying idea behind Sanity Lighthouse

When developing a website, performance is one of the main things you need to watch out for. It is not enough to optimize your site once — it needs to be regularly monitored. As we mentioned, Google provides a great tool for this purpose, and we’ve been successfully using it in our work. However, this process wasn’t always convenient.

We figured that being able to monitor and conduct performance analysis straight from the CMS would be a much more pleasing experience. Since our team has extensively worked with Sanity for many years, we’ve decided to challenge ourselves and create a plugin that incorporates this functionality directly within the admin panel.

While at it, we also focused on creating a user-friendly interface that simplifies performance testing and optimization for developers. Our goal was to provide a tool that is easy to use and understand, so that users could quickly access actionable insights and work on improving the performance of their sites, as needed.

The concept behind Sanity Lighthouse originated from the need for smart solutions for both website owners and their development teams. Because a successful product is a result of the synergy between effective tools and concerted efforts.

In short, here’s the general overview of the plugin’s functionality.

Effortless integration with PageSpeed Insights

The integration of Google PageSpeed Insights with Sanity CMS through Sanity Lighthouse is smooth, convenient, and pretty much effortless. There’s no need for manual platform switching — here, you can always access PageSpeed Insights data without having to leave your familiar Sanity environment. Besides, it allows storing the history of queries along with seeing the results by dates and filtering them by categories, which is not available on the official website.‍

Developer-friendliness

Sanity Lighthouse has been designed with developers’ struggles in mind. By simplifying the performance testing, we desired to enable our colleagues to seamlessly integrate insightful analysis into their SanityCMS-powered websites. Ultimately, the plugin’s intuitive interface and streamlined workflow make it easy for developers to assess performance metrics and apply necessary improvements.‍

Performance history

By providing a shared requests history, Sanity Lighthouse brings clarity and enables website admins, developers, and optimizers to stay on the same page regarding performance monitoring. Since the plugin operates within the admin panel, you can add as many new pages as you want and easily check their performance within the same environment.

You see, as websites are constantly being updated and modified with new functionality and scripts, their performance may start to deteriorate. And with the help of Sanity Lighthouse, you can easily pinpoint the actions that caused a decrease in performance and promptly address the issue. With such historical data, site administrators would find it easier to figure out exactly when the performance started to decline and trace it to a specific culprit script or action.

This way, maintaining the site’s performance at optimal levels becomes a much more convenient and streamlined process.

By keeping track of the performance metrics straight in Sanity, you can easily identify areas for improvement and make adjustments necessary to elevate your website’s performance and ranking.

Installing Sanity Lighthouse

If you’ve already decided to try our plugin, ask your development team to take a look at the installation guide below. Luckily, it’s as straightforward as can be and won’t drive you and your employees to insanity :)

To get started with Sanity Lighthouse, take these simple steps:

1. Install npm package. The first thing you need to do is to install npm package for Sanity Lighthouse by running the following command:

npm install sanity-lighthouse-plugin

2. Obtain the API Key. Next, to utilize the full capabilities of Sanity Lighthouse, you’ll need to obtain the Google PageSpeed Insights API key. For this, refer to the provided instructions in the PageSpeed API documentation.

3. Configure the plugin. Import the plugin to your sanity.config.ts (or .js, depending on what you’re using) file and add there your API key, as shown in the example below:

import {defineConfig} from ‘sanity’
import {lighthousePlugin} from ‘sanity-lighthouse-plugin’
export default defineConfig({
  // ...
  plugins: [lighthousePlugin()],
})

4. Give the plugin a test run. Now it’s time to test Sanity Lighthouse. To build your first project, run the <mark>sanity build</mark> command, and start it with <mark>sanity dev</mark>

5. Add the API Key. The next thing you need to do is to enter the previously generated API Key into the modal window.

6. Enjoy Seamless Integration. Once all done, deploy the plugin into your existing Sanity workflow: <mark>sanity deploy </mark> Well done! Now it’s up to you to utilize the added functionality as best you can.

In case of any issues, please reach out to us via the GitHub Issues Page. And if everything is fine, consider giving our repository a star.

Final words

Halo Lab developed Sanity Lighthouse to simplify, streamline, and generally make working with analytical data in SanityCMS more efficient. When we encounter an issue that needs solving, we don’t always opt for ready-made solutions, instead choosing to craft our own. We specialize in creating custom stories, be that a small plugin for SanityCMS or an entire ecosystem for a promising startup.

Should you face a challenge that existing solutions can’t solve or struggle with their implementation, you can always reach out to us, and together we’ll develop something extraordinary that meets your specific needs.

As always, remember to share this article with your friends or employees to hopefully make their jobs just a little bit easier. Thanks for reading, and see you soon!