Optimización del rendimiento de CDN: la guía completa para una entrega global más rápida

Cada 100 ms de mejora de la latencia aumenta las tasas de conversión de comercio electrónico en un 1,1 %. Para una tienda que gana 1 millón de dólares al mes, esa mejora de 100 ms se traduce en 132 000 dólares al año en ingresos adicionales. La optimización de CDN no es algo técnico agradable, es una palanca de ingresos directa.

Esta guía cubre la arquitectura CDN, estrategias de almacenamiento en caché, informática de punta y ajuste del rendimiento para aplicaciones web, tiendas de comercio electrónico y sistemas ERP.

Conclusiones clave

• Los encabezados de caché adecuados por sí solos pueden reducir la carga del servidor de origen entre un 60 y un 80 %.
• La optimización de imágenes a través de transformaciones CDN reduce el peso de la página entre un 40 y un 60 % sin cambios de código
• Edge Computing acerca la lógica API a los usuarios, reduciendo la latencia de 200 ms a 20 ms para las respuestas almacenadas en caché.
• Las estrategias de múltiples CDN brindan conmutación por error y optimización geográfica para audiencias globales

---

Fundamentos de la arquitectura CDN

Cómo funcionan las CDN

Una CDN es una red de servidores distribuidos globalmente que almacenan en caché y sirven contenido desde las ubicaciones más cercanas al usuario.

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)

Qué almacenar en caché

---

Encabezados de control de caché

Configuración de caché de 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',
          },
        ],
      },
    ];
  },
};

Encabezados de caché de 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;
}

---

Optimización de imagen

Las imágenes representan entre el 50% y el 70% del peso de la página en la mayoría de los sitios web. La optimización de imágenes basada en CDN elimina la necesidad de procesamiento de imágenes en tiempo de compilación.

Transformaciones de imágenes de 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"
/>

Componente de imagen Next.js con 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}`;
}

Impacto de la optimización de la imagen

---

Computación de borde

Trabajadores de Cloudflare para el almacenamiento en caché de API

// 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;
}

Casos de uso de Edge para comercio electrónico

---

Comparación de proveedores de CDN

Recomendación: Cloudflare para la mayoría de las empresas. El nivel gratuito es generoso, la red perimetral es la más grande y los trabajadores brindan informática perimetral potente sin infraestructura adicional.

---

Estrategias multi-CDN

¿Por qué Multi-CDN?

Ninguna CDN tiene el mejor rendimiento en todas las regiones. Una estrategia de múltiples CDN dirige a los usuarios a la CDN de mejor rendimiento para su ubicación:

Implementación

Utilice enrutamiento a nivel de DNS para dirigir a los usuarios a la CDN óptima:

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)

Para la mayoría de las empresas, una única CDN (Cloudflare) con una CDN de conmutación por error configurada a nivel de DNS proporciona suficiente redundancia sin la complejidad del enrutamiento completo de varias CDN.

---

Errores comunes de CDN

Error 1: almacenar en caché el contenido autenticado

Nunca almacene en caché respuestas que contengan datos específicos del usuario. Una respuesta almacenada en caché para el usuario A enviada al usuario B es una violación de seguridad. Utilice Cache-Control: private, no-store para todas las respuestas API autenticadas.

Error 2: Ignorar la destrucción de caché en implementaciones

Cuando implementa JavaScript o CSS nuevos, los usuarios pueden recibir versiones antiguas almacenadas en caché. Soluciones:

• Hash de contenido: incluya un hash en el nombre del archivo (app.a1b2c3d4.js). Next.js hace esto automáticamente.
• Borrar caché al implementar: purgue el caché CDN como parte de su proceso de implementación.
• URL versionadas: /v2/styles.css en lugar de /styles.css.

Error 3: Configuración incorrecta de CDN para contenido dinámico

Si su CDN almacena en caché contenido dinámico que no debería almacenarse en caché (respuestas API, páginas HTML con estado de usuario), proporcionará datos obsoletos o incorrectos. Audite las reglas de caché de su CDN con regularidad y utilice encabezados Vary para evitar conflictos de almacenamiento en caché.

---

Medición del desempeño

Objetivos principales de Web Vitals

Supervisión del rendimiento de la caché

# 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

Realice un seguimiento de la tasa de aciertos de la caché a lo largo del tiempo. Objetivo: más del 85 % para activos estáticos, más del 50 % para contenido dinámico.

---

Preguntas frecuentes

¿Necesitamos una CDN si nuestros usuarios están en un país?

Sí, pero los beneficios cambian. En lugar de una reducción de la latencia geográfica, obtiene: protección DDoS, descarga de terminación SSL, optimización de imágenes y reducción de la carga del servidor de origen. Incluso para audiencias de un solo país, una CDN reduce los costos del servidor y mejora la confiabilidad. El nivel gratuito de Cloudflare hace que esta sea una mejora sin costo alguno.

¿Cómo manejamos la invalidación de caché para contenido dinámico?

Tres estrategias: (1) TTL cortos (de 1 a 5 minutos) para contenido que cambia con frecuencia, (2) etiquetas de caché con purga por etiqueta para actualizaciones de contenido, (3) encabezados obsoletos mientras se revalidan que muestran contenido almacenado en caché mientras recuperan contenido nuevo en segundo plano. Utilice s-maxage para la caché CDN y max-age para la caché del navegador de forma independiente.

¿Deberíamos utilizar una CDN para nuestro sistema ERP?

CDN es beneficioso para activos estáticos de ERP (JavaScript, CSS, imágenes) y portales públicos. No almacene en caché las respuestas API autenticadas ni el contenido dependiente de la sesión. ECOSIRE configura el almacenamiento en caché de CDN como parte de nuestros servicios de implementación de Odoo para garantizar un almacenamiento en caché óptimo sin riesgos de seguridad.

¿Cómo interactúa CDN con la representación del lado del servidor?

Para las páginas SSR de Next.js, configure la CDN para que almacene en caché según la URL completa (incluidos los parámetros de consulta) con TTL cortos (de 1 a 5 minutos). Utilice stale-while-revalidate para ofrecer contenido ligeramente obsoleto mientras Next.js se regenera en segundo plano. ISR (regeneración estática incremental) funciona de forma natural con el almacenamiento en caché de CDN.

---

¿Qué viene después?

La optimización de CDN se combina naturalmente con pruebas de carga para validar el rendimiento bajo carga y monitoreo para realizar un seguimiento de las tasas de aciertos de caché y la latencia. Para conocer la hoja de ruta completa para la optimización de la infraestructura, consulte nuestra guía de DevOps para pequeñas empresas.

Comuníquese con ECOSIRE para obtener consultoría sobre configuración de CDN y optimización del rendimiento.

---

Publicado por ECOSIRE: ayuda a las empresas a entregar contenido más rápido en todo el mundo.