En el mundo actual impulsado por internet, los usuarios esperan que los sitios web carguen al instante. Los clientes quieren que las páginas carguen rápidamente cuando visitan su… OpenCart Sitio web. Los clientes pueden irritarse y su negocio podría perder ingresos si las páginas de sus productos tardan demasiado en cargar, especialmente en dispositivos móviles, donde la velocidad de internet puede ser más lenta.
Los gráficos grandes o numerosos suelen ser la principal causa de la carga lenta de una página. Las fotos de productos pueden ser archivos grandes, pero son un componente esencial de cualquier sitio web de comercio electrónico. La carga diferida puede ayudar.
El desafío del rendimiento en los sitios de comercio electrónico 
Los anuncios de comercio electrónico de Moment son verdaderamente visuales. Un gestor de pedidos estándar puede tener
- 20-50 fotografías del producto
- Banners
- Miniaturas e iconos
- Secciones sobre productos relacionados
Si se cargan todas a la vez, el navegador deberá cargar cada imagen antes de que la página sea completamente interactiva. Esto da como resultado:
- Primer Contentful Paint (FCP) a un ritmo más lento
- Aumento del tiempo interactivo
- Bajo rendimiento en dispositivos móviles
- Una mayor carga del servidor
- Aumento de las tasas de rebote
La experiencia del usuario se verá significativamente afectada por esto, especialmente en redes más lentas.
¿Qué es la carga diferida?
La técnica conocida como “carga diferida” retrasa la carga de imágenes (u otro contenido) hasta que realmente se necesitan, que suele ocurrir cuando el usuario está listo para verlas desplazándose hacia la vista. La carga diferida espera hasta que el usuario esté listo para ver la imagen antes de cargarla, a diferencia de cargar todas las imágenes a la vez.
La carga diferida tiene las siguientes ventajas:
- Conservación del ancho de banda
- Mejor rendimiento en dispositivos móviles
- SEO mejorado y elementos web esenciales
- Carga rápida de la primera página
Cuando muchas de las imágenes pueden cargarse simultáneamente en las páginas de productos, la carga diferida es especialmente útil.
Por qué es importante la carga diferida
Imagina mirar un catálogo de artículos. Incluso si las imágenes del producto están muy por debajo del pliegue, tu navegador intentará cargarlas todas a la vez al usar la carga tradicional. Al usar la carga diferida, solo se cargarán inicialmente las imágenes que se encuentren en la parte visible de la pantalla o cerca de ella. Las demás imágenes se cargarán gradualmente a medida que el usuario se desplaza.
Tanto sus clientes como los motores de búsqueda como Google, a quienes les gustan los sitios web que se cargan rápidamente, se beneficiarán de una experiencia más rápida y fluida.
Ejemplo real: Página de categoría sin carga diferida
Considere este ejemplo:
24 productos en una página de categoría, Cada miniatura = 150 KB, Peso total de la imagen = 3.6 MB
Antes incluso de cargar banners, CSS y JavaScript, el navegador tiene que descargar cerca de 4 MB de imágenes.
Ahora, supongamos que el visitante solo se desplazó hasta la mitad de la página. La mitad de las imágenes nunca se vieron, pero se descargaron de todos modos. Por lo tanto,Esto es ancho de banda desperdiciado y 0Aquí es donde entra en juego la carga diferida.
Carga diferida y elementos esenciales de la web
Elementos web vitales. Los siguientes se ven afectados directamente por imágenes de gran tamaño:
- Pintura con el mayor contenido (LCP)
- Cambio en el diseño acumulativo (CLS)
- Siguiente interacción de pintura (INP)
Cargar imágenes correcta y lentamente mejorará las métricas de rendimiento, particularmente en las páginas de listas de productos y categorías.
Aún así, hay una cosa importante que tener en cuenta
Las imágenes sobre el paquete, como la imagen principal del producto en una lista de detalles del producto, no deben cargarse de forma diferida.
¿Cuándo aplicar la carga diferida?
La carga diferida es más adecuada para:
- Páginas de listado de productos
- Páginas de categoría
- Páginas de listado de blogs
- Páginas del fabricante
- Secciones de venta adicional
Puede que no sea la mejor opción para:
- Banners de héroes sobre el pliegue
- Imagen principal del producto en la página del producto.
- Imágenes de marca críticas
Cómo implementar la carga diferida en OpenCart
Método 1: Carga diferida en navegadores nativos
Los navegadores modernos utilizan la propiedad loading=”lazy” para proporcionar una carga diferida integrada.
Ejemplo:
<img src=”image.jpg” loading = “perezoso” alt=”Imagen del producto”>
Pasos de OpenCart:
- Abra su archivo de tema:
| Versión | Ruta de archivo |
|---|---|
| OpenCart 2.x | catálogo/vista/tema/su_tema/plantilla/producto/categoría.tpl |
| OpenCart 3.x | catálogo/vista/tema/su_tema/plantilla/producto/categoría.twig |
| OpenCart 4.x | catálogo/vista/plantilla/producto/categoría.twig |
- Localizar la imagen del producto </head>.
- Cámbielo de la siguiente manera:
Antes:
<img src="{{ product.thumb }} alt="{{ product.name }}" width="300" height="300" título="{{nombre.producto}}"> Después:
<img src="{{ product.thumb }}"loading = "perezoso" alt="{{ nombre.producto }}" ancho="300" alto="300" título="{{nombre.producto}}">
Eso es todo. No es necesario usar JavaScript. Además, esta es la forma más sencilla y limpia.
Método 2: Usar tamaños lazysize (ideal para navegadores antiguos)
Pasos:
- Agregue el script lazysizes:
- Abra el archivo de tema según la versión de OpenCart mencionada en el Método 1 y actualice el marcado de la imagen:
- Antes:
- Después:
Método 3: Uso de la API de Intersection Observer (Control avanzado)
API de JavaScript moderna para un mejor control.
Ejemplo:
const imágenes = document.querySelectorAll(“img[data-src]”);
const observador = new IntersectionObserver((entradas, observador) => {
entradas.paraCada(entrada => {
si (entrada.isIntersecting) {
const img = entrada.objetivo;
img.src = img.conjunto de datos.src;
observador.unobserve(img);
}
});
});
imágenes.paraCada(img => observador.observar(img));
Este método proporciona control total sobre el comportamiento de carga.
Importante: Filtrado de productos basado en AJAX
Cuando los productos se cargan dinámicamente a través de AJAX:
Nativo loading = “perezoso” funciona automáticamente
Sin embargo, si estás usando tamaños perezosos, Observador de Intersecciones entonces Debes volver a activar la carga diferida después de que se cargue el contenido AJAX.
Ejemplo:
documento.addEventListener('ajaxComplete', función() { lazySizes.autoSizer.checkElems(); }); De lo contrario, es posible que las imágenes recién inyectadas no se carguen correctamente.
Los mejores métodos para la carga diferida en OpenCart
✔ Evite cargar las imágenes por encima del pliegue.
✔ Asegúrate de que tus imágenes tengan el tamaño correcto; evita utilizar miniaturas demasiado grandes.
✔ Utilice siempre PageSpeed Insights para probar y optimizar las imágenes al formato WebP.
✔ Pruebe siempre con PageSpeed Insights
✔ Después de realizar cambios en la plantilla, borre la caché de OpenCart.
Medición del rendimiento antes y después de la implementación
Para evaluar el impacto de la carga diferida, siga estos pasos:
Antes de la implementación
Pruebe su página de categoría y registre las siguientes métricas:
- Tamaño de página
- Tiempo de carga de la página
- Puntuaciones de Core Web Vitals
Después de la implementación
Realice las mismas pruebas nuevamente y compare los resultados. Debe observar lo siguiente:
- Tiempo de carga inicial reducido
- Tiempo total de bloqueo más bajo (TBT)
- Puntuación de rendimiento de Lighthouse mejorada
Las opciones de implementación descritas en esta guía, desde atributos HTML nativos hasta tamaños diferidos y la API Intersection Observer, ofrecen soluciones para todos los niveles de complejidad técnica. Tanto si gestiona una pequeña tienda boutique como un catálogo multicategoría con mucho tráfico, existe un enfoque que se adapta a sus necesidades. Empiece con el Método 1 para obtener resultados inmediatos y vaya ampliando a métodos más avanzados a medida que aumenten sus necesidades. Optimizar el rendimiento no es una tarea puntual, sino un compromiso continuo. Combine la carga diferida con la compresión de imágenes, la conversión WebP y un almacenamiento en caché adecuado para aprovechar al máximo la velocidad de su tienda OpenCart.
Sobre Knowband
Knowband es un proveedor confiable de plugins y extensiones de comercio electrónico con años de experiencia ayudando a comerciantes en línea a crear tiendas más rápidas, inteligentes y con más funciones. Ya sea que gestiones tu tienda en PrestaShop, OpenCartShopify, WooCommerce, Magento, o cualquier otra plataforma importante, Knowband ofrece una amplia gama de plugins y extensiones listos para usar que te ayudan a mejorar la funcionalidad, el rendimiento y brindar una mejor experiencia de compra, sin necesidad de crear desde cero. Además de los plugins, Knowband también ofrece soluciones integrales. desarrollo de sitios web y desarrollo de aplicaciones móviles Servicios. Ya sea que necesite una tienda de comercio electrónico totalmente personalizada y diseñada desde cero, una aplicación de compras móvil a medida para iOS y Android, o una integración a medida con sus sistemas existentes, el equipo de desarrolladores de Knowband tiene la experiencia para hacer realidad su visión. Si busca optimizar aún más su tienda OpenCart o cualquier otra plataforma de comercio electrónico, explore la plataforma de plugins de Knowband o póngase en contacto con nuestro equipo para hablar sobre una solución personalizada adaptada a sus objetivos comerciales. Contáctenos en support@knowband.com para el desarrollo de complementos personalizados, desarrollo de sitios web y servicios de desarrollo de aplicaciones móviles.