Gestión de Activos Estáticos: Entrega por CDN con Invalidación de Caché

Este artículo explica cómo gestionamos y entregamos CSS, JavaScript y otros activos estáticos de manera eficiente.

El Problema: Los Activos Estáticos Necesitan Optimización

Una página típica carga:

  • Archivos CSS: Hojas de estilo para diseño y maquetación

  • Archivos JavaScript: Código de aplicación y librerías

  • Imágenes: Imágenes de productos, miniaturas, iconos

  • Fuentes: Fuentes web para tipografía

Sin optimización:

  • Descargas lentas: Los archivos grandes toman tiempo

  • Sin caché: Se vuelven a descargar en cada visita

  • Sin compresión: Ancho de banda desperdiciado

  • Sin CDN: Lento para usuarios globales

Esto resulta en tiempos de carga de página de 3-5 segundos.

La Solución: S3 + CloudFront + Invalidación de Caché

Usamos una estrategia de tres partes:

  1. Almacenamiento en S3: Almacenamiento de objetos escalable para activos
  2. CDN CloudFront: Ubicaciones de borde globales para entrega rápida
  3. Invalidación de caché: URLs basadas en versión fuerzan actualizaciones

Almacenamiento de Activos Estáticos

Los activos estáticos se almacenan en S3:

  • Bucket de S3: Almacenamiento de objetos para archivos estáticos

  • Contenido: CSS, JavaScript, imágenes, fuentes

  • Organización: Estructurado por tipo de activo

Entrega con CloudFront

CloudFront sirve los activos estáticos:

  • Ubicaciones de borde: CDN global para entrega rápida

  • Caché: TTL largo para activos estáticos

  • Compresión: Gzip para activos basados en texto

  • SSL/TLS: HTTPS para toda la entrega de activos

Invalidación de Caché

Usamos versionado para la invalidación de caché:

  • Números de versión: Versión del activo en el nombre del archivo

  • Manifiesto: Registro central de versiones de activos

  • Actualizaciones automáticas: Nueva versión activa la invalidación de caché

Optimización de Activos

Optimizamos los activos para el rendimiento:

  • Minificación: Minificación de CSS y JavaScript

  • Optimización de imágenes: Formato WebP, imágenes responsivas

  • Hojas de sprites: Sprites CSS para iconos

  • División de código: Carga diferida para activos no críticos

Proceso de Activos

El proceso de activos fluye a través de estas etapas:

  1. Activos Fuente: CSS, JavaScript e imágenes originales
  2. Minificación: Eliminar espacios en blanco, acortar nombres de variables
  3. Versionado: Agregar hash de versión al nombre del archivo
  4. Carga a S3: Almacenar en almacenamiento de objetos
  5. CDN CloudFront: Distribuir a ubicaciones de borde
  6. Caché del Navegador: Caché en el lado del cliente

Inclusión de Activos

Los activos se incluyen en las plantillas:

  • CSS: <link rel="stylesheet">

  • JavaScript: <script src="">

  • Imágenes: <img src="">

  • Versión: Incluida automáticamente desde el manifiesto

Resumen

La gestión de activos estáticos proporciona:

  • Almacenamiento S3: CSS, JavaScript, imágenes, fuentes

  • CDN CloudFront: Entrega global rápida

  • Invalidación de caché: Números de versión para actualizaciones

  • Optimización: Minificación, compresión, optimización

  • Actualizaciones automáticas: Entrega de activos versionados