Evitar grandes cambios de diseño en Shopify: encuentre y corrija elementos inestables

Por qué ocurren grandes cambios de diseño en Shopify

La guía de Google sobre CLS define un cambio de diseño como contenido visible que se desplaza de un fotograma renderizado al siguiente. El diagnóstico de Lighthouse «Avoid large layout shifts» enumera los elementos afectados, pero no siempre son la causa raíz. Si una barra de descuento aparece encima del título del producto, Lighthouse puede señalar el título como desplazado aunque la barra haya provocado el movimiento.

Las tiendas Shopify son vulnerables porque muchas partes de la página son dinámicas: barras de anuncios, incrustaciones de aplicaciones, banners de consentimiento, estrellas de reseñas, medios de productos, selectores de variantes, encabezados adhesivos, cajones de carritos, filtros de colección, bloques de recomendaciones y fuentes. Cada uno puede cargar después de la primera pintura y desplazar el contenido.

Si su tienda no cumple con el Core Web Vital real, comience con la guía detallada para corregir el CLS en Shopify. Este artículo se centra en el diagnóstico de PageSpeed ​​y los patrones temáticos prácticos que suelen provocarlo.

Manual paso a paso: corregir y evitar grandes cambios de diseño en Shopify

1. Identificar el elemento desplazado y la causa sobre él.

En PageSpeed Insights, expanda el diagnóstico y observe los elementos desplazados. Luego abra Chrome DevTools, registre un seguimiento de rendimiento con limitación de red y CPU para móviles y observe la pista Layout Shift. Mire encima del elemento desplazado para detectar contenido que aparece tarde, medios redimensionados, widgets inyectados o cambios de fuente.

Pruebe las plantillas que importan comercialmente: página de inicio, páginas de productos más vendidos, colecciones principales y páginas de destino. Combine estas pruebas con el Panel de rendimiento web de Shopify para no optimizar una ejecución de laboratorio mientras los datos de campo siguen fallando.

2. Reservar espacio para imágenes y vídeos

Corregir la falta de dimensiones en las imágenes es la solución más común. Utilice ancho y alto explícitos para imágenes sin formato o reserve un espacio de relación de aspecto alrededor de medios dinámicos. Esto protege las cuadrículas de productos, los lookbooks, los mosaicos de la página de inicio y las miniaturas de artículos.

.media-slot {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f6f6f6;
}

.media-slot img,
.media-slot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

Si PageSpeed informa específicamente las dimensiones de la imagen, utilice la guía de ancho y alto de imagen de Shopify.

3. Reserve espacio para los widgets de las aplicaciones antes de que se carguen

Las estrellas de reseñas, los bloques de fidelidad, las recomendaciones y los iniciadores de chat a menudo se cargan después de que el tema se haya pintado. Si el widget aparece en la primera ventana gráfica, reserve el espacio en su tema para que el contenido debajo no salte.

<div class="reviews-summary-slot" data-reviews-summary>
  <!-- Review app injects stars here -->
</div>

.reviews-summary-slot {
  min-height: 32px;
  display: flex;
  align-items: center;
}

Para tiendas con muchas aplicaciones, lea Aplicaciones de Shopify que ralentizan las tiendas y arreglar scripts de aplicaciones que ralentizan Shopify.

4. Estabilizar las barras de anuncios, promociones y consentimiento

Una barra superior que aparece después de que se ejecuta JavaScript puede empujar toda la página hacia abajo. Renderice el espacio en el lado del servidor o reserve su altura desde la primera pintura. No lo inyecte encima del encabezado después de que la página ya sea visible.

.announcement-slot {
  min-height: 40px;
}

@media (max-width: 749px) {
  .announcement-slot {
    min-height: 56px;
  }
}

5. Corregir intercambios de fuentes que cambian el tamaño de los encabezados

Las fuentes pueden provocar cambios de diseño cuando el texto de reserva ocupa un espacio distinto al de la fuente de marca definitiva. Utilice font-display: swap, reduzca el número de variantes y ajuste las métricas de la fuente de reserva cuando sea necesario. La guía de optimización de fuentes y la guía para reducir la carga de fuentes explican estos ajustes con más detalle.

6. Animar con transform, no con propiedades de diseño

Evite animar las propiedades top, left, height, margin o padding para los efectos de entrada. Esas propiedades obligan al navegador a recalcular el diseño. Utilice transform y opacity cuando necesite movimiento.

.promo-card {
  transform: translateY(12px);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

.promo-card.is-visible {
  transform: translateY(0);
  opacity: 1;
}

Solución manual frente a solución Thunder

Cómo confirmar que se han solucionado los grandes cambios de diseño

Vuelva a realizar la prueba con PageSpeed Insights y la prueba de velocidad gratuita de Shopify. El diagnóstico de cambio de diseño grande debería reducirse y CLS debería tener una tendencia hacia 0,1 o menos. Observe también la carga de la página móvil con limitación de red y CPU. La observación directa permite detectar desplazamientos que una sola puntuación de laboratorio puede ocultar.

Si los cambios de diseño son solo uno de los problemas, continúe con la guía completa de optimización de velocidad de Shopify, Optimización LCP, y Correcciones de Shopify INP. Para trabajos prácticos, compare optimización de velocidad profesional con automatización sin código.

FAQ