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.
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) -> 10KHigh 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.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
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.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.
