Performance comparison video

README.md

How to create a comparison video like this:

comparison-nometrics.mp4

Creating videos

You can create videos using one of the following methods

Local

Dependencies

1. Install browsertime npm install browsertime -g

2. Install browsertime dependencies to generate video and annotation

• brew install ffmpeg
• brew install imagemagick
• pip install Pillow

3. Install @better/api-testing-gateway to generate a loan file npm install @better/api-testing-gateway --save-dev

4. Add page-speed.js file into barrel/scripts. Copy file bellow and change PAGES_TO_CHECK const in page-speed.js with pages you want to perform the performance script.

Raw videos

// for performance test on local env
browsertime barrel/scripts/page-speed.js -n 1 --video —visualMetrics --videoParams.filmstripFullSize  --viewPort "1500x750"

// performance test on namespace deploy
// Set `TARGET_NAMESPACE` var with your NS deploy id
TARGET_NAMESPACE=barrel-22051 browsertime ./scripts/page-speed.js -n 1 --video --visualMetrics --videoParams.filmstripFullSize  --viewPort "1500x750"

Docker

Sitespeed.io also offers a way to create videos by creating a docker container. This container pulls images that have all the software needed to create videos and analytize them. The following script below will create videos for you using performance test on a namespace deploy (make sure to have Docker installed first):

 docker run -e TARGET_NAMESPACE='[your-ns-deploy]' --shm-size=1g --rm -v "$(pwd)":/browsertime sitespeedio/browsertime  --n 1 --video --visualMetrics  --videoParams.filmstripFullSize  --viewPort "1500x750" barrel/scripts/page-speed.js

If this script is run from the mortgage root, your videos will be saved in the following directory:

mortgage/browsertime-results/barrel-scripts-page-speed.js/[timestamp]/pages/[ns-deply-id]_better_ci_bettermg_com/my-loan/[loan-id]/

You'll use this directory for putting the videos together in the below instructions.

Putting videos together

Once script run is finished, barrel/browsertime-results/.-scripts-page-speed.js folder will be created with the performance test output.

1. Go to $timestamp/pages/localhost/$loafileid/$pagepath/data/video (example 2021-11-24T222723-0500/pages/localhost/1065975510/overview/data/video) folder.
2. Copy 1.mp4 file and place in some new folder (e.g /benchmark).
3. Rename to old.mp4.
4. Copy the other video you want to compare with to same folder with old.mp4 and rename it to new.mp4

Now it's time to generate a stack video with old.mp4 and new.mp4 together.

cd /benchmark
ffmpeg -i old.mp4 -i new.mp4 -filter_complex vstack output.mp4 -vsync 2

This command will generate a output.mp4.

Adding labels

If you want to add label to old.mp4 and new.mp4:

// Update `text=` values
ffmpeg -i output.mp4 -vf "drawtext=text='Label for old video':fontcolor=white:fontsize=100:box=1:boxcolor=black@0.5:boxborderw=5:x=100:y=400,drawtext=text='Label for new video':fontcolor=white:fontsize=100:box=1:boxcolor=black@0.5:boxborderw=5:x=100:y=h-th-200" -codec:a copy output-label.mp4

This command will output the final video, names output-lavel.mp4

If doesn't work, please let me know. I'll be happy to help you!

Troubleshooting

This script was tested on Node 14 with browsertime@14.11.0

References

https://apple.stackexchange.com/questions/238295/installing-ffmpeg-with-homebrew https://www.sitespeed.io/documentation/ https://www.sitespeed.io/documentation/sitespeed.io/installation/#docker https://www.sitespeed.io/documentation/sitespeed.io/scripting/#getting-correct-visual-metrics https://www.sitespeed.io/documentation/sitespeed.io/performance-budget/#override-per-url

page-speed.js

// Place this file in barrel/scripts folder

// EDIT this array with all `my-loan/*` routes you want to evaluate
const PAGES_TO_CHECK = ['overview-new'];

const { Loanfile, User, Session } = require('@better/api-testing-gateway');

const testFacts = require('./test-file-facts.json');

const MORTGAGE_ADMIN_FRONTEND = process.env.TARGET_NAMESPACE
  ? `https://${process.env.TARGET_NAMESPACE}.admin.ci.bettermg.com`
  : 'http://localhost:3020';
const MORTGAGE_BETTER_FRONTEND = process.env.TARGET_NAMESPACE
  ? `https://${process.env.TARGET_NAMESPACE}.better.ci.bettermg.com`
  : 'http://localhost:3020';
const TEST_ENDPOINT_JWT_SECRET = 'test';

module.exports = async function (context, commands) {
  context.log.info('Info logging from your script', MORTGAGE_ADMIN_FRONTEND);
  const user = await User.create({
    type: 'account',
    isAdmin: false,
    adminBaseUrl: MORTGAGE_ADMIN_FRONTEND,
    token: TEST_ENDPOINT_JWT_SECRET,
    borrowerProfile: false,
  });

  const {
    account: { email, password },
  } = user;

  const { cookie } = await Session.create({
    email,
    password,
    adminBaseUrl: MORTGAGE_ADMIN_FRONTEND,
  });

  context.log.info(`Creating loan file`);
  const { data: loanFile } = await Loanfile.create({
    adminBaseUrl: MORTGAGE_ADMIN_FRONTEND,
    jwt_secret: TEST_ENDPOINT_JWT_SECRET,
    attributes: {
      email,
      approvalStatus: 'Approved',
      loanMilestone: 'INITIAL_DOCUMENTATION',
      facts: testFacts,
    },
  });

  context.log.info(`Loan file created. ${loanFile.id}`);

  const { hostname } = new URL(MORTGAGE_BETTER_FRONTEND);

  for (let page of PAGES_TO_CHECK) {
    context.log.info(`Navigating to ${page}`);

    await commands.cdp.send('Network.setCookie', { ...cookie, domain: hostname });
    await commands.measure.start(`${MORTGAGE_BETTER_FRONTEND}/my-loan/${loanFile.id}/${page}`);
    // await commands.scroll.toBottom(250);

    // When the test is finished, clear the browser cache
    await commands.cache.clear();
    // Navigate to a blank page so you kind of start from scratch for the next URL
    await commands.navigate('about:blank');
  }
};

square.md

Add timestamp to a video:

ffmpeg -i prod-after.mov -vf "drawtext=text='timestamp: %{pts\:gmtime\:0\:%M\\\\\:%S}':fontcolor=white:fontsize=50:box=1:boxcolor=black@0.5:boxborderw=5:x=w-tw-100:y=h-th-100" -codec:a copy prod-after2.mov -y

Merge two videos

ffmpeg -i prod-before-second2.mov -i prod-after2.mov -filter_complex vstack output.mov -vsync 2 -y

Add before/after labels

ffmpeg -i output.mov -vf "drawtext=text='Before':fontcolor=white:fontsize=50:box=1:boxcolor=black@0.5:boxborderw=5:x=100:y=100,drawtext=text='After':fontcolor=white:fontsize=50:box=1:boxcolor=black@0.5:boxborderw=5:x=100:y=h-th-100" -codec:a copy output-label-timer2.mov -y