Velocidad de la página de colección de Shopify: Corregir carga lenta e imágenes ansiosas

Por qué las páginas de colección son las más lentas en Shopify

Si alguna vez probaste tu tienda Shopify en Estadísticas de PageSpeed de Google, probablemente hayas notado un patrón: tu página de inicio obtiene una buena puntuación, las páginas de productos son decentes, pero obtienen una puntuación terrible.

Esto no es un error, es la naturaleza de las páginas de colección. Mientras que la página de un producto muestra de 1 a 5 imágenes y algo de texto, una página de colección debe representar:

La matemática es simple: una página de producto con 3 imágenes totaliza quizás 300 KB de datos de imágenes. Una página de colección que muestra 24 productos con imágenes no optimizadas puede llegar fácilmente 3-5 MB solo de datos de imagen. Agregue JavaScript, CSS, fuentes y scripts de seguimiento y obtendrá un peso total de página de 5 a 8 MB.

En un teléfono móvil con conexión 4G, eso se traduce en un Tiempo de carga de 6 a 12 segundos. Google considera que cualquier cosa por encima de 2,5 segundos es mala Pintura con contenido más grande (LCP) Puntuación .

Los 6 mayores asesinos de velocidad de las páginas de colección

No todos los problemas de rendimiento son iguales. Estos son los problemas específicos que más perjudican a las páginas de recopilación, clasificados por impacto:

1. Imágenes de productos no optimizadas (mayor impacto)

Este es el asesino de velocidad número uno en las páginas de recopilación, responsable de 60-80% del peso total de la página en la mayoría de las tiendas. Problemas comunes:

• • Imágenes de gran tamaño : cargar fotografías de productos de 4000 × 4000 px que se muestran a 300 × 300 px en las tarjetas de colección
• • Sin carga diferida : las más de 24 imágenes se descargan inmediatamente, incluso aquellas en la mitad inferior de la página a las que el visitante no se ha desplazado
• • Formato incorrecto — servir JPEG/PNG cuando WebP o AVIF serían entre un 30% y un 50% más pequeños
• • Sin conjunto de origen : mostrar la misma imagen grande en dispositivos móviles y de escritorio en lugar de tamaños apropiados para el dispositivo

2. Filtro de bloqueo de renderizado JavaScript

La funcionalidad de filtrado y clasificación de colecciones, ya sean filtros nativos de Shopify OS 2.0 o aplicaciones de terceros como Boost Product Filter, a menudo se carga 50-200 KB de JavaScript que bloquea la representación de la página. El visitante no puede ver los productos hasta que este JavaScript termine de descargarse y ejecutarse.

Las aplicaciones de filtro populares agregan sus propios paquetes CSS y JS además de los recursos de su tema. Algunos se inyectan scripts en línea en el que debe ejecutarse antes de que se procese cualquier contenido. Obtenga más información sobre esto en nuestra guía sobre arreglando recursos que bloquean el renderizado en Shopify.

3. Demasiados productos por página

Algunos propietarios de tiendas configuran sus colecciones para mostrar 48, 72 o incluso 100 productos por página pensando que eso ayuda a la experiencia de compra. En realidad, multiplica cada problema de rendimiento : más imágenes, más elementos DOM, más uso de memoria, más cálculos de diseño.

4. Imágenes de banner de colección

Muchos temas muestran una imagen principal o de banner grande en la parte superior de las páginas de la colección. Esta imagen es a menudo la Elemento LCP : el contenido visible más grande cuando se carga la página. Si no tiene el tamaño y la precarga adecuados, retrasa todo el tiempo de carga percibido.

5. Scripts de aplicaciones de terceros

Scripts de terceros de aplicaciones de revisión, programas de fidelización, widgets de chat y herramientas de análisis se cargan en cada página, incluidas las páginas de colección. En la página de un producto, se notan 500 ms de sobrecarga de scripts de terceros. En una página de colección que ya es pesada, te lleva más allá del punto de inflexión.

6. Efectos de desplazamiento e intercambios de imágenes

Un patrón de diseño popular es mostrar una imagen secundaria del producto al pasar el mouse. Esto significa cargar dos imágenes por ficha de producto en lugar de uno: duplicar la carga útil de la imagen para una función que la mayoría de los usuarios de dispositivos móviles nunca ven (sin desplazarse por las pantallas táctiles).

Solución: Imagen del banner del héroe cargando ansiosa en theme.liquid

Uno de los problemas más comunes de velocidad de la página de colección de Shopify es cómo imagen de banner de héroe cargas. Muchos temas, incluidos Dawn, Refresh y otros temas de OS 2.0, configuran el banner de la colección en cargando="perezoso" de forma predeterminada. Esto está mal para el estandarte de héroe porque normalmente es el Elemento de pintura con contenido (LCP) más grande : el contenido visible más grande cuando la página se carga por primera vez.

Cuando el banner principal se carga de forma diferida, el navegador retrasa deliberadamente su descarga hasta que el usuario se desplaza cerca de él. Pero el banner ya está visible en la ventana gráfica, por lo que el navegador espera innecesariamente, lo que reduce su puntuación LCP.

La solución: configurar los banners de héroes para que se carguen con entusiasmo

Encuentra la sección de héroe/banner de tu colección en tus archivos de temas. En la mayoría de los temas de OS 2.0, esto está en secciones/main-collection-banner.liquid o similar. busca el Etiqueta que representa el banner de la colección y cambia (o agrega) estos atributos:

<!-- ❌ Wrong: lazy loading the hero banner -->
<img
  src="{{ section.settings.image | image_url: width: 1600 }}"
  loading="lazy"
  alt="{{ section.settings.image.alt }}">

<!-- ✅ Correct: eager loading with high fetch priority -->
<img
  src="{{ section.settings.image | image_url: width: 1600 }}"
  loading="eager"
  fetchpriority="high"
  width="{{ section.settings.image.width }}"
  height="{{ section.settings.image.height }}"
  alt="{{ section.settings.image.alt }}">

Para temas de Dawn/OS 2.0 específicamente

En los temas basados en Dawn, el banner de la colección a menudo se representa a través del etiqueta_imagen El filtro o imagen_url filtrar secciones/main-collection-banner.liquid. También es posible que necesites agregar un Etiqueta en tu tema.liquido diríjale al navegador que comience a descargar la imagen del banner incluso antes de que encuentre el Etiqueta :

<!-- Add to theme.liquid <head> for collection pages -->
{% if template.name == 'collection' and collection.image %}
  <link rel="preload" as="image"
    href="{{ collection.image | image_url: width: 1600 }}"
    fetchpriority="high">
{% endif %}

Solución manual n.º 1: optimizar las imágenes de la colección

El cambio de mayor impacto que puede realizar es corregir cómo se cargan las imágenes de productos en las páginas de la colección.

Agregar carga diferida nativa

Encuentre la plantilla de tarjeta de producto de su colección (generalmente fragmentos/tarjeta-producto.liquido o similar) y añadir cargando="perezoso" a imágenes de productos. Pero aquí está el truco: deberías NOT cargue de forma diferida la primera fila de productos visibles, ya que eso retrasa el LCP.

{% for product in collection.products %}
  {% if forloop.index <= 4 %}
    <img src="{{ product.featured_image | image_url: width: 400 }}"
         loading="eager"
         fetchpriority="{% if forloop.first %}high{% else %}auto{% endif %}"
         width="400" height="400"
         alt="{{ product.featured_image.alt | escape }}">
  {% else %}
    <img src="{{ product.featured_image | image_url: width: 400 }}"
         loading="lazy"
         width="400" height="400"
         alt="{{ product.featured_image.alt | escape }}">
  {% endif %}
{% endfor %}

Usar tamaños de imagen adaptables

En lugar de servir una imagen grande a todos los dispositivos, utilice el Atributo conjunto de origen con Shopify filtro image_url:

<img
  src="{{ product.featured_image | image_url: width: 400 }}"
  srcset="
    {{ product.featured_image | image_url: width: 200 }} 200w,
    {{ product.featured_image | image_url: width: 400 }} 400w,
    {{ product.featured_image | image_url: width: 600 }} 600w"
  sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
  loading="lazy"
  width="400" height="400"
  alt="{{ product.featured_image.alt | escape }}">

Establecer dimensiones explícitas

Incluir siempre ancho y altura atributos en tus imágenes. Sin ellos, el navegador no puede calcular el diseño hasta que se carga la imagen, lo que provoca Cambio de diseño acumulativo (CLS) : sus productos saltan a medida que se cargan las imágenes. Vea nuestra Guía de elementos básicos de Web Vitals para obtener más información sobre CLS.

Solución manual n.º 2: reducir productos por página

Esta es la solución manual más sencilla, pero que a menudo se pasa por alto. En la configuración de su tema (o en la plantilla de colección), ajuste la cantidad de productos que se muestran por página.

En los temas de Shopify Online Store 2.0, generalmente puedes cambiar esto en Personalizar → Página de colección → Cuadrícula de productos → Productos por página. Para temas antiguos, necesitarás editar Liquid de la plantilla de colección. paginar :

{% paginate collection.products by 20 %}
  <!-- product grid -->
{% endpaginate %}

Tenga en cuenta: reducir productos por página significa más paginación. Asegúrese de que su paginación sea accesible y fácil de usar, con números de página claros y botones siguiente/anterior.

Solución manual n.º 3: optimizar filtros y clasificación

La funcionalidad de filtrar y ordenar es esencial para la usabilidad de la colección, pero también es una fuente importante de sobrecarga de JavaScript. Aquí se explica cómo optimizarlo:

Utilice el filtrado de escaparate nativo de Shopify

Si estás en un tema de Shopify Online Store 2.0, usa Filtrado de escaparate integrado de Shopify en lugar de aplicaciones de filtrado de terceros. El filtrado nativo se realiza en el lado del servidor, lo que significa que no requiere JavaScript pesado en el lado del cliente. La página se recarga con resultados filtrados en lugar de filtrarlos en el cliente.

Para habilitar: vaya a Administrador de Shopify → Tienda en línea → Navegación → Filtros de colección y búsqueda. Añade los filtros que quieras (precio, disponibilidad, tipo de producto, proveedor, etc.).

Aplazar filtro JavaScript

Si debe utilizar una aplicación de filtro de terceros para funciones avanzadas, asegúrese de que sus secuencias de comandos estén pospuestas. busca un Etiqueta Etiquetas en tu tema que carga el JS de la aplicación de filtro y agrega el aplazar atributo:

<!-- Before (render-blocking) -->
<script src="https://filter-app.com/bundle.js"></script>

<!-- After (deferred) -->
<script src="https://filter-app.com/bundle.js" defer></script>

Solución manual n.º 4: implementar paginación inteligente

La forma en que maneja la paginación afecta tanto la velocidad como la experiencia del usuario. Estos son los tres enfoques, clasificados por rendimiento:

Si utiliza desplazamiento infinito o "Cargar más", asegúrese de que su implementación utilice el API de observador de intersecciones (no detectores de eventos de desplazamiento, que reducen el rendimiento) e incluye paginación alternativa para rastreadores de SEO.

Solución manual n.º 5: CSS crítico para colecciones

El navegador no puede representar ningún contenido hasta que descargue y analice su archivo CSS completo. En Shopify, los archivos CSS de temas suelen tener entre 100 y 300 KB. La incorporación de CSS crítico resuelve esto colocando el CSS necesario para el contenido en la mitad superior de la página directamente en el HTML.

Para las páginas de colección, el CSS crítico incluye estilos para:

• • El encabezado/navegación
• • Imagen del banner de la colección (si está presente)
• • La primera fila de tarjetas de productos (diseño de cuadrícula, tamaño de imagen, estilo de texto)
• • Diseño de la barra lateral del filtro (si está visible en la mitad superior de la página)

Generar CSS crítico manualmente es tedioso: es necesario identificar qué reglas CSS se aplican a los elementos de la mitad superior de la página, extraerlos e integrarlos en un <style> en el <head>y luego cargue de forma asincrónica la hoja de estilo completa. Herramientas como Crítico de Addy Osmani puede ayudar a automatizar esto, pero integrarlos en un proceso de creación de temas de Shopify no es trivial.

Cómo medir la velocidad de la página de colección

No adivines, mide. Puede prueba la velocidad de tu página de colección en segundos con nuestra herramienta gratuita, o utilice las opciones a continuación. Pero pruebe las URL correctas. La mayoría de la gente prueba su página de inicio y la da por terminada. Para conocer la velocidad de la página de recopilación, debe probar:

Utilice estas herramientas para realizar pruebas (obtenga más información en nuestro guía de monitoreo del desempeño):

• • Estadísticas de PageSpeed de Google : prueba dispositivos móviles y de escritorio, muestra Core Web Vitals
• • GTmetrix : gráficos en cascada detallados que muestran exactamente qué es lento
• • Chrome DevTools (pestaña Red) : filtrar por imágenes para ver la carga útil total de la imagen
• • Prueba de página web — vista de tira de película para ver cuándo se hacen visibles los productos

Thunder frente a optimización de la página de recopilación manual

Preguntas frecuentes

Recursos relacionados