Arreglar Shopify CLS: 6 soluciones comprobadas para el cambio de diseño (2026)

¿Qué es CLS y por qué es importante para Shopify?

Cumulative Layout Shift (CLS) es uno de los tres de Google Core Web Vitals : las métricas que influyen directamente en su clasificación de búsqueda y miden la experiencia real del usuario. mientras LCP mide qué tan rápido se carga el contenido y El INP mide la interactividad, medidas CLS estabilidad visual : si los elementos de tu página permanecen fijos o cambian inesperadamente.

Imagínese esto: un cliente está a punto de tocar "Agregar al carrito" en la página de su producto cuando de repente se carga un widget de reseña arriba, presionando el botón hacia abajo. Accidentalmente tocan un enlace diferente y abandonan tu tienda. Ése es un problema de CLS y le cuesta ingresos reales.

CLS se calcula multiplicando el fracción de impacto (cuánto de la ventana gráfica se desplazó) por el fracción de distancia (qué tan lejos se movieron los elementos). La puntuación no tiene unidades, no se mide en segundos o milisegundos como LCP e INP.

Por qué CLS es importante para tu tienda Shopify:

• Clasificaciones SEO: Google utiliza CLS como señal de clasificación: un CLS deficiente significa posiciones de búsqueda más bajas
• Conversiones: Los cambios de diseño provocan clics erróneos que frustran a los clientes y aumentan la tasa de rebote
• Confianza del usuario: Las páginas que saltan se sienten rotas y sin pulir
• Impacto móvil: CLS suele ser peor en dispositivos móviles donde las pantallas son más pequeñas y los cambios son más notorios

¿La buena noticia? A diferencia de LCP, que depende en parte de la infraestructura del servidor de Shopify, CLS está casi por completo bajo tu control. La mayoría de las correcciones de CLS implican cambios de CSS y atributos HTML adecuados; no se necesitan actualizaciones del servidor. Según un análisis de HTTP Archive de 2026, el 38% de las tiendas Shopify todavía tienen CLS "deficientes" en dispositivos móviles, por lo que arreglar el tuyo te coloca por delante de la competencia. ¿Quiere comprobar su puntuación CLS actual? Realiza una prueba de velocidad gratuita en tu tienda y comparar con Puntos de referencia de velocidad de Shopify.

La solución fácil: optimización automática de CLS

Antes de sumergirse en las ediciones manuales de temas, existe un enfoque más rápido. Thunder Page Speed Optimizer aborda automáticamente varias de las causas más comunes de CLS alto en las tiendas Shopify.

Cómo medir la puntuación CLS de tu tienda Shopify

Antes de corregir CLS, necesita conocer su puntuación actual e identificar exactamente qué elementos están cambiando. Aquí están las mejores herramientas para las tiendas Shopify:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('CLS shift:', entry.value.toFixed(4));
      for (const source of entry.sources) {
        console.log('  Element:', source.node);
      }
    }
  }
}).observe({ type: "layout-shift", buffered: true });

Solución n.º 1: agregar dimensiones a todas las imágenes

Las imágenes sin atributos explícitos de ancho y alto son las #1 cause of CLS, que representa aproximadamente el 60 % de todos los problemas de cambio de diseño. Cuando el navegador muestra su página por primera vez, no sabe qué tan alta será la imagen, por lo que la representa con altura cero. Cuando se carga la imagen, todo lo que está debajo salta hacia abajo.

El problema

Muchos temas de Shopify generan imágenes sin dimensiones, especialmente en cuadrículas de productos, páginas de colecciones e imágenes destacadas de publicaciones de blogs. El navegador no asigna espacio y luego cambia el contenido cuando llegan las imágenes.

La solución: atributos de ancho y alto

Agregar ancho y altura atributos a cada Etiqueta . Esto le indica al navegador la relación de aspecto para que pueda reservar el espacio correcto antes de que se cargue la imagen:

Luego, en tu CSS, asegúrate de que las imágenes se escalen de manera receptiva sin alterar la relación de aspecto:

img {
  max-width: 100%;
  height: auto;
}

Shopify Liquid: usar image_tag

Si estás editando archivos de temas de Liquid, el enfoque más sencillo es usar Shopify. etiqueta_imagen El filtro , que agrega automáticamente atributos de ancho y alto:

{{ product.featured_image | image_url: width: 800 | image_tag }}

Esto genera un tag with proper width, height, and srcset attributes — eliminating CLS from product images automatically.

Alternativa: relación de aspecto CSS

Para contenedores de imágenes donde desea una relación de aspecto fija independientemente de las dimensiones reales de la imagen (como cuadrículas de productos), use CSS relación de aspecto Propiedad :

.product-card__image {
  aspect-ratio: 1 / 1;  /* Square */
  width: 100%;
  object-fit: cover;
}

Esto es especialmente útil para cuadrículas de colección donde desea alturas de tarjetas uniformes: el navegador reserva espacio para la relación de aspecto exacta y ajuste de objeto: cubierta recorta la imagen para que se ajuste.

Solución n.º 2: reservar espacio para contenido inyectado en la aplicación

Las aplicaciones de Shopify que inyectan contenido en tu tienda (estrellas de reseñas, insignias de confianza, barras de anuncios, íconos de pago, contadores de inventario) son la segunda causa más importante de CLS. Estas aplicaciones se cargan a través de JavaScript, lo que significa que su contenido aparece después la página ya se ha renderizado. Cuando aparece el contenido, todo lo que lo rodea cambia.

Bloques de aplicaciones: usar altura mínima

Para aplicaciones que usan Extensiones de aplicaciones temáticas (bloques de aplicaciones), puede establecer una altura mínima en su contenedor usando CSS personalizado en el Editor de temas. Seleccione la sección principal del bloque de aplicaciones y luego agregue:

/* Reserve space for app block content */
.shopify-app-block {
  min-height: 24px; /* Adjust to match your app's rendered height */
}

Mida la altura real renderizada del contenido de la aplicación (use DevTools → inspeccionar elemento → verifique la altura), luego configure altura mínima a ese valor. Incluso si la altura exacta varía, establecer un mínimo cercano reduce significativamente la distancia de cambio.

Scripts que no son de bloqueo de aplicaciones: soluciones alternativas de CSS

Algunas aplicaciones aún inyectan contenido a través de la API ScriptTag anterior (no bloques de aplicaciones). Estos son más difíciles de solucionar. Deberá identificar el selector del elemento inyectado y reservar espacio con CSS. Por ejemplo, si se inserta un widget de reseña encima de la descripción de su producto:

/* Reserve space for a review widget that loads late */
:not(.review-widget-wrapper) + .product__description {
  margin-top: 80px; /* Height of the review widget */
}

Este enfoque es frágil: si la aplicación cambia su estructura HTML o mueves el widget, el CSS se rompe. Una alternativa más fácil de mantener: mover el contenido de la aplicación debajo del pliegue donde los turnos tienen menos impacto en CLS, o cambiar a una aplicación que admita bloques de aplicaciones.

Barras de anuncios y pancartas

Las barras de anuncios que aparecen en la parte superior de la página son una fuente CLS clásica. Cuando se cargan tarde, todos los elementos de la página se desplazan hacia abajo. Dos enfoques:

• Renderizar del lado del servidor: Utilice la barra de anuncios integrada de su tema (representada en Liquid, no en JavaScript) en lugar de una aplicación de terceros
• Reserva el espacio: Agregue un marcador de posición de altura fija en el encabezado de su tema que coincida con la altura del banner

/* Reserve 40px for announcement bar */
.header-wrapper {
  padding-top: 40px;
}

Solución n.º 3: Optimice la carga de fuentes web para evitar CLS

Las fuentes web causan CLS a través de un fenómeno llamado FOUT (Destello de texto sin estilo). Cuando su fuente personalizada aún no se ha cargado, el navegador muestra el texto en una fuente del sistema alternativo. Cuando llega la fuente personalizada, el texto se vuelve a representar y, debido a que las dos fuentes tienen métricas diferentes (ancho de carácter, alto de línea, espacio entre letras), el texto se desplaza, empujando el contenido circundante.

Paso 1: Usar visualización de fuente: intercambio (u opcional)

En tu @font-face declaraciones, conjunto visualización de fuente: intercambiar para mostrar el texto alternativo inmediatamente, luego cambie a la fuente personalizada cuando esté listo:

@font-face {
  font-family: 'YourBrandFont';
  src: url('/fonts/brand-font.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

Para CLS mínimo, visualización de fuente: opcional es aún mejor: solo usa la fuente personalizada si se carga dentro de ~100 ms; de lo contrario, se queda con la fuente alternativa. No intercambiar fuentes significa que no hay CLS, pero es posible que su fuente personalizada no se muestre en conexiones lentas.

Paso 2: Precargar fuentes críticas

Agregue sugerencias de precarga para sus archivos de fuentes más importantes en su tema <head>:

<link rel="preload" href="/fonts/brand-font.woff2" as="font" type="font/woff2" crossorigin>

Solo precargue 1 o 2 fuentes (la fuente principal del encabezado y del cuerpo). La precarga de demasiadas fuentes desperdicia ancho de banda y puede ralentizar otros recursos críticos.

Paso 3: Hacer coincidir las métricas de fuentes alternativas

El CSS ajuste de tamaño, anulación de ascenso, y anulación de descenso Las propiedades le permiten modificar su fuente alternativa para que coincida con las métricas de su fuente personalizada, minimizando el cambio cuando ocurre el intercambio:

@font-face {
  font-family: 'BrandFallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Herramientas como Generador de fuentes alternativas puede calcular estos valores de anulación para sus fuentes específicas. Esta es una de las correcciones de CLS más impactantes para temas de Shopify con muchas fuentes. Para profundizar más en el rendimiento de las fuentes, consulte nuestra guía completa de optimización de velocidad de Shopify.

Solución n.º 4: evitar cambios de CSS que lleguen tarde

Cuando CSS se carga después de que la página ya ha comenzado a renderizarse, el navegador vuelve a calcular los diseños, lo que hace que el contenido salte a medida que se aplican nuevos estilos. Esto sucede comúnmente con:

• Archivos CSS cargados a través de @import dentro de otros archivos CSS (carga encadenada)
• Hojas de estilo de aplicaciones de terceros que se cargan de forma asincrónica
• Estilos inyectados con JavaScript (comunes con los componentes React/Vue en los temas)

La solución: CSS crítico en línea

Inserte el CSS necesario para el contenido de la mitad superior de la página directamente en su <head>. This ensures the browser has all the styles it needs for the initial render — no shifts from late-arriving stylesheets.

Extraer e insertar CSS crítico manualmente es complejo y propenso a errores. Aquí es donde brilla Thunder: identifica e integra automáticamente CSS crítico para cada tipo de página y luego pospone el resto. El resultado: cero cambios de diseño relacionados con CSS sin ningún trabajo manual.

Evite CSS @import

Si tu tema o aplicaciones usan @import dentro de los archivos CSS, reemplácelos con Etiquetas Etiquetas en el HTML. @import crea una cascada: el navegador descarga CSS, descubre la importación y luego descarga más CSS. Cada paso corre el riesgo de tener que volver a calcular el diseño y cambiarlo. Más información sobre arreglando recursos que bloquean el renderizado en Shopify.

Solución n.º 5: utilice transformaciones CSS en lugar de animaciones que activen el diseño

Animaciones que cambian la apariencia de un elemento. arriba, izquierda, ancho, altura, margen, o acolchado activa recálculos de diseño que cuentan como CLS. En su lugar, utilice transformar y opacidad : son manejados por el compositor de GPU y no provocan cambios en el diseño.

.slide-in {
  animation: slideIn 0.3s ease;
}
@keyframes slideIn {
  from { margin-left: -100px; }
  to { margin-left: 0; }
}

.slide-in {
  animation: slideIn 0.3s ease;
}
@keyframes slideIn {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}

Audite el CSS de su tema para detectar cualquier animación que utilice propiedades que activen el diseño. Culpables comunes: barras de anuncios deslizables, menús de navegación en expansión y efectos de zoom de imágenes de productos. También revisa cualquier scripts de terceros que agregan efectos de animación.

Solución n.º 6: estabilizar presentaciones de diapositivas y carruseles

Las presentaciones de diapositivas de héroes y los carruseles de productos son una fuente frecuente de CLS. El carrusel JavaScript se inicializa después de cargar la página, calcula las dimensiones de la diapositiva y reorganiza los elementos, lo que a menudo provoca cambios visibles.

Reservar la altura de la presentación de diapositivas

Establezca una relación de aspecto fija o una altura mínima en el contenedor de su presentación de diapositivas para que el navegador reserve el espacio correcto antes de que se inicialice JavaScript:

.slideshow-container {
  aspect-ratio: 16 / 9;  /* Or your preferred ratio */
  width: 100%;
  overflow: hidden;
  background-color: #f5f5f5; /* Prevent flash of empty space */
}

Renderizar la primera diapositiva del lado del servidor

La mayoría de los temas modernos de Shopify (como Dawn) procesan la primera diapositiva en Liquid para que se muestre inmediatamente, luego JavaScript se hace cargo de las transiciones. Si su tema solo muestra diapositivas a través de JavaScript, considere reestructurarlo para mostrar la primera diapositiva en HTML/Liquid; esto elimina por completo el cambio inicial.

Considere eliminar la presentación de diapositivas por completo. Varios estudios muestran que las presentaciones de diapositivas principales a menudo tienen un rendimiento inferior al de una sola imagen principal estática tanto en conversiones como en rendimiento. Si su presentación de diapositivas está causando problemas persistentes de CLS, un héroe estático bien diseñado puede mejorar tanto su conversiones y sus Core Web Vitals. Para obtener más información sobre cómo optimizar sus imágenes destacadas, consulte nuestra Guía de optimización de imágenes de Shopify. El CLS alto también aumenta tasas de rebote, lo que le cuesta ingresos.

Correcciones manuales de CLS frente a Thunder: comparación lado a lado

Así es como se compara el enfoque manual con permitir que Thunder maneje la optimización CLS automáticamente:

Las correcciones manuales le brindan control total pero requieren mantenimiento continuo. Thunder maneja las optimizaciones más impactantes automáticamente y se adapta a medida que cambia su tienda. Muchos comerciantes combinan ambos: instalan Thunder para el trabajo pesado y luego aplican correcciones manuales para problemas específicos del tema. Ver planes de precios de Thunder.

Preguntas frecuentes