CDN 性能优化：更快的全球交付完整指南

每改善 100 毫秒的延迟，电子商务转化率就会提高 1.1%。 对于每月营业额为 100 万美元的商店来说，这 100 毫秒的改善意味着每年可增加 132,000 美元的额外收入。 CDN 优化不是一项技术上的锦上添花——它是一个直接的收入杠杆。

本指南涵盖 CDN 架构、缓存策略、边缘计算以及 Web 应用程序、电子商务商店和 ERP 系统的性能调整。

要点

• 仅适当的缓存标头就可以减少源服务器负载 60-80%
• 通过 CDN 转换进行图像优化，在零代码更改的情况下将页面重量减少 40-60%
• 边缘计算使 API 逻辑更接近用户，将缓存响应的延迟从 200 毫秒减少到 20 毫秒
• 多 CDN 策略为全球受众提供故障转移和地理优化

---

CDN 架构基础知识

CDN 的工作原理

CDN 是分布在全球的服务器网络，可缓存并提供最靠近用户的位置的内容。

User in Tokyo --> CDN Edge (Tokyo, 5ms) --> [Cache HIT] --> Response
User in London --> CDN Edge (London, 5ms) --> [Cache MISS] --> Origin (US-East, +120ms) --> Cache + Response
User in London --> CDN Edge (London, 5ms) --> [Cache HIT] --> Response (subsequent requests)

缓存什么

---

缓存控制头

Next.js 缓存配置

// next.config.ts
const nextConfig = {
  async headers() {
    return [
      {
        source: '/_next/static/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
      {
        source: '/images/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=2592000',
          },
        ],
      },
    ];
  },
};

Nginx 缓存标头

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
    expires 365d;
    add_header Cache-Control "public, immutable";
    add_header Vary "Accept-Encoding";
}

location ~* \.html$ {
    expires 5m;
    add_header Cache-Control "public, must-revalidate";
}

# API responses - let the application control caching
location /api/ {
    proxy_pass http://backend;
    proxy_cache_bypass $http_authorization;
}

---

图像优化

在大多数网站上，图片占页面重量的 50-70%。基于 CDN 的图像优化消除了构建时图像处理的需要。

Cloudflare 图像转换

<!-- Original: 2.4 MB JPEG -->
<!-- Optimized: 180 KB WebP, properly sized -->
<img
  src="/cdn-cgi/image/width=800,quality=80,format=auto/images/product-hero.jpg"
  alt="Product"
  width="800"
  height="600"
  loading="lazy"
/>

Next.js 带有 CDN 的图像组件

// next.config.ts
const nextConfig = {
  images: {
    loader: 'custom',
    loaderFile: './lib/image-loader.ts',
  },
};

// lib/image-loader.ts
export default function cloudflareLoader({
  src,
  width,
  quality,
}: {
  src: string;
  width: number;
  quality?: number;
}) {
  const params = [`width=${width}`, `quality=${quality || 80}`, 'format=auto'];
  return `/cdn-cgi/image/${params.join(',')}${src}`;
}

图像优化影响

---

边缘计算

用于 API 缓存的 Cloudflare Workers

// worker.js - Cache API responses at the edge
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);

  // Only cache GET requests to public API endpoints
  if (request.method !== 'GET' || !url.pathname.startsWith('/api/public/')) {
    return fetch(request);
  }

  const cache = caches.default;
  const cacheKey = new Request(url.toString(), request);

  // Check cache
  let response = await cache.match(cacheKey);
  if (response) {
    return response;
  }

  // Fetch from origin
  response = await fetch(request);

  // Clone and cache successful responses
  if (response.ok) {
    const cachedResponse = new Response(response.body, response);
    cachedResponse.headers.set('Cache-Control', 'public, max-age=300');
    cachedResponse.headers.set('X-Cache-Status', 'MISS');
    event.waitUntil(cache.put(cacheKey, cachedResponse.clone()));
    return cachedResponse;
  }

  return response;
}

电子商务的边缘用例

---

CDN 提供商比较

建议：适用于大多数企业的 Cloudflare。免费套餐非常慷慨，边缘网络最大，Workers 无需额外基础设施即可提供强大的边缘计算。

---

多 CDN 策略

为什么选择多 CDN

没有哪个 CDN 在每个地区都具有最佳性能。多 CDN 策略将用户路由到其所在位置性能最佳的 CDN：

实施

使用 DNS 级路由将用户引导至最佳 CDN：

User request -> DNS (Cloudflare/Route53)
    |
    +--> US/EU traffic -> Cloudflare (best PoP coverage)
    |
    +--> APAC traffic -> AWS CloudFront (strong APAC presence)
    |
    +--> China traffic -> Alibaba CDN (required for China performance)

对于大多数企业来说，在 DNS 级别配置故障转移 CDN 的单个 CDN (Cloudflare) 可以提供足够的冗余，而无需复杂的完整多 CDN 路由。

---

常见的 CDN 陷阱

陷阱 1：缓存经过身份验证的内容

切勿缓存包含用户特定数据的响应。用户 A 向用户 B 提供的缓存响应存在安全漏洞。对所有经过身份验证的 API 响应使用 Cache-Control: private, no-store。

陷阱 2：忽略部署的缓存清除

当您部署新的 JavaScript 或 CSS 时，用户可能会收到缓存的旧版本。解决方案：

• 内容哈希：在文件名中包含哈希 (app.a1b2c3d4.js)。 Next.js 自动执行此操作。
• 部署时清除缓存：作为部署管道的一部分清除 CDN 缓存。
• 版本化 URL：/v2/styles.css 而不是 /styles.css。

陷阱 3：动态内容的 CDN 配置错误

如果您的 CDN 缓存了不应缓存的动态内容（API 响应、具有用户状态的 HTML 页面），您将提供陈旧或不正确的数据。定期审核您的 CDN 缓存规则并使用 Vary 标头来防止缓存冲突。

---

绩效衡量

核心 Web Vitals 目标

监控缓存性能

# Check CDN cache hit ratio
curl -sI https://example.com/page | grep -i "cf-cache-status\|x-cache\|age"

# Expected output for a cached response:
# cf-cache-status: HIT
# age: 3600

跟踪一段时间内的缓存命中率。目标：静态资产85%以上，动态内容50%以上。

---

常见问题

如果我们的用户位于一个国家/地区，我们是否需要 CDN？

是的，但好处会发生变化。您获得的不是地理延迟减少，而是：DDoS 保护、SSL 终止卸载、图像优化和源服务器负载减少。即使对于单一国家/地区的受众，CDN 也可以降低服务器成本并提高可靠性。 Cloudflare 免费套餐使这一改进成为零成本。

我们如何处理动态内容的缓存失效？

三种策略：(1) 针对频繁更改的内容的短 TTL（1-5 分钟），(2) 缓存标签，并按标签清除内容更新，(3) stale-while-revalidate 标头，用于在后台获取新内容的同时提供缓存内容。单独使用 s-maxage 进行 CDN 缓存，使用 max-age 进行浏览器缓存。

我们应该为 ERP 系统使用 CDN 吗？

CDN 有利于 ERP 静态资产（JavaScript、CSS、图像）和面向公众的门户。不要缓存经过身份验证的 API 响应或与会话相关的内容。 ECOSIRE 将 CDN 缓存配置为我们的 Odoo 实施服务 的一部分，以确保最佳缓存而不存在安全风险。

CDN如何与服务端渲染交互？

对于 Next.js SSR 页面，将 CDN 配置为基于具有短 TTL（1-5 分钟）的完整 URL（包括查询参数）进行缓存。使用 stale-while-revalidate 提供稍微陈旧的内容，同时 Next.js 在后台重新生成。 ISR（增量静态再生）可以自然地与 CDN 缓存配合使用。

---

接下来会发生什么

CDN 优化自然地与负载测试配对以验证负载下的性能，并与监控配对以跟踪缓存命中率和延迟。有关完整的基础设施优化路线图，请参阅我们的小型企业 DevOps 指南。

联系 ECOSIRE 以获取 CDN 设置和性能优化咨询。

---

由 ECOSIRE 发布——帮助企业在全球范围内更快地交付内容。