PostHog can automatically capture core web vitals like largest contentful paint, first input delay, cumulative layout shift, and first contentful paint. This you means you don't need to manually add web vitals logging.
How to enable web vitals autocapture
Go to your Autocapture & heatmaps settings. Then, in the Web vitals autocapture section, click Enable.
Note: Web vitals autocapture is separate from our regular autocapture feature. Web vitals can be captured regardless of whether autocapture is enabled.
Once enabled, web vitals are captured under the $web_vitals event name. These events include properties for each of the metrics like $web_vitals_FCP_value and $web_vitals_FCP_event.
You can choose which metrics to capture by using the toggles.
Dashboard template
Once you've enabled the integration, we've created a dashboard template to help you quickly set up relevant insights.
To create your own dashboard from a template:
- Go the dashboard tab in PostHog.
- Click the New dashboard button in the top right.
- Select Web vitals from the list of templates.
Events captured
The SDK attempts to send as many of the available metrics as possible in each $web_vitals event. By default, we wait up to 5 seconds since the page load or last $web_vitals event to try and catch all four metrics in one event. See the section on configuring web vitals capture to change this behaviour.
Metrics are made available when the web vitals library triggers them:
- FCP and LCP are relative to a page being rendered and are made available relatively soon after loading a page.
- INP and CLS are measures across the lifecycle of a page and don't have a fixed time they become available.
Configuring web vitals autocapture
You can provide a client side config to tune web vitals autocapture. These are set on the capture_performance key.
| Attribute | Description |
|---|---|
__web_vitals_max_valuedefault: 15 minutes | We observe very large values reported by the Chrome web vitals library. These outliers are likely not real, useful values, and we exclude them. You can set this to 0 in order to include all values |
web_vitals_allowed_metricsdefault: ['LCP', 'CLS', 'FCP', 'INP' ] | By default all 4 metrics are captured. You can set this config to restrict which metrics are captured. e.g. ['CLS', 'FCP'] to only capture those two metrics. This does not override whether the capture is enabled |
web_vitals_delayed_flush_msdefault: 5000 | We delay flushing web vitals metrics to reduce the number of events we send. This is the maximum time we will wait before sending the metrics. |