--- title: Monitor Frontend Performance with DebugBear and Vercel description: Automatically test each Vercel deployment and report performance changes to GitHub. url: /kb/guide/monitor-frontend-performance-with-debugbear-and-vercel canonical_url: "https://vercel.com/kb/guide/monitor-frontend-performance-with-debugbear-and-vercel" published: 2025-11-03 last_updated: 2025-11-10 authors: Sam Ko related: - /docs/concepts/deployments/preview-deployments - /docs/concepts/deployments/git - /docs/concepts/deployments/environments install_vercel_plugin: npx plugins add vercel/vercel-plugin --- ## Related pages > **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below. - [Git Integrations](https://vercel.com/docs/git?from=related) — Vercel allows for automatic deployments on every branch push and merges onto the production branch of your GitHub, GitLa - [Bitbucket](https://vercel.com/docs/git/vercel-for-bitbucket?from=related) — ​Vercel for Bitbucket automatically deploys your Bitbucket projects with Vercel, providing Preview Deployment URLs, and - [Deployments](https://vercel.com/docs/deployments?from=related) — Learn how to create and manage deployments on Vercel. - [GitLab](https://vercel.com/docs/git/vercel-for-gitlab?from=related) — ​Vercel for GitLab automatically deploys your GitLab projects with Vercel, providing Preview Deployment URLs, and automa - [Monitor Performance with Calibre and Vercel](https://vercel.com/kb/guide/monitoring-performance-with-calibre-and-vercel?from=related) — Receive performance reports directly in your GitHub Pull Requests, following a Vercel deployment. - [How can I use Bitbucket Pipelines with Vercel?](https://vercel.com/kb/guide/how-can-i-use-bitbucket-pipelines-with-vercel?from=related) — Learn how to use Bitbucket Pipelines to deploy to Vercel including support for Bitbucket Data Center. - [Can you deploy based on tags/releases on Vercel?](https://vercel.com/kb/guide/can-you-deploy-based-on-tags-releases-on-vercel?from=related) — Learn how to deploy based on tags/releases on Vercel. - [How can I use GitLab Pipelines with Vercel?](https://vercel.com/kb/guide/how-can-i-use-gitlab-pipelines-with-vercel?from=related) — Learn how to use GitLab Pipelines to deploy to Vercel including support for self-managed GitLab. - [How can I use CircleCI with Vercel?](https://vercel.com/kb/guide/how-can-i-use-circleci-with-vercel?from=related) — Learn how to use CircleCI to deploy to Vercel with custom CI/CD. Full cross-link map for this page: [/kb/guide/monitor-frontend-performance-with-debugbear-and-vercel.graph.md](/kb/guide/monitor-frontend-performance-with-debugbear-and-vercel.graph.md) [DebugBear](https://www.debugbear.com/) is a website monitoring tool that helps developers keep track of site performance and [Lighthouse](https://developers.google.com/web/tools/lighthouse) scores. This guide walks you through setting up continuous monitoring for your production sites, as well as automatic testing of every [Preview Deployment](https://vercel.com/docs/concepts/deployments/preview-deployments#). ## Step 1: Import and Deploy with Vercel To deploy your project with [Vercel for Git](https://vercel.com/docs/concepts/deployments/git), make sure it has been pushed to a Git repository. Import the project into Vercel using your [Git provider](https://vercel.com/import/git) of choice. After your project has been imported, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/concepts/deployments/preview-deployments#), and all changes made to the [Production Branch](https://vercel.com/docs/concepts/deployments/git#production-branch) (commonly "main") will result in a [Production Deployment](https://vercel.com/docs/concepts/deployments/environments#production). ## Step 2: Install the DebugBear Vercel Integration With your project set up with Vercel, install the [DebugBear integration](https://vercel.com/integrations/debugbear) from the [Vercel Integrations Marketplace](https://vercel.com/integrations) to add it to your account. Select the account or team your deployed project belongs to. You will then be redirected to DebugBear. ## Step 3: Set Up a DebugBear Account If you do not have a DebugBear account already, click **Create account** on DebugBear to automatically sign up with your Vercel email address. Otherwise, you can continue with your existing account. When logged in with DebugBear, select which of your Vercel projects you would like to monitor and click **Set up**. DebugBear will automatically start monitoring your project's homepage and up to 3 other pages on your site. > **Note:** It may take a few minutes for reports to come in. By default these pages are tested once a day from a US-based server, but you can change these settings later. Additionally, you can add any extra pages you would like to monitor. ## Step 4: Push Changes on a Branch Make some changes to your project, then push the branch to your git repository. Vercel will create a [Preview Deployment](https://vercel.com/docs/concepts/deployments/preview-deployments#), and DebugBear will test the performance of the deployed site. You can see test results for your deployment in any of these places: - The integration configuration page on Vercel - The project Builds tab on DebugBear - Posted to a [Slack](https://www.debugbear.com/docs/slack-integration#api-builds) channel - Or, on GitHub (described in [the next section](https://vercel.com/guides/monitor-frontend-performance-with-debugbear-and-vercel#option:-sending-reports-to-github)) > **Hint:** If you see a drop in your SEO score, this may be because DebugBear is comparing a preview deployment, that's blocked from indexing, to the production site. ### Selecting Pages to Test You can [configure](https://www.debugbear.com/docs/zeit#url-filter) which of your monitored pages should be tested after each deployment. Normally you don't need to change anything here, but if you use a custom deployment suffix other than `now.sh` you need to specify it. ### Build Statuses By default, all DebugBear tests will finish in a `neutral` state. To get meaningful `pass` or `failure` results you need to set up a [performance budget](https://www.debugbear.com/docs/performance-budgets) that defines metric thresholds that shouldn't be exceeded. ## Send Reports to GitHub If you use GitHub, DebugBear can report test results directly on your pull request. You need to [install the DebugBear GitHub app](https://www.debugbear.com/docs/github-integration). 1. Go to the **Integrations** tab of your DebugBear project and connect your user account to GitHub. 2. Click **Install Github integration** and grant access to the repository that contains your Vercel site. After your next deployment, you will see one commit status on your GitHub pull request for each tested page.