Páginas lentas de GIF animados de Shopify: utilice formatos de vídeo

Por qué los GIF animados perjudican la velocidad de Shopify

GIF es conveniente, pero ineficiente para los medios de escaparate modernos. Una demostración de producto en bucle, un clip de movimiento de tela, una animación de antes y después o un banner de héroe pueden ocupar varios megabytes como GIF. El navegador tiene que descargarlo, decodificarlo y renderizarlo, al mismo tiempo que maneja la imagen principal, CSS, scripts, incrustaciones de aplicaciones y datos del producto.

La guía Lighthouse de Chrome recomienda formatos de vídeo como MP4 o WebM para contenido animado porque los GIF grandes desperdician ancho de banda en comparación con el vídeo. La documentación multimedia de productos de Shopify admite archivos GIF animados y WebP, y las imágenes de productos pueden ser grandes, pero la compatibilidad no es lo mismo que el rendimiento. Una tienda puede subir un GIF que técnicamente funciona y aún así no pasar las pruebas de velocidad móvil.

El problema es más doloroso cuando el GIF aparece en la mitad superior de la página. Si el GIF se convierte en el elemento visible más grande, puede afectar al LCP. Si se carga en la mitad inferior de la página pero se inicia inmediatamente, puede agregar una carga útil de red innecesaria. Si aparece dentro de un carrusel de productos sin dimensiones estables, puede contribuir al CLS. Utilice el Guía de optimización de Shopify LCP y guía de entrega de imágenes si esos diagnósticos aparecen juntos.

Cuándo conservar un GIF y cuándo reemplazarlo

Conserve un GIF solo cuando sea pequeño, decorativo y no forme parte de la primera pantalla. Reemplácelo cuando sea una demostración de producto, un banner de ancho completo, un bucle de página de inicio, una animación de página de destino o cualquier nombre de archivo de PageSpeed ​​en el diagnóstico de contenido animado.

Utilice una imagen estática cuando el movimiento no cambie la decisión de compra. Utilice MP4 cuando los compradores necesiten comprender el movimiento, la escala, el ensamblaje, la textura o el ajuste. Utilice WebM como fuente adicional opcional si su flujo de trabajo lo admite, pero mantenga MP4 para una amplia compatibilidad.

Manual paso a paso: Reemplazar GIF de Shopify con video

1. Encuentra el GIF caro

Ejecute PageSpeed Insights, Chrome DevTools Network y el prueba de velocidad gratuita de Shopify. Ordene las solicitudes de red por tamaño y busque .gif Archivos . Compruebe si el GIF está en la mitad superior de la página, dentro de una galería de productos, cargado por un creador de páginas o inyectado por una aplicación.

2. Exporta la animación como MP4

Mantenga el video breve, silenciado, en bucle y recortado al tamaño exacto de visualización. Evite exportar un clip de 1920 px de ancho para una tarjeta de producto de 420 px. Un objetivo práctico para el movimiento de la interfaz de usuario del producto suele ser inferior a 1 MB, y cuanto más pequeño sea, mejor en dispositivos móviles.

3. Utilice una imagen de póster y dimensiones estables

La imagen del póster le da al navegador algo que pintar rápidamente antes de que se cargue el video. El ancho, el alto o la relación de aspecto protegen la estabilidad del diseño.

<video
  class="product-motion"
  autoplay
  muted
  loop
  playsinline
  preload="metadata"
  poster="{{ 'folding-demo-poster.jpg' | asset_url }}"
  width="900"
  height="900"
>
  <source src="{{ 'folding-demo.webm' | asset_url }}" type="video/webm">
  <source src="{{ 'folding-demo.mp4' | asset_url }}" type="video/mp4">
</video>

4. Movimiento lento de carga debajo del pliegue

Si el vídeo no es visible en el primer renderizado, evite reproducirlo ansiosamente. Utilice primero un póster y luego establezca la fuente cuando la sección se acerque a la ventana gráfica.

const videos = document.querySelectorAll('video[data-src]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;

    const video = entry.target;
    video.src = video.dataset.src;
    video.load();
    observer.unobserve(video);
  });
}, { rootMargin: '300px' });

videos.forEach((video) => observer.observe(video));

5. No reproduzca automáticamente todos los vídeos de tarjetas de productos

Las páginas de colección con muchas tarjetas animadas pueden volverse pesadas rápidamente. Prefiera una imagen de producto estática, luego reproduzca el movimiento al pasar el cursor o tocar. Esto protege a los usuarios de dispositivos móviles y mantiene los filtros de recopilación receptivos.

.product-motion {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: #f3f4f6;
}

@media (prefers-reduced-motion: reduce) {
  .product-motion {
    display: none;
  }
}

6. Vuelva a probar LCP, peso de página e interacción

Después de reemplazar el GIF, vuelva a probar la misma URL. Debería ver un tamaño de transferencia más bajo y menos bytes de imágenes animadas. Si el GIF estaba en la mitad superior de la página, compare LCP. Si la página todavía se siente lenta, verifique enormes cargas útiles de red, velocidad de la página del producto, y Optimización de vídeos de Shopify.

Solución manual frente a solución Thunder

Cree una mejor regla de medios para su tienda

Utilice esta regla: imagen estática primero, video cuando el movimiento ayude a la conversión, GIF solo cuando el archivo sea pequeño y no crítico. Esto mantiene la experiencia del producto rica sin que cada visitante móvil descargue animaciones pesadas antes de comprender la oferta.

Para la secuencia de optimización completa, utilice el guía completa de optimización de velocidad de Shopify, compara tus páginas con muchos medios con las guía de velocidad para dispositivos móviles versus computadoras de escritorioy revisar Precios de trueno si desea una optimización automatizada antes de la limpieza manual de medios.

FAQ