Caching — Visión general
Este módulo documenta prácticas de caching aplicables a los sitios de Valmex cuando se utilicen SiteGround, SG Optimizer y constructores visuales como Elementor.
Política: La implementación actual de estas políticas de caching aplica exclusivamente a los sitios de Operadora de Fondos y Valmex App. Para Casa de Bolsa u otros proyectos, no se aplican estas regulaciones.
Estrategia aplicada
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
-
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).
-
Mantener caché dinámica activada con purga automática:
- Dynamic Cache ON.
- NGINX Direct Delivery ON.
-
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.
-
Regenerar CSS desde Elementor tras cambios relevantes:
- Elementor → Herramientas → Regenerar archivos CSS.
-
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)
- Aplicar cambios en Elementor.
- Elementor → Herramientas → Regenerar archivos CSS.
- SG Optimizer → Purgar caché.
- Site Tools → Purgar caché dinámica (si aplica).
- Validar en modo incógnito y, opcionalmente, con una herramienta externa.
Procedimiento de mantenimiento
Objetivo
Garantizar que los cambios en estilos/plantillas se reflejen inmediatamente sin romper el frontend ni perder beneficios de caché.
1. Cambios menores
Definición: ajustes de texto/color/espaciado; cambios en widgets sin impacto global.
Pasos:
- Elementor → Herramientas → Regenerar archivos CSS.
- SG Optimizer → Purgar caché.
- Validar en incógnito y revisar consola (404/JS errors).
2. Cambios mayores
Definición: plantillas globales, estilos globales, theme child, CSS personalizado extenso.
Pasos:
- Elementor → Regenerar CSS y datos.
- SG Optimizer → Purgar caché (completa).
- Site Tools → Purgar caché dinámica.
- Confirmar File Versioning activo.
- Desactivar Minify/Combine en SG Optimizer si hay optimizaciones del tema/Elementor.
- Validar en incógnito (desktop y móvil).
3. Checklist de validación
4. Mantenimiento preventivo
- Mantener SG Optimizer y Elementor en versiones estables.
- Evitar doble optimización (no minificar/combinar en múltiples plugins).
- Revisar mensualmente TTFB y errores estáticos.
- Documentar cambios que afecten
/wp-content/uploads/elementor/.