Skip to main content

Tracking Your Page Performance

Lighthouse​

You can continuously measure how your web perform in CI by using Lighthouse. We've built Layar and themis to simplify the measurement steps and have easily visible dashboard that you can share to anyone. In TVLK5 all of this is abstracted even further so you only need to do 2 easy steps.

First you need to create threshold (threshold.js) file in your service root directory.

// packages/sample/app-desktop/threshold.js
const HomepageState = require('./mock-state/localhost:9200@id-id@sample.json');

module.exports = {
  // url you want to test
  '/id-id/sample': {
    // name in layar
    name: 'Sample homepage',
    // product identifier
    tags: ['core'],
    // filled by PM
    pageImportance: 1,
    // performance budgeting features
    threshold: {
      performanceScore: {
        // below this value will show warning in layar
        warn: 10,
        // below this value will fail the build
        fail: 5,
      },
    },
  },
};

Recording mock data​

  • Run pnpm record on root or set RECORD_MOCK=true env variable
  • Open your page in incognito (so it will fetch and record the /v2/user/whoami and /v2/corporate/userinfo APIs)
  • Commit the written mock-data folder
  • Push your PR
  • Ensure that perf-test is green (you might need to resolve some client-side errors)

Telling our CI that your service has performance test​

You need to set runPerformanceTest to true to enable your product performance test.

@Library('shared@v0.1.2') _

buildTvlk5(
  name: "webxxx",
  package: "@traveloka/webxxx-desktop",
  dir: "packages/xxx",
  uploadAssets: false,
  runPerformanceTest: false,
)

After you commit these, you'll see that in your CI, it will automatically includes reporting and performance budgeting. If you want to add more pages to test you can add new keys in threshold file.