Frontend Optimization Strategies for High‑Concurrency Interactive H5 during the Spring Festival Gala

The Spring Festival Gala interactive H5 required engaging animations and instant feedback while handling extremely high traffic and risk, prompting the front‑end team to adopt a multi‑faceted response strategy.

Static Resource Optimization: Resources were divided into first‑screen, second‑screen, and post‑interaction groups; first‑screen assets (HTML, JS, CSS, images) were bundled and compressed. Sprite sheets replaced numerous icons, WebP conversion and CDN quality reduction cut image sizes by over 90%, and the drum‑game animation was transformed from 3D models to lightweight sprite frames, reducing request counts and payload.

Server Cost and Risk Reduction: Traffic‑shaping techniques such as a pre‑load “loading” page and randomized request delays spread load across a 10‑second window. Critical APIs (initialization and drum‑lottery) were throttled to prevent spikes. User coupon‑claim status was stored in localStorage instead of cookies or sessionStorage, providing larger capacity and eliminating header bloat.

Engineering Automation: Automated scripts generated dual CSS rules for normal and WebP backgrounds using PostCSS, dynamic sprite generation handled background‑position adjustments, and a realistic mock environment simulated server responses, timeouts, and error codes. Release scripts automated packaging, size calculation, and deployment across multiple CDN and offline packages, reducing manual errors.

Disaster Recovery: Both proactive and passive degradation mechanisms were implemented: feature toggles for quick fallback and UI cues for error handling, ensuring graceful degradation under extreme load.

Conclusion: By combining static asset optimization, traffic management, client‑side caching, and extensive engineering automation, the front‑end team delivered a stable, high‑performance interactive experience for millions of concurrent users during the gala.