Applying Data Statistics to Frontend Performance Detection and Optimization

The article, derived from a 2022 performance talk, introduces the internally developed performance testing platform "Baice" and demonstrates how statistical analysis can turn raw web‑page metrics into actionable scores and thresholds.

Performance Metrics Value

Web‑page rendering indicators like FCP, LCP, FID, TTI, and CLS are crucial for user experience, and quantifying them helps compare sites and prioritize optimizations.

1. Baice Platform Overview

Baice combines Chrome Lighthouse and Puppeteer for detection, adds local deployment for stability, ensures data security, allows custom metric definitions, and integrates with CI/CD pipelines.

Infrastructure

Frontend uses React, Antd, and ECharts; backend is built with NestJS, Sentry, and Helmet; scheduling and email notifications rely on node‑schedule and nodemailer; analysis modules provide scoring and interval models.

2. Metric Result Analysis

Detection results include detailed metric explanations and visualizations. Raw metric values are transformed into scores using two models: a scoring model based on six Z‑score intervals and an interval model derived from percentile thresholds.

Scoring Model & Interval Model

Using sample data from two sites, the scoring model maps LCP values to six zones (S‑E) via Z‑score calculations, while the interval model uses percentile data to define performance bands.

Data Quantification Process

The process follows five steps: problem definition & data collection, method selection, formula derivation, optimization & solving, and result generation. Data is gathered via HttpArchive and BigQuery, then cleaned, tested for normality, and transformed (log‑scale) to fit a normal distribution.

Statistical Modeling

Normal distribution parameters (μ = 7.66536, σ = 0.55905) are computed, and the normal distribution function is implemented as:

/**
 * 正态分布函数
 * @param x 数据
 * @param mean 平均数
 * @param stdev 标准差
 */
function normalDistributionfun(x, mean, stdev) {
    return (1 / (Math.sqrt(2 * Math.PI) * stdev)) * Math.exp(-1 * ((x - mean) * (x - mean)) / (2 * stdev * stdev));
}

/**
 * 方差计算函数
 * @param mean 平均数
 */
function stdCalc(mean) {
  let total = 0;
  for (let key in data)
    total += data[key];
  const meanVal = total / data.length;
  let SDprep = 0;
  for (let key in data)
    SDprep += Math.pow((parseFloat(data[key]) - meanVal), 2);
  const SDresult = Math.sqrt(SDprep / data.length);
  return SDresult;
}

Z‑Score Conversion

Scores are derived by converting metric deviations into Z‑scores (σ = 1) and mapping them to the six‑sigma intervals.

3. Repair & Optimization Tools

Baice provides manual, semi‑automatic, and fully automatic repair tools. Manual fixes suggest code changes; semi‑automatic tools inject optimized components (e.g., React Img, Vue‑LazyLoad) that serve WebP images when supported; fully automatic fixes use a Webpack plugin to convert images during build.

The Webpack plugin configuration is:

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',
  configureWebpack: {
    optimization: {
      minimizer: [
        new ImageminWebpWebpackPlugin({
          config: [{
            test: /\.(jpe?g|png)/,
            options: { quality: 75 }
          }],
          CDNUrl: ['https://sitecdn.xxx.com/']
        })
      ]
    }
  }
});

After optimization, image sizes can drop dramatically (e.g., from 2.7 MB PNG to 342 KB WebP), and LCP can improve from 2834 ms to 825 ms, moving the site from the B to the S scoring zone.

4. Future Iterations

Planned enhancements include CI/CD gatekeeping based on performance thresholds, RUM data collection via SDKs, anomaly detection using unsupervised machine learning, and additional one‑click optimization tools.

5. Team Introduction

The ZooTeam frontend group (~90 members) builds internal platforms, material systems, and performance tools, and invites collaboration via their public account and email.

Conclusion

Two statistical models—six‑sigma Z‑score scoring and percentile‑based interval thresholds—enable quantitative performance evaluation and guide automated optimizations, illustrating how data‑driven methods can enhance frontend reliability and user experience.