Optimice lo que el almacenamiento en caché no puede solucionar: automáticamente
El almacenamiento en caché de Shopify maneja la entrega de activos de manera eficiente. El cuello de botella en el desempeño que enfrentan la mayoría de las tiendas es lo que sucede después Llegan recursos almacenados en caché: JavaScript que bloquea el procesamiento, CSS no optimizado y carga de recursos mal ordenada. Realiza una prueba de velocidad gratuita en tu tienda para ver dónde se gasta realmente el tiempo de carga.
Thunder Page Speed Optimizer se centra en estas optimizaciones posteriores al caché:
- Pospone JavaScript no crítico para que el navegador muestre primero el contenido visible
- CSS crítico integrado: no se necesita un viaje de ida y vuelta adicional ni siquiera en un caché frío
- Optimiza el orden de carga de recursos para una pintura con contenido más grande más rápida
- Administra scripts de aplicaciones de terceros que omiten la capa de almacenamiento en caché de Shopify
Comprender el almacenamiento en caché le ayuda a tomar mejores decisiones sobre la elección de temas, la gestión de aplicaciones y las prioridades de rendimiento. Analicemos cada capa de almacenamiento en caché.
Capa 1: Almacenamiento en caché del navegador en Shopify
El almacenamiento en caché del navegador almacena archivos localmente en el dispositivo del visitante después de la primera descarga. Cuando vuelven a visitar (o navegan a otra página), el navegador carga estos archivos desde el disco en lugar de volver a descargarlos. Esta es la capa de almacenamiento en caché más impactante para los visitantes recurrentes.
Qué Shopify almacena en caché en el navegador
| Tipo de activo | Duración de la caché | Dominio |
|---|---|---|
| Tema CSS/JS | 1 año (nombres de archivos versionados) | cdn.shopify.com |
| Imágenes del producto | 1 año | cdn.shopify.com |
| Fuentes | 1 año | cdn.shopify.com |
| Activos estáticos de la aplicación | Varía (depende de la aplicación) | Varios dominios CDN |
| páginas HTML | Sin caché del navegador (o muy corto) | tutienda.myshopify.com |
Usos de Shopify URL dirigidas a contenido para recursos del tema. Cuando editas el CSS de tu tema, Shopify genera un nuevo nombre de archivo (como tema.css?v=123456), que obliga a los navegadores a descargar la nueva versión. El caché de 1 año de la versión anterior se vuelve irrelevante porque la URL cambió.
Esto significa que nunca tendrás que preocuparte de que los visitantes vean CSS o JavaScript obsoletos después de una actualización del tema: la detección de caché de Shopify lo maneja automáticamente.
Por qué HTML no se almacena en caché del navegador
Las páginas HTML contienen contenido dinámico: recuento de artículos del carrito, nombre del cliente, productos vistos recientemente y precios que pueden cambiar. El almacenamiento en caché de HTML en el navegador mostraría datos obsoletos. Shopify envía Control de caché: sin caché o corto edad máxima encabezados para HTML para garantizar que los visitantes siempre obtengan contenido nuevo de la página.
Aquí es donde el caché perimetral CDN de Shopify toma el control: ofrece HTML nuevo rápidamente sin tener que acceder al servidor de origen cada vez.
Capa 2: Almacenamiento en caché perimetral de CDN de Cloudflare
Shopify se asocia con Cloudflare, cuyo CDN tiene Más de 300 nodos de borde en todo el mundo. Esta es la capa que hace que Shopify Tiempo hasta el primer byte (TTFB) muy competitivo: normalmente entre 200 y 600 ms, y las páginas almacenadas en caché responden entre 50 y 150 ms.
Cómo funciona el almacenamiento en caché perimetral de CDN
Cuando un visitante solicita una página, la petición llega al nodo perimetral de Cloudflare más cercano. Si el nodo tiene una copia en caché, responde de inmediato sin tener que ir y volver a los servidores de origen de Shopify. De lo contrario, obtiene la página de Shopify, se la sirve al visitante y guarda una copia para solicitudes posteriores.
Flujo de solicitud: acierto o error de caché de borde
Qué se almacena en caché en el borde (y qué no)
Desde 2023, Shopify ha ampliado el almacenamiento en caché de borde HTML para visitantes anónimos. Esto es lo que califica:
✅ Almacenamiento en caché desde el borde
- Página de inicio (visitantes anónimos)
- Páginas de colección
- Páginas de productos (anónimas)
- Publicaciones y artículos de blog
- Páginas estáticas (Acerca de, Contacto)
- Todos los recursos estáticos (imágenes, CSS, JS, fuentes)
❌ No se puede almacenar en caché desde el borde
- Páginas de clientes que han iniciado sesión
- Página de carrito (única por sesión)
- Pago (siempre dinámico)
- Páginas con cookies de sesión únicas
- Modo de vista previa del tema
- Páginas con Liquid dinámico que fuerza la falta de caché
Puede verificar el estado de la caché marcando el estado-de-cache-cf encabezado de respuesta en DevTools. Vea nuestro Puntos de referencia de velocidad de Shopify sobre cómo el almacenamiento en caché afecta las cifras de rendimiento del mundo real.
Capa 3: Almacenamiento en caché a nivel de aplicación
Las aplicaciones individuales de Shopify pueden implementar sus propias estrategias de almacenamiento en caché para los datos que ofrecen. Esta es la capa más variable y la que puede ayudar o perjudicar el rendimiento de su tienda.
Cómo funciona el almacenamiento en caché de aplicaciones
Las aplicaciones que muestran contenido en su tienda (widgets de revisión, recomendaciones de productos, ventanas emergentes de ventas adicionales) generalmente realizan llamadas API a sus propios servidores. Las aplicaciones bien diseñadas almacenan en caché estas respuestas:
- Buenas aplicaciones almacena en caché las respuestas de la API en su CDN, ofrece HTML de widget estático siempre que sea posible y carga de forma asincrónica para que no bloqueen la representación de la página.
- Aplicaciones mal construidas realice nuevas llamadas API en cada carga de página, inyecte scripts sincrónicos que bloqueen la representación y no almacene nada en caché
El problema: no tienes visibilidad de cómo las aplicaciones manejan el almacenamiento en caché internamente. Un widget de revisión puede almacenar en caché las revisiones durante 5 minutos o recuperarlas cada vez; no hay forma de saberlo sin inspeccionar las solicitudes de red.
Scripts de aplicaciones y el problema de omitir el almacenamiento en caché
La mayoría de las aplicaciones de Shopify inyectan JavaScript a través de Etiqueta de secuencia de comandos o bloques de inserción de aplicaciones. Estos scripts se cargan desde dominios externos (no cdn.shopify.com), lo que significa:
- Requieren conexiones y búsquedas de DNS independientes (agrega entre 100 y 300 ms por dominio)
- Sus encabezados de caché están controlados por el desarrollador de la aplicación, no por Shopify.
- Pueden inyectar solicitudes adicionales que omiten todo el almacenamiento en caché de Shopify.
- Algunas aplicaciones agregan scripts de bloqueo de renderizado que retrasan la visualización de la página incluso cuando la página misma está almacenada en caché
Por eso una tienda puede tener una caché CDN perfecta y aun así parecer lenta: los scripts de terceros procedentes de aplicaciones crean cuellos de botella que la caché por sí sola no puede resolver.
Cuando se rompe el almacenamiento en caché de Shopify: escenarios comunes
Comprender cuándo no se aplica el almacenamiento en caché le ayuda a diagnosticar problemas de rendimiento:
Modo de vista previa del tema
Cuando obtienes una vista previa de los cambios de tema, Shopify desactiva el almacenamiento en caché perimetral por completo. Esta es la razón por la que tu tienda se siente más lenta en el editor de temas: estás viendo respuestas de origen sin caché. No juzgues el rendimiento según el modo de vista previa.
Inmediatamente después de las actualizaciones de contenido
Cuando actualizas un producto, editas una página o publicas una publicación de blog, Shopify invalida la caché CDN correspondiente. El primer visitante después de una actualización ve un MISS de caché (respuesta de origen). Los visitantes posteriores obtienen la versión actualizada en caché. Por lo general, esto se resuelve en segundos.
Geolocalización y Detección de Moneda
Las tiendas que utilizan precios basados en geolocalización, cambio de moneda o contenido específico de una región pueden ver reducida la efectividad de la caché perimetral. Si cada región geográfica tiene precios diferentes, la CDN necesita versiones en caché separadas por región, lo que reduce las tasas de aciertos de la caché.
Aplicaciones de personalización y pruebas A/B
Las aplicaciones que modifican el contenido de la página en función de segmentos de visitantes (pruebas A/B, recomendaciones personalizadas) crean efectivamente variantes de página únicas. Esto puede evitar el almacenamiento en caché perimetral porque el contenido varía según el visitante. Cuanta más personalización agregue, menos efectivo será el almacenamiento en caché de CDN.
Páginas de poco tráfico
Las cachés perimetrales tienen almacenamiento limitado. Las páginas que rara vez se visitan pueden ser expulsadas de la caché entre visitas, lo que resulta en más FALLOS de caché. Las páginas de alto tráfico (página de inicio, productos populares) mantienen cachés activas; las páginas de productos de cola larga con pocos visitantes pueden fallar consistentemente.
Lo que los comerciantes realmente pueden optimizar más allá del almacenamiento en caché
Como no puedes configurar el almacenamiento en caché de Shopify directamente, concéntrate en lo que Control puede : el rendimiento del front-end que determina la rapidez con la que se procesa su tienda después de que llegan los activos almacenados en caché.
| Optimización | Impacto | Tu control |
|---|---|---|
| Configuración de caché CDN | Alto | Ninguno: Shopify lo administra |
| Encabezados de caché del navegador | Medio | Ninguno: automático para activos de Shopify |
| Aplazamiento de recursos de bloqueo de renderizado | Muy Alto | Completo: mediante código de tema o Thunder |
| Incorporación de CSS crítico | Alto | Completo: mediante código de tema o Thunder |
| Optimización de imagen | Alto | Completo: tamaño, carga diferida, formatos |
| Gestión de scripts de aplicaciones | Alto | Parcial: eliminar aplicaciones no utilizadas, posponer secuencias de comandos |
| Sugerencias de recursos (preconexión, precarga) | Medio | Completo: mediante código de tema |
El patrón es claro: el almacenamiento en caché del lado del servidor es trabajo de Shopify; El rendimiento inicial es su trabajo. Incluso con un almacenamiento en caché perfecto, un tema que carga 2 MB de JavaScript que bloquea el procesamiento se sentirá lento. Incluso sin almacenamiento en caché, una interfaz bien optimizada se procesa rápidamente.
Thunder Page Speed Optimizer automatiza las optimizaciones de front-end en las filas verdes de arriba, las que tienen el mayor impacto y que usted realmente controla. Vea nuestro guía completa de optimización de velocidad para la estrategia completa.
Lista de verificación de optimización del almacenamiento en caché de Shopify
Si bien no puedes configurar el almacenamiento en caché directamente, estas acciones maximizan su efectividad:
- Audita tus aplicaciones instaladas : elimine aquellos que no generen ingresos de forma activa. Menos aplicaciones = menos scripts de terceros sin pasar por la capa de caché.
- Verificar tasas de aciertos de caché : use Chrome DevTools para verificar
estado-de-cache-cf: HITen sus páginas clave. Las bajas tasas de aciertos sugieren que la personalización o el contenido dinámico impiden el almacenamiento en caché. - Minimizar la personalización en las páginas de destino : Mantenga su página de inicio y sus páginas de colección lo más "anónimas" posible para obtener el máximo beneficio de caché perimetral.
- Uso carga diferida para imágenes : incluso las imágenes almacenadas en caché requieren tiempo de renderizado. La carga diferida pospone las imágenes fuera de la pantalla para que el navegador se centre primero en el contenido visible.
- Instale Thunder para optimización del front-end : automatizar el aplazamiento de JavaScript, la incorporación de CSS crítico y la priorización de recursos. Instalar ahora
- Prueba desde la perspectiva de tus clientes — Usar nuestro test de velocidad gratuito o WebPageTest desde ubicaciones geográficas que coincidan con tu base de clientes.
- No juzgues la velocidad en la vista previa del tema : el modo de vista previa desactiva el almacenamiento en caché. Pruebe en la tienda en vivo o utilice PageSpeed Insights.
Preguntas frecuentes sobre el almacenamiento en caché de Shopify
¿Shopify utiliza el almacenamiento en caché del navegador?
Sí. Shopify sirve activos estáticos (imágenes, CSS, JavaScript, fuentes) con encabezados Cache-Control largos — típicamente max-age=31536000 (1 año) para activos versionados en cdn.shopify.com. Esto significa que los visitantes recurrentes cargan estos archivos desde la caché local de su navegador en lugar de volver a descargarlos. Las páginas HTML reciben duraciones de caché más cortas o encabezados sin caché porque contienen contenido dinámico como el estado del carrito y elementos personalizados.
¿Puedo controlar el almacenamiento en caché CDN de Shopify?
No. Shopify administra su configuración CDN de Cloudflare automáticamente. No puede configurar encabezados de caché personalizados, purgar el caché CDN ni configurar reglas de almacenamiento en caché perimetral. Shopify determina qué páginas califican para el almacenamiento en caché perimetral en función de si el visitante es anónimo (almacenable en caché) o si ha iniciado sesión (no almacenable en caché). La ventaja es que no necesitas preocuparte por la invalidación del caché: Shopify se encarga de ello cuando actualizas productos, colecciones o archivos de temas.
¿Por qué mi tienda Shopify muestra contenido diferente a diferentes usuarios si el almacenamiento en caché está activo?
El almacenamiento en caché de Shopify es inteligente con respecto a la personalización. El almacenamiento en caché de borde HTML solo se aplica a visitantes anónimos. Cuando un cliente inicia sesión, añade artículos a su carrito o tiene cookies que indican una sesión única, Shopify omite la caché de borde y genera una página nueva desde el servidor de origen. Esto asegura que los clientes que han iniciado sesión vean su carrito correcto, los detalles de su cuenta y las recomendaciones personalizadas, mientras que los navegadores anónimos obtienen la versión rápida en caché.
¿Las aplicaciones de Shopify afectan el rendimiento del almacenamiento en caché?
Sí, de dos maneras. Primero, las aplicaciones que inyectan contenido dinámico y personalizado (como productos vistos recientemente o precios basados en geolocalización) pueden evitar que las páginas se almacenen en caché de borde porque el contenido varía por visitante. Segundo, las aplicaciones añaden sus propios archivos JavaScript y CSS que el navegador debe descargar — aunque estos activos estáticos de la aplicación suelen almacenarse en la CDN de Shopify después de la primera carga. Reducir las aplicaciones innecesarias mejora tanto las tasas de acierto de caché como el tiempo de carga general.
¿Cómo sé si mis páginas de Shopify se están sirviendo desde la caché?
Abra Chrome DevTools (F12), vaya a la pestaña Red y recargue su página. Haga clic en la solicitud principal del documento HTML y verifique los encabezados de respuesta. Busque 'cf-cache-status': un valor de 'HIT' significa que Cloudflare sirvió la página desde la caché de borde, 'MISS' significa que fue al servidor de origen de Shopify, y 'DYNAMIC' significa que la página no es elegible para el almacenamiento en caché de borde. Para los activos estáticos en cdn.shopify.com, normalmente verá 'HIT' después de la primera carga.
¿Borrar la memoria caché de mi navegador afecta la velocidad de mi tienda Shopify para los clientes?
No. Borrar la caché de tu propio navegador solo afecta tu experiencia local. Los cachés del navegador de sus clientes son independientes. Sin embargo, si está probando la velocidad de su tienda, borrar su caché le brindará una experiencia de "primera visita", útil para comprender lo que experimentan los nuevos visitantes. Para realizar pruebas de velocidad precisas, utilice el modo incógnito o herramientas como PageSpeed Insights que simulan visitas sin caché.
El almacenamiento en caché es el punto fuerte de Shopify: el rendimiento del front-end es tuyo
El sistema de almacenamiento en caché de tres capas de Shopify (navegador, borde CDN y nivel de aplicación) maneja el servidor y la entrega automáticamente. Los activos estáticos obtienen encabezados de caché del navegador durante un año. Las páginas HTML anónimas se almacenan en caché en más de 300 nodos de Cloudflare. No es necesario configurar nada de esto.
La verdadera oportunidad de rendimiento es la optimización del front-end: cómo su tema presenta el contenido después de que llegan los recursos almacenados en caché. Recursos de bloqueo de renderizado, no optimizado Entrega de CSS, y pesado scripts de terceros son los cuellos de botella que el almacenamiento en caché no puede resolver.
Prueba la velocidad de tu tienda ahora para ver qué tan eficientemente se procesa su tienda; luego, deje que Thunder optimizar las partes que el almacenamiento en caché deja en la mesa. Para conocer la estrategia de optimización completa, consulte nuestra guía completa de optimización de velocidad de Shopify.
Optimización de velocidad experta para tu tienda
Nuestro equipo se encarga de todo — optimización del tema, limpieza de apps, garantía de Core Web Vitals. La mayoría de tiendas optimizadas en 2 semanas.
✅ Garantía Core Web Vitals · ⚡ Entrega en 2 semanas · 🎁 6 meses de Thunder gratis
Desde €1.500 · Más información