Mini WordPress plugin that uses https://github.com/GoogleChrome/web-vitals to log Core Web Vitals and other key client metrics to the browser console

web-vitals-logger.php

<?php
/**
 * Plugin Name: Web Vitals Logger
 * Plugin URI: https://gist.github.com/felixarntz/112c5dcb72ca3af86557550979a5e9dd
 * Description: Logs Core Web Vitals and other useful client-side metrics in the browser console.
 * Requires at least: 6.1
 * Requires PHP: 5.6
 * Version: 0.1.0
 * Author: Felix Arntz
 * Author URI: https://felix-arntz.me
 * License: GPLv2 or later
 * License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
 * Text Domain: web-vitals-logger
 *
 * @package  web-vitals-logger
 */

/**
 * Outputs a script to expose Core Web Vitals and other important client metrics in the console.
 *
 * @see https://github.com/GoogleChrome/web-vitals
 */
function wvl_measure_client_web_vitals() {
	$js  = 'import {onCLS, onFCP, onFID, onINP, onLCP, onTTFB } from "https://unpkg.com/web-vitals@3?module";';
	$js .= 'const printMetric = ( { name, delta } ) => console.log( `Web-Vitals: ${ name }: ${ name === "CLS" ? delta * 1000 : delta }` );';
	$js .= 'onCLS(printMetric);';
	$js .= 'onFCP(printMetric);';
	$js .= 'onFID(printMetric);';
	$js .= 'onINP(printMetric);';
	$js .= 'onLCP(printMetric);';
	$js .= 'onTTFB(printMetric);';

	wp_print_inline_script_tag( $js, array( 'type' => 'module' ) );
}
add_action( 'wp_head', 'wvl_measure_client_web_vitals' );