Front-end Performance Monitoring Practices at DeWu Platform

For front‑end developers, user experience is paramount, and performance is its core. Accurate, timely, and effective performance monitoring can quantify page speed, guide optimizations, and trigger alerts when performance degrades.

Selected Monitoring Metrics

1. FCP (First Contentful Paint) – easy to obtain via the Performance API on Android and via requestAnimationFrame estimation on iOS.

2. TTS (Time to Server) – calculated as requestStart - fetchStart , reflecting network latency and the upper bound of page‑open rate.

3. TSP (Time for Server Processing) – responseStart - requestStart , important for SSR scenarios.

4. Resource size and load duration of CSS, images, and XHR requests, with special handling for SPA pages where XHR latency directly impacts usability.

5. Environment information (device model, app version, browser) to aid reproducibility of performance issues.

System Architecture

The solution consists of five modules:

• SDK : collects performance data and basic user info, sending it to Alibaba Cloud Log Service (SLS) according to a configurable strategy.

• SLS : stores raw logs, adds timestamps and IP metadata.

• Backend : pulls logs from SLS, deduplicates, aggregates metrics, and provides APIs for visualization.

• DB : persists processed logs and metric tables (MySQL).

• Report : visual dashboards for specific projects, versions, and pages.

Key Technical Decisions

• SDK sends data intermittently, extending the interval as page‑open time grows, and stops after a threshold.

• FingerprintJS2 (with unstable browser features removed) plus IP and client timestamp are used for deduplication.

• Critical SDK code is wrapped in try catch to avoid breaking the page.

• Only the top‑10 largest resources and longest XHRs are recorded in detail to balance coverage and overhead.

• Logs are sent to SLS to avoid building a custom log server.

• Backend built with Python + Django (running on PyPy, using multiprocessing) for rapid development and acceptable performance.

• Sampling 5% of logs (up to 1,000 entries per day) reduces processing load while preserving statistical relevance.

• MySQL is chosen as a simple relational store meeting the I/O requirements.

Future Development

1. Frame‑rate statistics: report only stutter intervals and their frame‑rate distribution.

2. Replace FCP with more user‑centric metrics such as LCP or FMP.

3. Incorporate pageName into deduplication for higher accuracy.