Monitor Performance with Calibre and Vercel

Calibre is a comprehensive monitoring platform that enables you to uncover and address performance issues. In this guide, you will learn how to receive performance Pull Request Reviews directly in your pull requests following Vercel Preview Deployments.

Step 1: Deploy with Vercel

To deploy your project with the Vercel for GitHub, make sure your created project has been pushed to a Git repository.

Create a new project into Vercel from GitHub.

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly main) will result in a Production Deployment.

WARNING: While Vercel supports GitHub, Bitbucket, and GitLab, Calibre Pull Request Reviews currently work with Vercel and GitHub only. GitLab and Bitbucket are not supported.

Step 2: Add Your Site to Calibre

To receive performance metrics and reports, start by creating a Calibre account and adding sites to monitor. You will be prompted to add a name, provide a URL, choose from 14 global test locations, and set a testing schedule.

Calibre allows you to check unlimited sites and pages. Each site can be connected to a repository to receive Pull Request Reviews.

If you’d like to learn more about how to successfully set up a performance monitoring system, read the Calibre Getting Started guide.

Step 3: Connect Calibre to GitHub

To enable Pull Request Reviews, from the Calibre Dashboard, go to Site → Settings → Integrations tab and click Install next to the GitHub logo. You will be redirected to GitHub to enable the integration for your organization.

Installing the Calibre GitHub integration.

Hint: Calibre requires access to commit statuses, deployments, checks, and pull requests. We strongly recommend only granting access to selected repositories you’re interested in tracking.

Select a Comparison Branch

After confirming the link between GitHub and Calibre, you will have to select a primary branch that will be the base for performance comparisons. This branch should be either deploying to production or a staging environment. In most cases, this might be the master branch.

Hint: For the most accurate results, make sure you compare two very similar environments. Some of the common differentiators producing unreliable results can be using a CDN on production, but not on Pull Request deployments, or the presence of ads or other third parties.

Confirming GitHub repository and the comparison branch for performance tests.

When the selected branch is successfully deployed, Calibre creates a deployment marker on your charts and takes a new snapshot of your site. That way, you always know how releases affect your performance metrics.

Create a Pull Request

Calibre will compare each Pull Request to the median of your site metrics since the last deploy. Each report highlights critical measurements (Lighthouse Performance Score, Time to Interactive and First Contentful Paint) overall and across Test Profiles to highlight top-level changes.

Viewing a Pull Request Review report in GitHub.

You can analyze each page to see browser previews for specific Test Profiles and most significant changes, including any Performance Budgets that have changed.