CDN:Performance optimization

Alibaba Cloud CDN provides a set of performance optimization features that reduce page load times and bandwidth usage — without changes to your origin server.

CDN offers optimization features that reduce page load times and bandwidth consumption at two layers:

• Compression: Reduce the size of text-based files and images in transit between edge nodes and browsers.

• Page optimization: Remove redundant code from HTML, CSS, and JavaScript before serving files to browsers.

Use these features independently or in combination depending on your content type and performance goals.

How compression works

When a browser requests a resource, it sends an Accept-Encoding HTTP request header listing the compression algorithms it supports (for example, br, gzip). CDN reads this header and serves the smallest version of the file the browser can decompress.

The request flow works as follows:

1. The browser sends a request to the CDN edge node with Accept-Encoding: br, gzip.

2. The edge node checks whether a compressed version of the file is already cached.

3. If not, the edge node fetches the file from your origin server.

4. The edge node compresses the file and caches the result.

5. The edge node returns the compressed file to the browser.

Compression features

Alibaba Cloud CDN supports the following compression features.

Intelligent compression

Intelligent compression compresses files using Gzip or Brotli before delivering them to browsers. CDN selects the algorithm based on the Accept-Encoding header the browser sends.

Compression conditions:

• File size: 1 KB to 10 MB

• Supported file types: text-based files such as HTML, CSS, JavaScript, XML, and JSON

When CDN does not compress:

• The browser does not include an Accept-Encoding header, or the header does not list gzip or br.

• The file is already compressed (for example, JPEG, PNG, MP4, or ZIP files). Compressing already-compressed files increases file size.

• The file is smaller than 1 KB or larger than 10 MB.

Brotli vs. Gzip:

When the browser supports both, CDN prefers Brotli for better compression ratios.

Automatic compression

Automatic compression reduces image file size by removing metadata and adjusting quality settings without changing the format or dimensions. This feature applies to images stored on your origin server and operates independently from intelligent compression, which targets text-based files.

Page optimization features

Page optimization removes redundant characters — such as whitespace, comments, and unnecessary formatting — from source files. Smaller files load faster and reduce data transferred to browsers.

Alibaba Cloud CDN supports optimization for three file types:

HTML optimization

HTML optimization removes comments, redundant whitespace, and blank lines from HTML files before they reach the browser. This reduces file size without changing how the page renders or behaves.

Enabling HTML optimization improves the following performance metrics for pages with large HTML payloads:

• Time to First Byte (TTFB): Smaller files transfer faster.

• First Contentful Paint (FCP): The browser can parse and render content sooner.

• Largest Contentful Paint (LCP): Reduced HTML size shortens the overall rendering pipeline.

CSS optimization

CSS optimization removes comments, whitespace, and unnecessary characters from CSS files. The resulting file is functionally identical to the original but smaller.

JavaScript optimization

JavaScript optimization removes comments and whitespace from JavaScript files. This reduces the amount of JavaScript the browser must download and parse before the page becomes interactive.

URL prefetch

URL prefetch lets you push content to CDN edge nodes before users request it. Instead of waiting for the first user to trigger an origin fetch, submit a list of URLs and CDN proactively fetches and caches those resources.

Use URL prefetch when:

• You are releasing new content (articles, product pages, media files) and want it available at edge nodes immediately.

• You anticipate a traffic spike and want to warm the cache in advance.

• You have just purged cached content and want to repopulate edge nodes without waiting for user traffic.

How URL prefetch works:

1. Submit a list of URLs through the CDN console or API.

2. CDN fetches each URL from your origin server.

3. CDN caches the fetched content at edge nodes.

4. Subsequent user requests are served from the edge cache — no origin fetch required.

Conditions for URL prefetch:

• The resource at each URL must be publicly accessible from the CDN edge node.

• The URL must belong to an accelerated domain name configured in Alibaba Cloud CDN.

• Prefetch quotas apply per account. Check the CDN console for your current quota and usage.

Choosing the right features

Enable features individually and monitor the impact on your cache hit ratio and bandwidth metrics before enabling additional features.

Usage notes

• Do not enable intelligent compression if your origin server already compresses responses. If the origin server returns a Gzip-encoded file and CDN attempts to compress it again, the resulting file may be corrupted or larger than the original.

• Test page optimization in a staging environment first. Minification removes only whitespace and comments, but some older JavaScript files contain syntax that breaks when whitespace is removed (for example, statements without semicolons that rely on automatic semicolon insertion).

• Intelligent compression and automatic compression are independent features. Enabling one does not enable the other. Text files go through intelligent compression; images go through automatic compression.

• URL prefetch consumes origin bandwidth. Each prefetch request triggers an origin fetch. Prefetch large volumes of content during off-peak hours to avoid overloading your origin server.