Simulated throttling for soft navigation steps: land it upstream or bridge it in the package

// Probe: what happens to a soft navigation step under the default simulated throttling.
import { writeFileSync } from 'node:fs';
import { startFlow } from 'lighthouse';
import puppeteer from 'puppeteer';
import { softNavigationConfig } from '../../packages/lighthouse-soft-navigation/dist/index.js';
import { startAppServer } from '../../packages/lighthouse-soft-navigation-e2e/fixtures/app-server.mjs';

const out = new URL('.', import.meta.url).pathname;
const server = await startAppServer();
const browser = await puppeteer.launch({
  headless: true,
  args: ['--no-sandbox', '--disable-setuid-sandbox'],
});

try {
  console.log('chrome', await browser.version());
  const page = await browser.newPage();
  const flow = await startFlow(page, { config: softNavigationConfig() });

  await flow.navigate(`${server.origin}/`);

  // Soft navigation with the default throttling method (simulate).
  await flow.navigate(async () => {
    await page.click('#products-link');
  });

  // Soft navigation with DevTools throttling, for comparison.
  await flow.navigate(
    async () => {
      await page.click('#home-link');
    },
    { throttlingMethod: 'devtools' },
  );

  // The first soft navigation again, with DevTools throttling: the reference for the simulation.
  await flow.navigate(
    async () => {
      await page.click('#products-link');
    },
    { throttlingMethod: 'devtools' },
  );

  const result = await flow.createFlowResult();
  writeFileSync(`${out}flow.json`, JSON.stringify(result));
  writeFileSync(
    `${out}artifacts.json`,
    JSON.stringify(flow.createArtifactsJson()),
  );

  for (const [i, step] of result.steps.entries()) {
    const { lhr } = step;
    console.log(
      `\n== step ${i}: ${step.name} | ${lhr.gatherMode} | ${lhr.configSettings.throttlingMethod} | perf ${lhr.categories.performance?.score}`,
    );
    for (const w of lhr.runWarnings) console.log('  warning:', w);
    const errors = new Map();
    for (const a of Object.values(lhr.audits)) {
      if (a.scoreDisplayMode !== 'error') continue;
      const list = errors.get(a.errorMessage) ?? [];
      list.push(a.id);
      errors.set(a.errorMessage, list);
    }
    for (const [message, ids] of errors)
      console.log(`  error "${message}": ${ids.join(', ')}`);
    for (const id of [
      'first-contentful-paint',
      'largest-contentful-paint',
      'total-blocking-time',
      'speed-index',
      'interactive',
    ]) {
      const a = lhr.audits[id];
      console.log(`  ${id}: ${a?.scoreDisplayMode} ${a?.numericValue ?? ''}`);
    }
  }
} finally {
  await browser.close();
  await server.close();
}

// Probe: what Lantern returns for a soft navigation once its graph has a root.
// The root is a synthetic, cached document request at SoftNavigationStart.
import { readFileSync } from 'node:fs';
import { LanternFirstContentfulPaint } from 'lighthouse/core/computed/metrics/lantern-first-contentful-paint.js';
import { LanternLargestContentfulPaint } from 'lighthouse/core/computed/metrics/lantern-largest-contentful-paint.js';
import { LanternInteractive } from 'lighthouse/core/computed/metrics/lantern-interactive.js';
import { LanternTotalBlockingTime } from 'lighthouse/core/computed/metrics/lantern-total-blocking-time.js';
import { LanternSpeedIndex } from 'lighthouse/core/computed/metrics/lantern-speed-index.js';

const dir = new URL('.', import.meta.url).pathname;
const { gatherSteps } = JSON.parse(readFileSync(`${dir}artifacts.json`, 'utf8'));
const flow = JSON.parse(readFileSync(`${dir}flow.json`, 'utf8'));
const stepIndex = Number(process.argv[2] ?? 1);
const { artifacts } = gatherSteps[stepIndex];

const start = artifacts.Trace.traceEvents.find(
  (e) => e.name === 'SoftNavigationStart',
);
const frameId = artifacts.DevtoolsLog.find(
  (e) => e.method === 'Network.requestWillBeSent',
).params.frameId;
const url = artifacts.URL.mainDocumentUrl;
const timestamp = start.ts / 1_000_000;
const requestId = 'synthetic-soft-navigation';

const synthetic = [
  {
    method: 'Network.requestWillBeSent',
    params: {
      requestId,
      loaderId: requestId,
      documentURL: url,
      request: {
        url,
        method: 'GET',
        headers: {},
        initialPriority: 'VeryHigh',
        mixedContentType: 'none',
        referrerPolicy: 'strict-origin-when-cross-origin',
      },
      timestamp,
      wallTime: 0,
      initiator: { type: 'other' },
      type: 'Document',
      frameId,
    },
  },
  {
    method: 'Network.responseReceived',
    params: {
      requestId,
      loaderId: requestId,
      timestamp,
      type: 'Document',
      frameId,
      response: {
        url,
        status: 200,
        statusText: 'OK',
        headers: {},
        mimeType: 'text/html',
        connectionReused: false,
        connectionId: 0,
        fromDiskCache: true,
        encodedDataLength: 0,
        protocol: 'http/1.1',
        securityState: 'neutral',
      },
    },
  },
  {
    method: 'Network.loadingFinished',
    params: { requestId, timestamp, encodedDataLength: 0 },
  },
];

const data = {
  trace: artifacts.Trace,
  devtoolsLog: process.env.NO_ROOT
    ? artifacts.DevtoolsLog
    : [...synthetic, ...artifacts.DevtoolsLog],
  gatherContext: artifacts.GatherContext,
  settings: { ...artifacts.settings, throttlingMethod: 'simulate' },
  URL: artifacts.URL,
  SourceMaps: artifacts.SourceMaps,
  HostDPR: artifacts.HostDPR,
  simulator: null,
};
const context = { computedCache: new Map() };

const describe = (graph) => {
  const nodes = [];
  graph.traverse((node) => {
    nodes.push(
      node.type === 'network'
        ? `net ${new URL(node.request.url).pathname}${node.request.fromDiskCache ? ' (synthetic root)' : ''}`
        : `cpu ${(node.duration / 1000).toFixed(1)}ms`,
    );
  });
  return nodes;
};

const lhr = flow.steps[stepIndex].lhr;
console.log(`step ${stepIndex}: ${lhr.finalDisplayedUrl}`);
console.log(
  'observed, unthrottled (ms from SoftNavigationStart):',
  JSON.stringify(
    Object.fromEntries(
      ['firstContentfulPaint', 'largestContentfulPaint'].map((k) => {
        const name =
          k === 'firstContentfulPaint'
            ? 'firstContentfulPaint'
            : 'largestContentfulPaint::Candidate';
        const events = artifacts.Trace.traceEvents.filter(
          (e) => e.name === name,
        );
        return [k, (events.at(-1).ts - start.ts) / 1000];
      }),
    ),
  ),
);

try {
  const fcp = await LanternFirstContentfulPaint.request(data, context);
  const lcp = await LanternLargestContentfulPaint.request(data, context);
  const tti = await LanternInteractive.request(data, context);
  const tbt = await LanternTotalBlockingTime.request(data, context);
  const si = await LanternSpeedIndex.request(data, context);

  for (const [name, m] of Object.entries({ fcp, lcp, tti, tbt, si })) {
    console.log(
      `${name}: ${m.timing.toFixed(1)} ms (optimistic ${m.optimisticEstimate.timeInMs.toFixed(1)}, pessimistic ${m.pessimisticEstimate.timeInMs.toFixed(1)})`,
    );
  }
  console.log('fcp optimistic graph :', describe(fcp.optimisticGraph));
  console.log('fcp pessimistic graph:', describe(fcp.pessimisticGraph));
  console.log('lcp optimistic graph :', describe(lcp.optimisticGraph));
  console.log('lcp pessimistic graph:', describe(lcp.pessimisticGraph));
  for (const [node, t] of lcp.pessimisticEstimate.nodeTimings) {
    console.log(
      `  lcp pessimistic timing: ${node.type === 'network' ? new URL(node.request.url).pathname : 'cpu'} ${t.startTime.toFixed(1)} → ${t.endTime.toFixed(1)}`,
    );
  }
} catch (error) {
  console.log('error:', error.message);
}