Ensuring Smooth, Stable Experiences for Massive Mobile Event Launches

This article outlines practical strategies for guaranteeing high‑concurrency, high‑flexibility, and stable performance of large‑scale mobile event pages, covering user experience goals, technical indicators, load and runtime optimizations, dynamic configuration, and monitoring to keep millions of users satisfied.

Watermelon Frontend Tech Team
Watermelon Frontend Tech Team
Watermelon Frontend Tech Team
Ensuring Smooth, Stable Experiences for Massive Mobile Event Launches

Background

To ensure quality after a large‑scale event goes live, teams usually pre‑define potential online issues and prepare mitigation plans. Problems may stem from the app's container environment or user device characteristics, and the handling approach directly impacts the event's online performance. This article shares ideas for online assurance of large venue events, using a Spring Festival event as a case study.

What Needs to Be Guaranteed?

Core Guarantee

The core of online assurance for venue events is to provide a good user experience that aligns with business goals. For the Xigua Spring Festival event, the goal is to create festive content, interactive features, and a unique atmosphere, ultimately delivering a high‑quality experience to users.

Business Characteristics

Multiple distribution channels with wide coverage – The event appears on recommendation channels, splash ads, notifications, and in‑app coin and card flows, bringing massive traffic and requiring high‑concurrency handling on both backend services and front‑end pages.

Long duration – Events may span the entire holiday or be split into phases, requiring support for material updates and stage‑specific configurations.

Heavy experience and interaction – Custom designs, special fonts, and varied animations demand careful implementation across different scenes.

Product Experience

Device diversity (Android vs. iOS versions, low‑end devices) influences performance, so solutions must aim to deliver a complete experience to as many users as possible while handling animation and rendering differences.

Technical Indicators

Good user experience requires smoothness and stability . Smoothness covers fast first‑screen load and fluid content switching, while stability includes high request success rates, resource loading success, retry mechanisms, rapid error detection, and fallback handling.

Xigua 2021 Spring Festival Venue Event

How to Ensure Assurance?

The goal is to let as many users as possible obtain a complete, smooth, and stable experience.

More Users Can Experience

High concurrency – Estimate QPS based on peak splash‑screen traffic, conduct load testing, and provision extra instances (e.g., 30% over‑provision) to handle spikes.

High flexibility – Use dynamic configuration to adapt content, resources, and animation switches for different stages and device types.

Page Smoothness

Load performance – Optimize static resources, compress and asynchronously load animations, trim fonts, and leverage offline packages and CDN pre‑warming.

Runtime performance – Reduce memory usage by limiting complex animations, provide downgrade paths for low‑end devices, and test on representative hardware.

Activity Stability

Page stability – Implement comprehensive error monitoring, set alert thresholds for key metrics (QPS, FCP, JS errors), and provide retry mechanisms.

Container stability – Monitor ANR and OOM events, ensure activity pages do not degrade the WebView or app container, and adjust resource placement for low‑end devices.

Main Technical Solutions

High Concurrency Handling

QPS estimation – For a five‑minute peak of 1.25M requests, the per‑second QPS is about 10K.

Load testing & scaling – Perform stress tests at the estimated QPS and configure auto‑scaling with a safety margin.

1250K/(5 * 60) -> 10K

High Flexibility Handling

Dynamic configuration and fine‑grained modules allow rapid updates without code releases. Example: stage‑specific settings, avatar frame configs, and animation toggle flags are all driven by dynamic configs.

Load Performance Assurance

Font handling – Trim unused glyphs (e.g., reduce a 15 MB Chinese font to 9.5 MB) and preload essential fonts for first‑screen display.

Animation resource reuse – Reuse Lottie animations across stages, swapping only the title graphics.

Offline package splitting – Separate static assets, animation packs, and fonts into distinct offline channels to reduce initial download size.

Runtime Performance Assurance

Animation downgrade strategies include configuration‑based switches, system‑version checks, and device‑model fallbacks. For example, devices with a score lower than 6 or Android versions below 7.0 display static images instead of animations.

'iphone 4', 'iphone 4s', 'iphone 5', 'iphone 5c', 'iphone 5s', 'iphone 6', 'iphone 6 plus', 'iphone 6s', 'iphone 6s plus', 'iphone se'

Page Stability

Key error metrics (JS errors, static‑resource errors) are monitored via a performance dashboard. Alert rules are tuned during early rollout to catch anomalies quickly.

Container Stability

ANR / OOM monitoring – Track ANR and OOM rates before and after major resource deployment. Example: Android ANR rate rose 30.92% during the event and returned to normal after the event ended.

Low‑system‑version handling – Move heavy resources out of the first screen for Android < 8.0 devices, reducing ANR increase by 11% and OOM increase by 7.65%.

Conclusion

Online assurance is essential for any large‑scale venue event. By aligning technical solutions with business characteristics—handling high concurrency, ensuring high flexibility, optimizing load and runtime performance, and establishing robust monitoring—teams can deliver a complete, smooth, and stable experience to millions of users.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

mobileperformanceHigh ConcurrencyEvent
Watermelon Frontend Tech Team
Written by

Watermelon Frontend Tech Team

We are from ByteDance, the frontend division of Watermelon Video, responsible for its product development. We share business practices from the product to provide valuable experience to the industry, covering areas such as marketing setups, interactive features, engineering capabilities, stability, Node.js, and middle‑back office development.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.