valmex

Estrategia de caché y versionado con SiteGround + Elementor (Compartida)

Resumen

Describe el conflicto entre caching de SiteGround/SG Optimizer y la regeneración de CSS/JS de Elementor; las opciones evaluadas y la solución estándar para evitar estilos desactualizados, incorporando versionado de recursos para minimizar al máximo los casos de caché obsoleta.

---

1. Contexto

• Cambios en Elementor generan nuevos archivos en /wp-content/uploads/elementor/css/ y /wp-content/uploads/elementor/js/.
• SiteGround sirve estáticos desde caché (NGINX Direct Delivery) y los navegadores también cachean.
• Sin invalidación adecuada, algunos usuarios reciben estilos antiguos hasta forzar recarga.
• Para reducir este problema se utiliza versionado de recursos (normalmente a través de parámetros ?ver= en las URLs).

2. Señales en encabezados

• Estáticos (CSS/JS): típicamente x-proxy-cache: HIT.
• HTML dinámico: sg-f-cache: BYPASS o x-proxy-cache: MISS bajo ciertas condiciones (usuarios logueados, cookies, etc.).

3. Opciones evaluadas

• Versionado automático de archivos (File Versioning).
• Regeneración y ajustes en Elementor.
• Exclusión de rutas de Elementor de la caché dinámica.
• Desactivar minify/combine CSS/JS en SG Optimizer para evitar duplicar optimizaciones.
• Versionado dinámico de CSS/JS del tema usando filemtime en wp_enqueue_style/wp_enqueue_script.

4. Solución estándar adoptada

1. Activar y respetar el versionado de recursos:
   • Permitir que WordPress y los plugins usen parámetros ?ver= (no eliminar query strings).
   • Asegurar que cualquier CSS/JS del tema/child theme se encola con un número de versión dinámico (por ejemplo, filemtime).
2. Mantener caché dinámica activada con purga automática:
   • Dynamic Cache ON.
   • NGINX Direct Delivery ON.
3. Desactivar minify/combine CSS/JS en SG Optimizer cuando Elementor administre los estilos:
   • Evitar doble minificación o combinación que pueda generar archivos “agregados” difíciles de invalidar.
4. Regenerar CSS desde Elementor tras cambios relevantes:
   • Elementor → Herramientas → Regenerar archivos CSS.
5. Validar siempre en incógnito y, cuando sea posible, desde herramientas externas:
   • Ej.: PageSpeed, WebPageTest, PagePixels, etc., para simular “otra red”.

5. Procedimiento operativo (resumen)

1. Aplicar cambios en Elementor.
2. Elementor → Herramientas → Regenerar archivos CSS.
3. SG Optimizer → Purgar caché.
4. Site Tools → Purgar caché dinámica (si aplica).
5. Validar en modo incógnito y, opcionalmente, con una herramienta externa.

6. Diagrama de flujo

```mermaid graph TD; A[Inicio] –> B{¿Cambio en Elementor?} B – No –> Z[No se requiere acción] B – Sí –> C[Regenerar CSS en Elementor] C –> D[Purgar caché SG Optimizer] D –> E[Purgar Caché Dinámica (Site Tools)] E –> F{¿Se modificaron CSS/JS personalizados del tema?} F – No –> H[Fin] F – Sí –> G[Verificar versionado dinámico (filemtime) activo] G –> H[Fin]