From Zero to Mastery: How to Systematically Optimize Front‑End Performance

Why Optimize Front‑End Performance?

Page load time has the greatest impact on user experience and business metrics. Studies show that if a page takes more than 5 seconds to load, 90 % of users abandon it, leading to significant revenue loss. Reducing first‑screen latency directly improves conversion and retention.

How to Conduct a Systematic Performance Optimization Project

1. Build a Measurement System

Define quantitative performance indicators and construct a monitoring platform that provides real‑time dashboards, slow‑page tracking, bottleneck drilling, and alerting.

2. Define Concrete Targets

Analyze current data and set measurable goals. For example, Yanxuan’s C‑end set an FMP (First Meaningful Paint) target of ≤ 1.2 s, split across activity, user, and mall modules.

3. Execute Optimizations

Organize a cross‑functional team and agree on an overall strategy.

Apply standard front‑end optimizations (lazy‑load, minification, compression) together with business‑specific tricks.

Record performance changes after each iteration.

Document effective tactics for future reuse.

Roll out validated improvements across all business lines.

Performance Measurement Details

The evolution of page‑performance metrics focuses on first‑screen time and can be divided into three stages:

Stage 1 – Custom Timing : Use new Date() at page head and at the first‑screen DOM. Simple but low‑precision.

Stage 2 – W3C Performance API : Leverage performance.timing. In SPA scenarios the load event occurs before the first screen is rendered, reducing relevance.

Stage 3 – Perceptual Metrics : FP, FCP, FMP, TTI, LCP, etc. FMP aligns closely with perceived first‑screen readiness, but no native API exists.

To approximate FMP, identify the most significant visual element (large image, video, canvas) and use its load completion time as the FMP estimate. The algorithm:

Listen for load events on all elements.

Score each element by viewport area and a weight factor.

Compare the sum of child scores with the parent score and keep the higher value.

Filter out elements whose score is below the average to narrow the candidate set.

Take the maximum load time among the remaining elements as the FMP value.

Monitoring Platform Requirements

Data Visualization : Real‑time dashboards per business.

Slow‑Load Tracking : Lists of pages with multi‑dimensional metrics.

Performance Bottleneck Locating : Drill‑down into user navigation paths.

Performance Alerts : Automated reports and online alarms.

The monitoring platform is a critical component; detailed implementation is beyond the scope of this summary.

Page Flow Analysis

The request lifecycle can be broken down into five steps:

Enter URL.

Cache lookup.

DNS resolution.

TCP connection (HTTP/2 recommended to multiplex requests).

Server response (static assets via CDN).

Browser rendering (Critical Rendering Path).

Key optimization keywords extracted from the flow are cache , TCP connection , server , response body , and rendering . Strategies are derived from each keyword.

Optimization Techniques

Cache

Leverage HTTP cache headers, browser cache, and app‑level pre‑caching (Xcache) to serve first‑load resources directly from the container.

TCP / HTTP 2

Consolidate many requests into a single HTTP/2 connection to reduce header overhead.

Server (CDN)

Offload static assets to a CDN to improve stability and reduce latency.

Response Body (GZIP)

Compress text resources with GZIP (LZ77 + Huffman) to shrink payload size.

Rendering (Critical Rendering Path)

Reduce resource count, byte size, and path length. Useful tooling: webpack-bundle-analyzer – visualizes bundle composition. css-loader?minimize or cssnano – minifies CSS. image-webpack-loader / imagemin-webpack-plugin – compresses images. UglifyJS / ParallelUglifyPlugin – minifies JavaScript. DllPlugin – speeds up builds. splitChunks – splits bundles for on‑demand import().

Additional tactics: lazy‑load large images, pre‑fetch critical APIs, and minimize first‑screen JavaScript execution.

Best Practices from Yanxuan

Overall Architecture

Front‑end APM tools and performance SDK integrated into the container.

Resource Pre‑Loading (Xcache)

Backend distributes configuration files; the client pulls a resource list and serves cached assets directly from the webview, with behavior data collected for analysis.

Static Page Dynamicization

Convert static HTML into AST‑generated bundles (bundlejs) for different time slots (pre‑heat, official, re‑heat). A dynamic container loads the appropriate bundle based on the current period, enabling second‑level page switches while still benefiting from Xcache.

Interface Pre‑Fetch

The container issues early API requests so that data is ready before page scripts execute.

GIF Lazy‑Loading

Load only the first frame (~77 KB) initially; fetch the full GIF (~2.85 MB) after the first screen, saving ~97 % of image weight.

Bottom Navigation Persistence

Keep the navigation bar stable during page transitions to avoid visual flicker.

Page Transition Effects

Show a loading overlay with background color, blur, and network‑aware hints to reduce perceived white‑screen time.

Conclusion

The end‑to‑end workflow consists of three phases:

Build a measurement system (metrics + monitoring platform).

Set clear, data‑driven performance targets.

Execute systematic optimizations across cache, network, server, response, and rendering, then validate results and conduct a post‑mortem.

Following this structured process enables teams to move from ad‑hoc tweaks to a coherent, data‑driven performance strategy.