Allows you to detect and track site performance metrics
This WordPress plugin sends Core Web Vitals data to Google Analytics. It is compatible with Web Vitals Report
This plugin can be installed as a Composer dependency:
composer require xwp/site-performance-tracker
or by downloading a plugin ZIP file from the releases page.
The plugin must be configured by setting the site_performance_tracker_vitals
theme feature with your Analytics IDs. Collected data will be available in Web Vitals Report in a few days.
To send Web Vitals metrics to Google Analytics in a format compatible with the Web Vitals Report, enable the following theme support and passing in the ID:
Google Analytics (analytics.js) is supported, requires passing the ID using ga_id
:
add_theme_support( 'site_performance_tracker_vitals', array(
'ga_id' => 'UA-XXXXXXXX-Y',
) );
Global Site Tag is supported, requires passing the Analytics ID (starting with UA-
not GTM-
) using gtag_id
:
add_theme_support( 'site_performance_tracker_vitals', array(
'gtag_id' => 'UA-XXXXXXXX-Y',
) );
GA4 Analytics is supported, requires passing the ID using ga4_id
:
add_theme_support( 'site_performance_tracker_vitals', array(
'ga4_id' => 'G-XXXXXXXXXX',
) );
If you need to override the Google Analytics dimensions (defaults to dimensions1
through dimension3
) to store these under, pass them along on the add theme support initialisation:
add_theme_support( 'site_performance_tracker_vitals', array(
'gtag_id' => 'UA-XXXXXXXX-Y',
'measurementVersion' => 'dimension7',
'eventMeta' => 'dimension8',
'eventDebug' => 'dimension9',
) );
The following hooks can be added to a theme or a custom plugin to configure the plugin, alternatively you can configure the plugin through the settings screen, in case of duplication, plugin will take programmatically set settings. To confirm they were applied look for the webVitalsAnalyticsData
global variable in the page source.
The following filter can be used to limit the number of tracking events to a percentage of your traffic. For example, to limit the tracking events to 5% of requests, use the following logic:
add_filter( 'site_performance_tracker_chance', function() {
return 0.05;
} );
Programmatically disable the plugin.
add_filter( 'site_performance_tracker_disabled', '__return_true' );
Programmatically delay web vitals tracking to minimise impact on interactivity. By default, an idle callback request is postponed by 5000ms, a value which can be adjusted via a filter:
add_filter( 'site_performance_tracker_web_vitals_delay', function() {
return 1000;
} );
All contributions are welcome! Please create an issue for bugs and feature requests, and use pull requests for code contributions.
We use wp-env
for local development environment. See all the env:*
scripts in package.json
for supported commands and helpers.
webpack.config.js
configures how @wordpress/scripts
transforms JS and CSS assets during packaging.
We use the @wordpress/eslint-plugin/recommended-with-formatting
ruleset for JS linting since the Prettier integration is currently unreliable in @wordpress/scripts
.
configureGtag
callxwp/performance_tracker/render_mark
as an alternative way for adding
performance marks in the front-end.$default_entry_types
array is no longer defined as static.Please follow the contribution guide.
Created by XWP and contributors. Licensed under GNU General Public License v2.0 or later.