Skip to content

Commit

Permalink
Merge pull request #36 from xwp/add/disable-performance-observer
Browse files Browse the repository at this point in the history
Add disabling Performance Observer snippet
  • Loading branch information
mehigh authored May 28, 2021
2 parents cb6f1a9 + 811af33 commit a8e63a2
Show file tree
Hide file tree
Showing 6 changed files with 54 additions and 347 deletions.
95 changes: 11 additions & 84 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,7 @@

[![Build Status](https://travis-ci.com/xwp/site-performance-tracker.svg?branch=master)](https://travis-ci.com/xwp/site-performance-tracker)

This WordPress plugin allows you to detect and track site performance metrics.
It is using a browser's [`PerformanceObserver`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver)
API for measuring the metrics.

The plugin integrates with the Google Analytics and sends `timing` events on a few predefined events.
It is important though to identify the most significant elements on your page like a [hero element](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#first_meaningful_paint_and_hero_element_timing)
and add a custom performance marks in those locations in order to get the most meaningful metrics.

An inspiration for this plugin was a Google Developers guide around
[user-centric performance metrics](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics).
This WordPress plugin sends CWV data to Google Analytics. It is compatible with [Web Vitals Report](https://github.com/GoogleChromeLabs/web-vitals-report)

---

Expand All @@ -23,7 +14,7 @@ An inspiration for this plugin was a Google Developers guide around

## Installation

This plugin must be installed as [a Composer dependency](https://packagist.org/packages/xwp/site-performance-tracker):
This plugin can be installed as [a Composer dependency](https://packagist.org/packages/xwp/site-performance-tracker):

```
composer require xwp/site-performance-tracker
Expand All @@ -34,48 +25,6 @@ It relies on [PSR-4 autoloading](https://getcomposer.org/doc/04-schema.md#psr-4)

## Usage

By default the plugin will report the following metrics:

* [`PerformancePaintTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformancePaintTiming) events:
* `first-paint` (FP)
* `first-contentful-paint` [(FCP)](https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint)
* [`NavigationTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming) events:
* `domContentLoadedEventEnd`
* `domInteractive`
* `domComplete`
* [`PerformanceMark`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceMark) injected in the WordPress hooks:
* `mark_after_wp_head`
* `mark_before_wp_footer`
* `mark_after_wp_footer`

### Adding Custom Marks

You can add a mark in important locations on your page using the `xwp/performance_tracker/render_mark`
action and providing the mark slug like this:

```php
do_action( 'xwp/performance_tracker/render_mark', 'after_hero' );
```

This will add a new performance mark called `mark_after_hero`.

An alternative way to add a performance mark is to use the `the_site_performance_mark()`
function like this:

```php
if ( function_exists( 'the_site_performance_mark' ) ) {
the_site_performance_mark( 'after_hero' );
}
```

You can also get the JS code alone by using the `get_the_performance_mark()` function:

```php
if ( function_exists( 'get_the_performance_mark' ) ) {
$parformance_mark_js = get_the_performance_mark( 'after_hero' );
}
```

### Limit the number of events sent

Using the following filter you can send the events for a limited percentage of your traffic, this limits the performance metrics to be sent only for 5% of the traffic:
Expand All @@ -98,30 +47,6 @@ Programmatically disable the plugin.
apply_filters( 'site_performance_tracker_disabled', boolean $is_disabled = false );
```

##### Disable default hooks

This will prevent adding custom performance marks for `wp_head` and `wp_footer` hooks.

```php
apply_filters( 'site_performance_tracker_disable_default_hooks', boolean $disable_default_hooks = false );
```

##### Category name

Change the category name used when sending events to Google Analytics.

```php
apply_filters( 'site_performance_tracker_category_name', string $category_name = 'Performance Metrics' );
```

##### Entry types

Filter the [entry types](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/entryType) that are being measured byy PerformanceObserver.

```php
apply_filters( 'site_performance_tracker_event_types', array $entry_types = [ 'paint', 'navigation', 'mark' ] );
```

##### Enable web vitals tracking

To send web vitals to Google Analytics in a format compatible with the [Web Vitals Report](https://web-vitals-report.web.app/), enable the following theme support and passing in the ID, both UA- and G- ID formats are supported:
Expand All @@ -145,22 +70,24 @@ add_theme_support( 'site_performance_tracker_vitals', array(
) );
```

If you need to override the Google Analytics dimensions (defaults to dimensions1 through 6) to store these under, pass them along on the add theme support initialisation:
If you need to override the Google Analytics dimensions (defaults to dimensions1 through 3) to store these under, pass them along on the add theme support initialisation:
```php
add_theme_support( 'site_performance_tracker_vitals', array(
'gtag_id' => 'UA-XXXXXXXX-Y',
'measurementVersion' => 'dimension7',
'clientId' => 'dimension8',
'segments' => 'dimension9',
'config' => 'dimension10',
'eventMeta' => 'dimension11',
'eventDebug' => 'dimension12',
'eventMeta' => 'dimension8',
'eventDebug' => 'dimension9',
) );
```

## Changelog

### 0.7 - May 26, 2021
#### 0.8 - May 28, 2021

* Remove Performance Observer functionality
* Code cleanup

#### 0.7 - May 26, 2021

* Add support for Google Analytics 4.

Expand Down
2 changes: 1 addition & 1 deletion js/dist/module/web-vitals-analytics.asset.php
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('wp-polyfill'), 'version' => '3341ad667815cda20a9427ada8f97aee');
<?php return array('dependencies' => array('wp-polyfill'), 'version' => '0e7c85f1a6e193be6c642a2b62797d76');
2 changes: 1 addition & 1 deletion js/dist/module/web-vitals-analytics.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit a8e63a2

Please sign in to comment.