Automated Web Performance Optimization Analysis System – “Baice” Overview

How Page Performance Data Is Collected

The Baice system adopts synthetic monitoring, using Google Chrome's open‑source Lighthouse tool to obtain environment‑independent performance data.

Lighthouse Working Principle

Lighthouse consists of four main components: a driver that interacts with the Chrome Debugging Protocol, a collector that gathers page information and outputs an Artifact , an auditor that runs tests on the artifact and produces pass/fail/score results, and a category module that groups results into user‑facing reports and calculates the final score.

In short, the process is: establish connection → collect logs → analyze → generate report.

Differences from Standard Lighthouse

1) Using Puppeteer

Puppeteer is a Node library that provides a high‑level API to control Chromium via the DevTools protocol. Unlike Selenium or PhantomJS, its DOM operations run entirely in memory on the V8 engine without launching a visible browser, offering better compatibility and future support.

Running the following code obtains the viewport dimensions:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    };
  });
  console.log('Dimensions:', dimensions);
  await browser.close();
})();

We chose Puppeteer because it simplifies interaction with the DevTools protocol while providing sufficient built‑in interfaces for our needs.

2) Simulated Login Before Page Access

To test pages that require authentication, Baice adds a login step before performance measurement. Users are prompted for credentials only when the target URL requires login.

3) Storing Collected Data in a Database

Each test run is saved to a database, allowing us to organize data, track performance trends over time, and support subsequent statistical analysis.

How Page Performance Is Analyzed

Custom Metrics

We defined a set of weighted metrics and thresholds, extending Lighthouse's built‑in indicators (e.g., uses‑webp‑images, dom‑size, network‑requests) with company‑specific checks such as whether OSS images use compression suffixes.

Detection Models

Because different page types (traditional server‑rendered, React SPA, pre‑rendered Vue) have distinct performance characteristics, we introduced detection models. Each model links to a group of metrics with configurable weights and severity levels (error or warning).

Scoring Calculation

Metrics with higher weights deduct more points. Errors affect the total score, while warnings (e.g., missing Gzip) are reported but do not reduce the overall score.

Providing Optimization Suggestions and Trends

Optimization Advice

For every penalized check, Baice offers detailed reasons and concrete remediation steps.

Performance Trend Charts

The platform visualizes historical data, enabling developers to compare pre‑ and post‑refactor performance and quantify the impact of optimizations.

Conclusion

Baice delivers a comprehensive front‑end performance analysis service, establishing a set of detection standards tailored to the company's business scenarios. By collecting metrics, applying detection models, and generating actionable recommendations, it helps developers produce faster‑rendering, lower‑resource, and better‑experience web pages.

Future articles will continue to share Baice insights; follow the Zhengcai Cloud front‑end team on WeChat or Juejin for updates.

Recruitment

The front‑end team is hiring; interested candidates can email [email protected] for more information.