How Kuaishou Engineered a High‑Traffic Web New Year Event: Risks, Offline Packages & CDN Strategies

Background and Challenge

Kuaishou switched its 2021 New Year celebration to a web‑based experience, generating unprecedented traffic and demanding complex animations using Lottie, video, and CSS, along with audio interactions. The surge stressed both the web page and its upstream services, creating severe performance and reliability risks.

Identified Risks

Resource Download – Web pages load HTML, CSS, JS, images, and media on‑the‑fly, causing potential QPS spikes and CDN overload, especially when many Lottie frames fail to load.

Host Performance – Intensive animations consume CPU, GPU, memory, and network bandwidth on client devices, leading to frame drops, freezes, or crashes.

Upstream Dependencies – Backend APIs and CDN services become bottlenecks; a CDN outage can render the page unusable.

Mitigation Strategies

1. Tiered Resource Preloading

To reduce first‑load latency, critical assets (e.g., large Lottie images) are pre‑packed into the native client, bypassing network download entirely.

Pre‑preset files are filtered via a Webpack rule that matches any path containing /preset/ :

// 预置资源
config.module
    .rule('images-preset')
    .test(/\.(png|jpg|webp)(\?.*)?$/)
    .include.add(/(preset)/) // only process /preset/ directory
    .end()
    .loader(require.resolve('url-loader')) // still try base64
    .options({
        limit: 1024 * 4,
        fallback: {
            loader: require.resolve('file-loader'),
            options: {
                name: 'static/img/preset/[name].[hash:8].[ext]'
            }
        }
    });

2. Offline Package Splitting

Resources are divided into five offline packages based on type and update frequency, allowing the client to fetch only needed assets and reducing redundant traffic.

Special package sf21_td_eve_sos acts as a patch for resources that cannot be collected statically.

3. Dynamic Funnel Degradation

The core “red‑packet” animation can run in three modes:

A – Lottie : Best experience, highest CPU/GPU and CDN load.

B – Video : Slightly lower device demand, minimal CDN pressure.

C – CSS : Lowest resource usage, reduced experience.

Predefined fallback plans (Pre‑plan 1‑6) trigger mode switches based on device performance, crash rates, or CDN QPS spikes.

4. Domain Strategy Backup

To mitigate single‑CDN‑domain failures, resources are distributed across multiple domains. Webpack’s publicPath is set dynamically using a sharding rule that groups filenames by their trailing character.

const alphabet = Array.from(
    new Set(Array.from('0ab1cd2ef3gh4ij5kl6mn7op8qr9stuvwxyz'))
);

Then, for each shard, a rule assigns a specific CDN domain:

// VUE_APP_RND_CDN_ORIGIN is the candidate CDN pool
const cdnPool = process.env.VUE_APP_RND_CDN_ORIGIN.split(',');

chunk(alphabet, Math.ceil(alphabet.length / cdnPool.length))
    .map(arr => arr.join(''))
    .forEach((range, idx) => {
        config.module
            .rule('images-preset-eve-' + range)
            .test(
                new RegExp(
                    `[${range}]\\.(png|jpg|webp)(\\?.*)?$`,
                    'i'
                )
            )
            .use('url-preset')
            .loader(require.resolve('url-loader'))
            .options({
                limit: 1024 * 4,
                fallback: {
                    loader: require.resolve('file-loader'),
                    options: {
                        publicPath: cdnPool[idx],
                        name: 'static/img/[name].[hash:8].[ext]'
                    }
                }
            });
    });

For fault tolerance, multiple builds are generated with different CDN pools, then merged into the final release directory:

# h1 fails
VUE_APP_ENTRY_EVE=index-h1 VUE_APP_RND_CDN_ORIGIN=//h1.cdn.com,//h2.cdn.com,//h3.cdn.com VUE_APP_OUTDIR=dist-h1 npm run build
# h2 fails
VUE_APP_ENTRY_EVE=index-h2 VUE_APP_RND_CDN_ORIGIN=//h1.cdn.com,//h3.cdn.com,//h4.cdn.com VUE_APP_OUTDIR=dist-h2 npm run build
# h3 fails
VUE_APP_ENTRY_EVE=index-h3 VUE_APP_RND_CDN_ORIGIN=//h1.cdn.com,//h2.cdn.com,//h4.cdn.com VUE_APP_OUTDIR=dist-h3 npm run build
# h4 fails
VUE_APP_ENTRY_EVE=index-h4 VUE_APP_RND_CDN_ORIGIN=//h1.cdn.com,//h2.cdn.com,//h3.cdn.com VUE_APP_OUTDIR=dist-h4 npm run build

cp -r dist-h1/* ./dist/
cp -r dist-h2/* ./dist/
cp -r dist-h3/* ./dist/
cp -r dist-h4/* ./dist/

# dist is final release directory

Summary and Takeaways

The event demanded extraordinary stability; beyond pure front‑end optimization, coordinated efforts across CDN, backend, and client teams were essential. Comprehensive pre‑planning, tiered offline packaging, dynamic animation degradation, and domain sharding collectively ensured the page remained responsive under extreme load, turning a high‑risk scenario into a repeatable technical asset for future large‑scale web events.