It's essential for the continued success of your application to understand how users are experiencing it: Does it load fast? Is it responsive? Is it visually stable?

Vercel makes this process easy by collecting metrics from your user's devices and calculating a Real Experience Score for you – which reflects how well your application is performing in the wild.

With the Analytics view, you gain insight into the score and the individual metrics without having to modify your code or leave the dashboard.

Note: It's recommended, but Analytics doesn't require hosting your application on Vercel.

An example of the Analytics tab on the project view.

Enabling the Feature

Analytics are disabled by default, but can be enabled on a per-project basis by navigating to the Analytics tab of any project in your dashboard.

From there, you will then be prompted to enable the feature and take different actions depending on whether your application is hosted on Vercel or not.

Supported Frameworks

Next.js (v10+)

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.

Gatsby (v2+)

Vercel automatically configures and adds gatsby-plugin-vercel to your gatsby-config.js file. You do not need to add this plugin manually. Once redeployed, your application will automatically send vitals to Vercel Analytics.

Hosted on Vercel

If your application is being deployed to Vercel, enabling the Analytics feature is only a matter of navigating to the Analytics tab of the project and confirming that you'd like to enable it in the prompt that shows.

Afterward, you will be offered to redeploy your current Production Deployment to apply the automatic data point tracking to the client-side bundle of your application.

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.

Self-Hosted

If your application isn't being deployed to Vercel, you can still use Analytics.

To get started, create a new Project from a template. Afterward, navigate to the Domains page in the project settings and remove the only remaining domain.

You can then navigate to the Analytics tab of the project and you'll be presented with a configuration property that you need to place in your config file.

Once you've configured the property, enable the feature and wait for the data points to appear.

Note: You can only use Analytics with an application that's hosted elsewhere if you're using the Pro or Enterprise plan.

Content Security Policy

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 then processed and stored.

If you've configured a Content Security Policy in your application, you therefore need to make sure that the Domain vitals.vercel-analytics.com is allowed for outgoing requests (as described in this section, the client-side bundle will report Analytics via network requests).

Pricing

Depending on your pricing plan, different fees apply:

Hobby
Pro
Enterprise
Base Fee per Project per Month
None
$10 USD
Custom
Fee per 10,000 Data Points (Hosted on Vercel)
None
$0.65 USD
Custom
Fee per 10,000 Data Points (Self-Hosted)
Not Applicable
$0.95 USD
Custom
Free Data Points per Day
100
100
Custom

If you're using Analytics on the Pro plan while on a trial, you will not be charged for any of the above items during the time of the trial.

Only once the trial ends, you will be charged for the data points collected during the trial and the base fee.

Prorating

When enabling Analytics, you will immediately be charged the base fee mentioned above. However, you will only be charged for the remaining time in your billing cycle. For example, if there are 10 days remaining in your current billing cycle, that's roughly 30% of your billing cycle – so you will only pay about $3 USD. For every new billing cycle after that, you will be charged the full $10 USD in the beginning of the cycle.

After canceling Analytics, it will continue to show data points that were already collected until the end of the current billing cycle (however, no new data will be recorded). You won't be refunded any amounts already paid. Once the billing cycle is over, Analytics will automatically turn off and you will lose access to existing data.

If you decide to re-enable the feature after having canceled it, you won't be charged at the time of enabling it. Instead, you will normally be charged the \$10 USD in the beginning of every upcoming billing cycle.

Limits

Once you've enabled Analytics, different limitations are applied depending on your plan:

Hobby
Pro
Enterprise
Sample Rate
100%
100%
Custom
Reporting Window for Data Points
1 Day
7 Days
28 Days
Maximum Number of Data Points per Day
100
None
None

To use a larger reporting window and unlock more data points per day, make sure to deploy your project to a Vercel Team on the Pro plan.

For an even larger reporting window and even more data points, please reach out to our Sales team for a custom Enterprise plan.

Note: On the Hobby plan, Analytics can only be enabled on a single Vercel project.

Sample Rate

By default, all incoming data points are used to calculate the scores you're being presented with on the Analytics view.

Enterprise customers, however, may wish to decrease the sample rate to less than 100% in order to reduce costs (as Vercel charges a fee per 10,000 data points, as mentioned in the Pricing section above).

Reporting Window for Data Points

If the Analytics feature is enabled for a project on a Personal Account, you can only see the last 24 hours of data points.

For Teams on the Pro plan, you can choose between the last 24 hours, the last 3 days, and the last 7 days.

Lastly, for Teams on the Enterprise plan, the same options as for Teams on the Pro plan are offered – plus the last 14 or 28 days.

Maximum Number of Data Points per Day

Depending on your plan, a maximum limit of data points might apply per day (as mentioned in the table above). Once that limit is reached, no more data points will be recorded until the current day has passed. On the next day, the recording will resume.

During the time that recording is paused, you can still access all existing data points.

Metrics

With the Analytics view, you'll gain insight into many useful metrics that will let you improve the end-user experience of your project through polishing its technical implementation.

Real Experience Score

Based on all the metrics mentioned below, Vercel calculates the Real Experience Score:

An example of a Real Experience Score.

While other performance measuring tools like Lighthouse estimate your user's experience by running a simulation in a lab, Vercel's Real Experience Score is calculated using real data points collected from the devices of the actual users of your application.

Because of that, it provides a real grade of how users actually experience what you've built.

This enables a continuous stream of performance measurements, over time, integrated into your development workflow. Using our dashboard, you can easily correlate changes in performance to new deployments:

An example of a Real Experience Score over time.

Web Vitals

Among them, for example, are Web Vitals — a collection of metrics established by Google in conjunction with the Web Performance Working Group that track the loading speed, responsiveness, and visual stability of your web application.

First Contentful Paint (FCP)

Measures loading speed, or when the first content of the page has been displayed. For example, when opening a link of a social media profile – the amount of time that passes before the first pieces of information about the user whose profile I'm looking at shows up.

Learn more about how this metric is retrieved and how you can improve it here.

Largest Contentful Paint (LCP)

Measures perceived loading speed, or when all the page's content has been displayed. For example, when I open a link to buy a pair of sneakers — the amount of time that passes before I see my sneakers, their price, and the "Add to Cart" button is LCP.

Learn more about how this metric is retrieved and how you can improve it here.

Cumulative Layout Shift (CLS)

Measures visual stability, or how much elements move after being displayed to the user. For example, we've all experienced the frustration of trying to tap a button that moved because an image loaded late — that's CLS.

Learn more about how this metric is retrieved and how you can improve it here.

First Input Delay (FID)

Measures page responsiveness, or how long your users wait to see the reaction of their first interaction with the page. For example, the amount of time between me clicking "Add to Cart" and the number of items in my cart incrementing is FID.

Learn more about how this metric is retrieved and how you can improve it here.

How the Scores Are Determined

For each of the metrics that are collected (such as First Contentful Paint), a metric score between 0 and 100 is calculated by checking into which grade the raw metric value (such as 1.87 seconds, in the case of FCP) falls based on a log-normal distribution derived from real website performance data on HTTP Archive.

In the case of Largest Contentful Paint, for example, HTTP Archive shows about 1,220ms for the top-performing sites, which allows Vercel to map that metric value to a score of 99. Based on this piece of information and the LCP metric value of your own project, Vercel can then calculate your project's LCP score, for example.

Based on the scores of all the individual metrics (which are calculated as described above), Vercel then calculates a weighted average: The Real Experience Score.

The following weightings were chosen by Vercel to provide a ideal representation of the user's perception of performance on a Mobile device (includes the score anchors retrieved from HTTP Archive, as described above):

Metric
Weight
Score of 50
Score of 90
FCP
20%
4s
2.3s
LCP
35%
4s
2.5s
FID
30%
300ms
100ms
CLS
15%
0.25
0.10

For Desktop devices, however, the following ones are considered instead:

Metric
Weight
Score of 50
Score of 90
FCP
20%
1.6s
900ms
LCP
35%
2.4s
1.2s
FID
30%
300ms
100ms
CLS
15%
0.25
0.10

How the Scores Are Color-Coded

The individual metric scores and the Real Experience Score are colored according to the following ranges:

  • 0 to 49 (red): Poor
  • 50 to 89 (orange): Needs Improvement
  • 90 to 100 (green): Good

In order to provide your users with an ideal experience, you should strive for a good Real Experience Score (90 to 100).

However, you are not expected to achieve a "perfect" score of 100, as that's extremely challenging. Taking a score from 99 to 100, for example, requires as much metric improvement as going from 90 to 94 (due to diminishing returns).

Privacy

To ensure that the Analytics feature can be used despite many different regulatory limitations around the world, we've designed it in such a way that it provides you with information without being tied to, or associated with, any individual visitor or IP address.

The recording of data points is anonymous and the Analytics feature does not collect or store information that would enable us to reconstruct a browsing session across pages or identify a user.

The following information is stored with every data point:

Collected Value
Example Value
Page
/blog/[slug]
URL
/blog/nextjs-10
Network Speed
4g (or slow-2g, 2g, 3g)
Browser
Chrome 86 (Blink)
Device Type
Mobile (or Desktop/Tablet)
Device OS
Android 10
Country (ISO 3166-1 alpha-2)
US
Web Vital
FCP 1.0s
Server-Received Event Time
2020-10-29 09:06:30

Please see our Privacy Notice for more information, including how Vercel Analytics complies with the GDPR. Vercel acts as a data processor or service provider with respect to this information collected through the Analytics feature.

How the Data Points Are Tracked

Once you've followed the dashboard's instructions for enabling Analytics, you will have automatically redeployed your current Production Deployment, which is done to inject a script into the client-side bundle of your application.

This script will retrieve the visitor's Web Vitals by invoking native browser APIs and then report them to Vercel's servers on every page load.

Only fresh page loads report Web Vitals. Client-side page transitions will not. As an example, typing vercel.com/blog into your address bar and hitting enter will send them. Clicking on a blog post, however, will not.


Last Edited on October 24th 2020