Understanding how users interact with your website is essential for its continued success. Does it load fast? Is it responsive? Is it visually stable? Collecting, processing, and analyzing these statistics for your website is an important practice. As this can help you grow both with traffic and revenue.
Vercel collects Web Vitals metrics from the actual devices of your visitors. These metrics help calculate a Real Experience Score (RES) for you, reflecting how well your application is performing in the wild. Vercel calculates RES using the real data points that are collected from the devices of the actual users of your website.
With the Analytics view, you get insights about the score and the individual metrics without modifying your code or leaving the dashboard. You can analyze your site performance parameters without adding new scripts or headers.
Enabling Vercel Analytics does not impact your site performance. Instead, it helps collect valuable data for you to learn how well your site is performing for end-users.
Analytics are disabled by default. Personal Accounts can enable Analytics on a single project at a time. To enable Analytics on multiple projects, create a Team.
To enable Analytics, select a project from your dashboard and navigate to the Analytics tab. Here, you'll be prompted to click the Enable button to activate the Analytics.
Then you are asked to Redeploy your app to start collecting data. The first data is available immediately after you get the next visit to your website.
Your app is ready to collect Analytics after a successful redeploy. If you don't find any data within 30 seconds, it's advised to check for any content blockers if used.
Once the Vercel Analytics page is initialized, you'll see an interface where the collected data can be filtered and viewed based on the following:
- Device type: Mobile, Tablet, Desktop
- Percentile of data for a certain percentage of users; P75, P90, P95, P99
- Reporting window for data points, from Last Day till Last 28 days (values vary on the account type)
Analytics also shows a list of all the Page Names and URLs visited by your app users. You can sort these pages based on Data Points, Real Experience Score, and Page Name, where Page Names are the actual pages you've built, and URLs are the paths request by the visitor.
For a Page or URL to appear on the Vercel Analytics page, a minimum of 10 data points is required in the time range you're looking at. It is important to note that only fresh page loads report Web Vitals. Client-side page transitions will not.
When collecting data points for every visit of your application, the Analytics feature will send requests directly from the visitor's browser to Vercel's servers, where the data points are processed and stored.
Suppose you've configured a Content Security Policy in your application. In that case, you need to ensure that the Domain
vitals.vercel-insights.com is allowed for outgoing requests (as described in this section, the client-side bundle will report Analytics via network requests).
If your application is deployed to Vercel, you can navigate to the Analytics tab and confirm by clicking the Enable button.
Once you've enabled the feature and redeployed your Production Deployment, data points will appear within 30 minutes, depending on the traffic your project receives. Preview deployments will also collect analytics when enabled.
You can then navigate to the Analytics tab of the project, where you'll be presented with a configuration property that you will place in your config file.
Once you've configured this property, enable the feature and wait for the data points to appear.
Vercel Analytics supports Next.js, Nuxt.js, and Gatsby with zero configuration through build plugins. You can use Vercel Analytics with any frontend framework or project through the Vercel Analytics API as well.
Vercel Analytics supports Next.js 10+ with zero-configuration required. Projects on Next.js 9 or earlier are required to upgrade to enable Vercel Analytics.
Vercel automatically configures and adds
buildModules section of your
nuxt.config.js file. You do not need to add this plugin manually. Once redeployed, your application will automatically send vitals to Vercel Analytics.
Vercel automatically configures and adds
gatsby-config.js file. You do not need to add this plugin manually. Once redeployed, your application will automatically send vitals to Vercel Analytics.