A performance logger plugin for Franklin that will output key performance metrics (core web vitals and a few others) to console. It is meant to be used with this forked Franklin Project Boilerplate that includes a plugin system.

The performance logger won't be as accurate as proper solutions like https://pagespeed.web.dev/ or other services that can report stable lab data, or realistic field metrics, but it does help highlight key improvement areas during development.

See it in action at https://plugins-perflogger--helix-project-boilerplate--ramboz.hlx.live/.

npm run franklin:plugin:add --name=perflogger [email protected]:ramboz/franklin-plugin-perflogger.git

You can then later update it from the source again via:

npm run franklin:plugin:update --name=perflogger

git subtree add --squash --prefix plugins/perflogger [email protected]:ramboz/franklin-plugin-perflogger.git main

You can then later update it from the source again via:

git subtree pull --squash --prefix plugins/perflogger [email protected]:ramboz/franklin-plugin-perflogger.git main

The easiest is to load the plugin via the withPlugin method provided in this forked Franklin Project Boilerplate.

import { withPlugin } from './lib-franklin.js';

...

await withPlugin('/plugins/perflogger/index.js', {
  condition: () => window.location.hostname === 'localhost' || window.location.origin.endsWith('.hlx.page')
});

Alternatively, you can also just directly use this as:

if (window.location.hostname === 'localhost' || window.location.origin.endsWith('.hlx.page')) {
  const logger = await import('/plugins/perflogger/index.js');
  logger.init(options);
}

by making sure you place the init call as close to the beginning of your script as possible, so you don't miss the events that are tracked.

You'd use those as follows:

await withPlugin('/plugins/perflogger/index.js', {
  debug: true,
  cls: true,
  dcl: true,
  fcp: true,
  fid: true,
  fp: true,
  lcp: true,
  resources: true,
  tbt: true,
});