Optimizing Frontend Experience for Medical Platforms: Insights from WeDoctor

Xu Hongfei, a frontend engineer in WeDoctor's cloud computing team, is a creator of cutting‑edge JavaScript techniques.

While Alibaba's Experience Technology Department is renowned, its solutions are industry‑specific and cannot be directly transplanted to other sectors such as healthcare.

This talk walks through the experience and design of the medical industry in four stages:

What is experience

Key focus of medical‑industry experience

How we build the experience

Future plans and ideas

Let's begin.

What is Experience

In e‑commerce, experience includes fast animations, efficient content rendering, and precise matching strategies—e.g., a livestream page showing content instantly.

This fast, direct view is a good experience, but copying it to other industries raises questions about what should be prioritized.

What is Medical‑Industry Experience

Promotion Layer

Page load time

Interactive time of core content

WeDoctor's global anti‑epidemic system provides medical information and free expert consultation, where reducing the time to reach the interactive core dramatically improves user retention.

Thus, for medical promotion the key metric is the interactive time, which includes traditional white‑screen time.

Assist Layer

In WeDoctor's CDSS chronic disease management system, doctors care about how long the system takes to open when evaluating patient conditions.

We focus on reducing the time spent filling forms and linking data while maintaining accuracy.

Key Focus of Medical‑Industry Experience

First‑screen time is critical. The "second‑open rate" is calculated as: DNS + TCP + TTFB + RESPONSE + DOMINTERACTIVE The DOMInteractive point marks the end of white‑screen time. Unlike e‑commerce, medical systems do not rely on image visibility, so MutationObserver is not used for load detection.

We compute a "second‑open rate" to gauge real performance. Initially, the AI front‑end of the alliance system had a 10‑15% second‑open rate; after dynamic imports and better webpack chunk handling, it stabilized around 90%.

Other metrics, such as the live‑body detection system, showed a drop from 80% to 60% due to network latency and large synchronous images on weak connections. We mitigated this by inlining small images as base64 and consolidating requests.

Business Latency

Understanding how long users stay on a page and what actions they perform helps identify unnecessary or complex options that reduce user numbers.

Latency data follows a normal distribution, allowing us to infer overall system performance and suggest product improvements from a technical perspective.

How We Build the Experience

Baymax Experience Center offers two integration methods:

Inject a script for quick, no‑configuration onboarding.

Use an npm package with additional configuration.

The script method auto‑injects during deployment, providing basic performance data without full traceability.

The npm method supplies complete performance metrics, including full‑link information via Gtrace.

Performance Analysis Module

Overview

The dashboard shows key indices, especially the second‑open rate , which reflects the proportion of visits that become interactive within one second.

Packaging strategy quality protocol being http2.0 Code logic efficiency

…

Improving this metric requires holistic optimization across all factors.

Detail Analysis

Big‑data analysis reveals overall system stability, white‑screen time distribution, and 95th‑percentile values for each phase.

Even a Lighthouse score of 84 can be misleading; real users may still experience 3‑second load times, highlighting survivor bias.

Using big‑data logs, we can trace individual user issues, such as high latency on specific requests.

Traffic Analysis

Shows regional second‑open rates, guiding CDN placement and potential local deployments.

Request Analysis

Aggregates request statuses and distributions over time.

Link Analysis

Frontend link governance mirrors backend micro‑service tracing. Each client visit is a service; we generate a unique pageId and associate a traceId to achieve full‑link visibility.

Rendering correctness

Performance health

Feature completeness

…

Errors such as mismatched response formats are captured by tools like sentry, which assign a unique sid linked to the pageId.

For SSR projects, the ttfb stage often includes Node‑side processing or downstream service calls, requiring additional handling on the Node layer.

Future Plans and Ideas

Frontend Micro‑services

While not discussed in depth, future micro‑frontend architectures will enable granular performance analysis across modules.

Business Latency

Further collaboration with product teams is needed to refine latency‑related features before public release.

Conclusion

After a lengthy discussion, I hope these insights help improve your medical‑industry frontend experience.