Vercel

The Calibre Vercel integration allows you to leverage Pull Request Reviews without additional development work.

Calibre Pull Request Review triggered by a Vercel Deployment Preview

Connect to your GitHub organisation

To enable Pull Request Reviews, go to Site → Settings → Integrations tab and click Add to a repository in the GitHub section. You will be redirected to GitHub to enable the integration for your organisation.

Connecting Calibre to a selected repository

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

Select 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 main branch.

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.

Define deployment environments

Calibre will create Pull Request Review tests from any GitHub deployment status. If your repository is creating several Vercel deployment environments in Pull Requests (e.g. in monorepo scenarios or when both Site and Storybook preview is created) use Custom deployment environments option and specify both preview and production environment in a comma-separated list:

Setting up custom environments for Pull Request Reviews

Caution

Vercel uses en dash (–) in deployment environment names instead of hyphens (-). To avoid errors in testing, use the en dash when typing the deployment environment name, or copy it directly from GitHub. You can find deployment environments in each PR or see all environments on the main page of the repository.

You can also select or ignore specific branches from your testing.

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 (Largest Contentful Paint, Cumulative Layout Shift and Total Blocking Time) overall and across Test Profiles to highlight top-level changes.

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

Calibre Pull Request Reviews showing most significant changes per page

Pull Request Reviews provide a helpful performance overview directly in GitHub, with the ability to drill down into metrics further in the Calibre interface.

Calibre does not automatically test draft Pull Requests. Test Draft Pull Requests by marking them as Ready for Review or using a Pull Request command. You can also re-run a Pull Request Review by closing and re-opening your Pull Request.

When your Pull Request is merged and 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.