How to Supercharge H5 Performance with Baidu Cloud CDN: A Step‑by‑Step Guide

Introduction

After the shift to mobile internet, H5 pages still play a crucial role in many products, but performance is often overlooked. This article presents a practical solution for accelerating static H5 assets using Baidu Cloud CDN.

What is a CDN?

A Content Delivery Network (CDN) distributes origin content to a network of edge nodes, reducing latency and improving availability. The CDN works by caching resources at geographically close nodes, handling DNS resolution, and serving cached content directly to users.

Project Background

The case study comes from Baidu's automotive information platform “Youjia”. The goal is to speed up H5 pages across the Youjia app, mini‑program and M‑site by accelerating static files (CSS, JS, fonts, images) with CDN.

Problem Analysis

Static assets dominate page load time. Two acceleration options were considered:

CDN back‑origin acceleration – caches both static files and API responses.

Object storage acceleration – caches only static files, requiring additional upload scripts.

The team chose the lower‑cost CDN back‑origin approach.

Implementation Steps

Apply a dedicated CDN domain.

Bind the domain to the Baidu Cloud CNAME provided (see Baidu CDN documentation).

Configure the back‑origin address so that requests to the CDN domain are forwarded to the origin.

Replace all static‑file URLs in the front‑end templates with the new CDN domain.

Set an appropriate cache TTL according to business needs.

Add the required cross‑origin whitelist (e.g., yoojia.com, baidu.com) to the CDN configuration.

Inject a custom HTTP header (e.g., cdnfrom:xxx) to identify CDN traffic in downstream services.

Adjust access‑control settings to allow the whitelisted domains.

Disable 301 redirects for CDN traffic in the access‑layer.

Perform full‑site functional verification, both offline and online.

Key Configuration Details

Images illustrate the DNS resolution flow, CNAME binding, cache‑time settings, custom header addition, and cross‑origin whitelist configuration.

Precautions

Ensure that missing static files return a proper 404 status; do not rewrite to a generic page.

Avoid any client‑side redirects for cached assets, which could corrupt the CDN cache.

Confirm that the CDN cache contains only correct data before enabling the solution.

Results

After deployment, Time‑to‑Interactive (TTI) improved by 31.5 % on the Youjia app H5 and by 18 % on the M‑site. Enabling gzip compression reduced static‑file size by roughly 60 %.