Boosting BI Dashboard Performance: Proven Front‑End Optimization Strategies

Background

As the platform grew with rapid iterations and increasing user numbers, code accumulation caused loading performance to degrade, negatively affecting user experience and leading to churn. The article shares systematic strategies for improving home‑page performance and maintaining long‑term efficiency.

Understanding Performance Metrics

The team focuses on document loading (TTFB, DCL) and content rendering (LCP, FCP, FMP) metrics, emphasizing Google’s core user‑experience indicators LCP, INP, and CLS. For the BI platform, the primary metrics are TTFB, FCP, and LCP, covering the network request to main content load.

Current Home Page Performance

The home page suffers from a high LCP of 3.3 s (exceeding the 2.5 s benchmark) and low Lighthouse scores, indicating overall poor performance.

Analyzing Performance Issues

Network Panel Findings

Large entry file blocks other resources.

Low‑priority resources block high‑priority ones.

Micro‑frontend sub‑apps load non‑critical resources synchronously.

HTTP/1.1 protocol limits transfer efficiency.

API responses contain excessive redundant data.

Performance Panel Findings

Prolonged FPS drops indicate animation lag.

High CPU usage.

Multiple long tasks block rendering.

Lighthouse Findings

Numerous long tasks.

Render‑blocking low‑priority resources.

Excessive DOM nodes causing layout costs.

Unoptimized image formats.

Unused CSS/JS code.

Optimization Practices

Time Optimization (Network, Loading, Rendering)

Network protocol upgrade : Switch from HTTP/1.1 to HTTP/2 to enable multiplexing, binary transfer, and header compression.

Remove unnecessary preload : Reduce preloading of non‑critical fonts and assets.

Request performance : Compress API payloads from 3.1 MB to ~500 KB and use async requests.

Resource Loading Optimization

Code splitting and on‑demand loading of UI libraries (ECharts, Ant‑Design‑Vue icons).

// Before optimization: load all modules synchronously
import * as echarts from 'echarts/core';
import { XXXChart } from 'echarts/charts';
import { XXXComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([XXXChart, XXXComponent, CanvasRenderer]);

// After optimization: load modules on demand
async function initEcharts(chartType){
  const echarts = await import('echarts/core');
  const { XXXChart } = await import('echarts/charts');
  const { XXXComponent } = await import('echarts/components');
  const { CanvasRenderer } = await import('echarts/renderers');
  echarts.use([XXXChart, XXXComponent, CanvasRenderer]);
}

Alias configuration to redirect Ant‑Design icons to a custom module, reducing icon bundle size from >500 KB to ~30 KB.

// vue.config.js alias
resolve: {
  alias: {
    '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/plugins/antdIcons.js')
  }
}

// src/plugins/antdIcons.js
export { default as CheckCircleOutline } from '@ant-design/icons/lib/outline/CheckCircleOutline';
export { default as CheckCircleFill } from '@ant-design/icons/lib/fill/CheckCircleFill';

Pass ECharts instance to micro‑frontend sub‑apps via props to avoid duplicate loading.

// Main app passes ECharts via props
import { loadMicroApp } from 'qiankun';
export default {
  name: 'MicroWidgetReact',
  methods: {
    async loadMicroApp(){
      const $echarts = await this.$initEcharts();
      this.microApp = loadMicroApp({
        name: `xxx`,
        props: { ...props, $echarts }
      });
    }
  }
};

Space Optimization (CPU, Memory, Cache)

Code optimization to reduce JavaScript/ CSS execution cost.

Eliminate memory leaks and use lazy loading for images.

Leverage Web Workers for heavy computations.

Adopt server‑side rendering where appropriate.

Compress assets (JS, CSS, images) to lower transfer size.

Before and After Comparison

The overall performance improved by 292% after applying the optimizations.

Loading speed and visual stability show significant gains.

Performance Monitoring

To maintain high performance during future iterations, the team integrated the open‑source web‑vitals library with custom runtime monitoring for stalls and crashes, and set up alerting based on metric thresholds using the platform’s data‑visualization and notification capabilities.

Conclusion

The presented optimizations are specific to the current project but illustrate a general approach: identify critical steps, prioritize them, and apply targeted improvements—whether by removing unnecessary steps, advancing essential ones, or fine‑tuning individual stages. Techniques such as SSR, preloading high‑priority resources, and using Web Workers embody this philosophy, offering a roadmap for effective front‑end performance enhancement.