Qué hace Shopify de forma nativa para la carga diferida
Shopify no tiene un solo botón de "carga diferida" en tu panel de administración. No hay ninguna casilla de verificación en Configuración → Rendimiento que lo habilite en toda la tienda. En cambio, Shopify proporciona herramientas para desarrolladores de temas para implementar la carga diferida, y el uso de esas herramientas depende completamente de su tema.
Esto es lo que Shopify ofrece a nivel de plataforma:
El etiqueta_imagen
El filtro Filtro de líquido — Cuando los temas usan este filtro para representar imágenes, Shopify puede configurar automáticamente cargando="perezoso" en imágenes en secciones que aparecen más abajo en la página.
propiedad
El sección.index : indica a los desarrolladores de temas la posición de una sección en la página, lo que permite la lógica condicional: cargar con entusiasmo las primeras 2 secciones, cargar de forma diferida todo lo que aparece a continuación.
Conversión automática WebP/AVIF : El CDN de Shopify muestra automáticamente imágenes en formatos modernos cuando el navegador los admite, lo que reduce el tamaño de los archivos entre un 25 % y un 50 %.
Conjunto de imágenes responsivas — El
El filtro etiqueta_imagen
El filtro genera múltiples tamaños de imagen para que los navegadores descarguen el tamaño correcto para cada pantalla.
Estos son bloques de construcción sólidos. Pero son elementos básicos, no una solución completa. La brecha entre las "herramientas disponibles" y las "herramientas realmente utilizadas en su tienda" es donde residen la mayoría de los problemas de rendimiento.
¿Tienes curiosidad por saber dónde se encuentra tu tienda? Realiza una prueba de velocidad gratuita para ver si la carga diferida ayuda o perjudica tu rendimiento.
Cómo funciona Shopify etiqueta_imagen
El filtro y sección.index Trabajo
El etiqueta_imagen
El filtro El filtro líquido es la forma recomendada por Shopify de representar imágenes en temas. Cuando un desarrollador de temas lo usa correctamente, maneja el tamaño responsivo, la conversión de formato y la carga diferida en una sola línea:
{{ product.featured_image | image_url: width: 800 | image_tag: loading: "lazy" }}
But the real power comes from combining it with sección.index. Esta propiedad le dice al tema qué posición ocupa una sección en la página. El equipo de rendimiento de Shopify recomienda usándolo así:
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{ section.settings.image | image_url: width: 1080 | image_tag: loading: loading }}Este código carga con entusiasmo imágenes en las dos primeras secciones (normalmente héroe y colección destacada) y carga de forma diferida todo lo que se encuentra a continuación. Es un enfoque inteligente que evita la #1 lazy loading mistake : carga diferida de su imagen LCP. La propiedad
Detalle clave: El sección.index no se introdujo hasta finales de 2022. Los temas creados antes de esta fecha no la usan, lo que significa que cargan todo de forma diferida (malo para LCP) o nada (malo para el rendimiento de la página inferior).
El filtro
El etiqueta_imagen
El filtro también genera un conjunto de origen attribute with multiple image widths, letting the browser pick the optimal size. This works with lazy loading — when the browser decides to load a lazy image, it picks the right size from the srcset based on the viewport width.
¿Qué temas de Shopify tienen carga diferida nativa?
No todos los temas son iguales cuando se trata de implementación de carga diferida. Aquí está el desglose:
Temas con buena carga diferida nativa
Amanecer (y temas basados en Dawn): usos etiqueta_imagen
El filtro + sección.index correctamente. También agrega fetchpriority="alta" en imágenes LCP. Esta es la implementación de referencia de Shopify y el estándar de oro para el rendimiento de temas.
Sentido, Artesanía, Gusto, Colorblock : temas gratuitos propios de Shopify, todos basados en la arquitectura Dawn. Heredan la misma lógica de carga diferida.
La mayoría de los temas premium actualizados después de 2023 : desarrolladores de temas de renombre como Out of the Sandbox, Archetype y Prestige han actualizado sus temas para usarlos. sección.index y etiqueta_imagen
El filtro.
Temas con carga diferida nativa deficiente o nula
Temas creados antes de 2022 — Estos son anteriores sección.index y, a menudo, utilizan bibliotecas de carga diferida de JavaScript como lazysizes, o ninguna carga diferida.
Temas muy personalizados : incluso si el tema base tenía una carga diferida, las modificaciones personalizadas a menudo lo interrumpen. Los desarrolladores que agregan secciones personalizadas con frecuencia se saltan el sección.index lógica.
Temas que utilizan carga diferida solo en JS : algunos temas utilizan lazysizes o bibliotecas similares que agregan una sobrecarga de JavaScript y pueden entrar en conflicto con la carga diferida del navegador nativo.
¿No estás seguro de en qué categoría entra tu tema? La forma más sencilla de averiguarlo es inspeccionar su sitio, lo cual cubriremos en el sección de prueba a continuación. Para obtener una visión más profunda del rendimiento del tema, consulte nuestra guía en el temas de Shopify más rápidos Guía.
5 cosas que la carga diferida nativa de Shopify no cubre
Incluso con un tema moderno usando etiqueta_imagen
El filtro correctamente, la carga diferida nativa de Shopify tiene importantes puntos ciegos:
1. Imágenes y scripts inyectados por aplicaciones
Cada aplicación de Shopify que agrega elementos visuales (widgets de reseñas, insignias de confianza, ventanas emergentes de ventas adicionales, widgets de chat) inyecta sus propias imágenes y scripts directamente en el DOM. Estos evitan por completo la carga diferida de su tema porque no se procesan a través de Liquid. etiqueta_imagen
El filtro.
La tienda Shopify promedio tiene entre 6 y 8 aplicaciones instaladas. Cada uno agrega scripts que se cargan inmediatamente, independientemente de dónde aparezcan en la página. Este es el el mayor asesino de velocidad en la mayoría de las tiendas : y está completamente fuera del alcance de la carga diferida nativa.
2. Imágenes de fondo CSS Elementos
El cargando="perezoso" solo funciona en <img> y