Get Started
Metrics
Chrome User Experience Report
Synthetic
CLI and API
Integrations
Account and Billing
Get Started
Metrics
Chrome User Experience Report
Synthetic
CLI and API
Integrations
Account and Billing
Vercel
Calibre has a built-in Vercel integration that allows monitoring performance in testing settings, before releasing changes to production. This article covers how to track Vercel deployments through Calibre’s GitHub integration.
1. Connect to your GitHub organisation
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.
Calibre requires access to commit statuses, deployments, checks, comments and pull requests. We strongly recommend granting access only to selected repositories you’re interested in tracking.
2. Select comparison branch
After confirming the link between GitHub and Calibre, 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.
3. Define deployment environments
Calibre will create 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.
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 testing.
4. Create a Pull Request
Calibre will compare each Pull Request to the median of site metrics since the last deploy. Each report highlights changes in Web Vitals and assets transferred:
You can also check if any Budgets changed status:
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 too.
Find more information about configuration options in the Pull Request Reviews documentation.