How to measure and report execution times in WebdriverIO?

I would like to measure and report the time some elements appear on a webpage after a certain action. So something like

describe('Load Time', () => {
  it('API Page', () => {
    browser.url('https://webdriver.io');
    browser.$('=API').waitForDisplayed();
    // measure time from here
    browser.$('=API').click();
    browser.$('=Introduction').waitForDisplayed();
    // until here
  });
});

Approach A that I tried:

Manually measure the time and write it to the console like this:

describe('Load Time', () => {
  it('API Page', () => {
    browser.url('https://webdriver.io');
    browser.$('=API').waitForDisplayed();
    const start = process.hrtime();
    browser.$('=API').click();
    browser.$('=Introduction').waitForDisplayed();
    const elapsedhrtime = process.hrtime(start);
    const elapsedmilliseconds = (elapsedhrtime[1] / 1000000) + elapsedhrtime[0] * 1000;
    console.log(elapsedmilliseconds);
  });
});

However, just printing it to the console makes it difficult to parse it for later analysis, especially when having a lot of similar test cases.

Approach B that I tried:

When using the JUnit reporter, there is a time attribute for each test case. However, of course, it measures the whole execution time of the test case. One idea I had was to do this

describe('Load Time', () => {
  beforeAll(() => {
    browser.url('https://webdriver.io');
    browser.$('=API').waitForDisplayed();
  });

  it('API Page', () => {
    browser.$('=API').click();
    browser.$('=Introduction').waitForDisplayed();
  });
});

Then I get only the relevant time in the JUnit report, but this only works with beforeAll and not with beforeEach, so I can not put multiple test cases in one suite.