Carga Diferida de Imágenes con Lazy Loading Product Images (By ST-Themes para PS 1.6 y PS 1.7)

Carga Diferida de Imágenes con Lazy Loading Product Images

Si estamos usando la plantilla que viene por defecto con PrestaShop 1.6 o 1.7 (u otras que no sean de ST-Themes) y tenemos muchos productos con imágenes, con el siguiente módulo podremos conseguir mejorar la velocidad de carga de nuestra web, o al menos de las imágenes de nuestros productos.

Este módulo es ideal para solucionar problemas en la carga de imágenes en nuestra tienda online, siempre que estamos usando una plantilla que no tenga el sistema de “lazy loading images”.

Damos por hecho que al ser una tienda enfocada hacia el comercio electrónico (ecommerce) vamos a tener unos cuantos productos con imágenes, ya que obviamente si tenemos pocos no vale mucho la pena utilizar este módulo, sino que sería mucho mejor optimizar las poquitas imágenes que tuviéramos, y así ahorrarnos la instalación e inyección de código en nuestra plantilla, pero como decimos entendemos que al tener una tienda online tendremos muchas imágenes, y es posible que nuestra web se resienta por ello, así que Lazy Loading Product Images puede ser la solución perfecta para cargar de forma escalonada nuestras imágenes.

Pero, antes de todo…

¿Qué es la Carga Diferida o Lazy Loading?

El tema este de la carga diferida de imágenes o lazy loading puede que nos suene un poco chino, pero no hay problema, ya que vamos a tratar de explicarlo a continuación en apenas un párrafo:

Si tenemos una tienda online con muchos productos con imágenes como es comentando antes, es posible que nuestra web tarde mucho en cargar, sobre todo si esta tiene que cargar todas las imágenes que tengamos en la portada o en las secciones, sin embargo, con la carga diferida lo que se consigue es que solo se cargue el contenido que veamos en pantalla, es decir, tendríamos que hacer scroll con el ratón hacia abajo para que se cargara el siguiente bloque de imágenes. Y con esto lo que se consigue es reducir el tiempo de carga de la tienda online en sí. ¿Genial, verdad?

En la siguiente web hay una especie de “test” con 1000 imágenes para poder comprobar de primera mano que tal funciona este sistema de carga diferida o lazy loading:

Test 1000 Imágenes con Lazy Loading

¿Dónde se puede descargar Prestashop Lazy Loading Module?

El módulo se puede descargar de forma completamente gratuita desde la página web de su desarrollador, no hace falta registrarse ni nada, tan solo pinchar sobre el enlace que hay en la parte superior:

Free PrestaShop lazy loading module.

En dicha página también tenemos las características tanto para PrestaShop 1.7 como PrestaShop 1.6:

Características Destacadas en PrestaShop 1.7

  • – Funciona para el módulo de nuevos productos, para el módulo top-ventas y para el módulo de producto destacados de la página principal.
  • – Funciona para listados de páginas de productos.
  • – Funciona para el módulo de venta-cruzada de productos en la misma categoría de la página de productos.
  • – Este módulo funciona correctamente con las búsquedas nativas de PrestasHop. Las imágenes de los productos se cargan de forma diferida después del filtrado.
  • – Las imágenes de los productos se cargan de forma diferida después de irse a otra página.
  • – Compatible con PrestaShop 1.7.
  • – Solo se necesita editar un archivo.

Características Destacadas en PrestaShop 1.6

  • – Funciona para listados de páginas de productos.
  • – Este módulo funciona correctamente con la nevagacion.
  • – Las imágenes de los productos se cargan de forma diferida después del filtrado.
  • – Las imágenes de los productos se cargan de forma diferida después de irse a otra página.
  • – Compatible con PrestaShop 1.6.

Después de descargar el módulo, tan solo quedaría subir el módulo a PrestaShop 1.6 o PrestaShop 1.7, sin tener que hacer nada más. No hay que activar el botón ni nada, hay que dejarlo desactivado.

Carga Diferida de Imágenes con Lazy Loading Product Images PrestaShop 1.7

Tal vez la parte más “complicada” es la de tener que añadir un código en la plantilla que estemos usando, y que en la propia página del desarrollador también explican los pasos a seguir. Para ello podemos usar el Administrador de archivos de cPanel o un cliente de FTP como Filezilla mediante el cual poder acceder a las rutas que vamos a indicar.

Instalación en PrestaShop 1.7

Para que el módulo funcione correctamente en nuestra web debemos editar el archivo product.tpl de nuestro CMS. Podemos encontrar el archivo en la siguiente ruta:

\themes\nombredenuestrotheme\templates\catalog\_partials\miniatures\product.tpl

PrestaShop 1.7 product.tpl

Debemos localizar la parte que pone: “

«>
<img src = «{$product.cover.bySize.home_default.url}»

Lazy Loading Product Images PrestaShop 1.7 Código

Y sustituirlo por lo siguiente, básicamente es hacer un “copy paste” del código de aquí abajo y pegarlo encima del que está arriba. En las imágenes se ven muy bien los cambios.

 

is_stlazyloading»>
<img src=»{$stlazyloading.img_prod_url}{$stlazyloading.lang_iso_code}-default-home_default.jpg» class=»stlazyloading_holder» width=»{$product.cover.bySize.home_default.width}» height=»{$product.cover.bySize.home_default.height}» alt=»{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}» />
<img data-src = «{$product.cover.bySize.home_default.url}» class=»stlazyloadthis»

Lazy Loading Product Images PrestaShop 1.7 Código 2

Instalación en PrestaShop 1.6

En lo que respecta a PrestaShop 1.6, la ruta es la siguiente:

\themes\nombredenuestrotheme\product-list.tpl

PrestaShop 1.6 productlist.tpl

Hay que editar:

is_stlazyloading

<img src=»{$img_prod_dir}{$lang_iso}-default-home_default.jpg» class=»stlazyloading_holder» {if isset($homeSize)} width=»{$homeSize.width}» height=»{$homeSize.height}»{/if} />

stlazyloadthis

data-

Lazy Loading Product Images PrestaShop 1.6 Código

Después, hay añadir este código en la parte inferior de la función reloadContent en:

\themes\ nombredenuestrotheme\js\modules\blocklayered\blocklayered.js

PrestaShop 1.6 blocklayered.js

if (typeof(stlazyloading) == ‘function’)
stlazyloading($(‘img.stlazyloadthis’));

PrestaShop 1.6 blocklayered.js 2

¿Problemas?

Si obtenemos un mensaje como este: «en-default-home_default.jpg can not be load», entonces tendremos que llevar a cabo la regeneración de las miniaturas de las imágenes de los productos.

En PrestaShop 1.6, por ejemplo, podemos usar el módulo Image Regenerator, ya que con él se puede solucionar el problema. En principio, en PrestaShop 1.7, al ser un proceso más simple, no debería dar problemas. 😉

¡Y eso es todo!

Hosting PrestaShop SSD Con LiteSpeed

En Hostinet puedes contratar un Hosting PrestaShop SSD con LiteSpeed para hacer que tu tienda online vaya mucho más rápida que la de tu competencia. ¡Te garantizamos una IP española, así como el mejor soporte en tu idioma

En Hostinet trabajamos desde hace más de 15 años con servidores ubicados en España (Madrid y Bilbao) para ofrecer a nuestros clientes las mejores prestaciones posibles.

  • Hosting especializado en Prestashop con discos SSDPrestashop 1desde4´38€ / mes
  • Hosting especializado en Prestashop con discos SSDPrestashop 2desde5´54€ / mes
  • Hosting especializado en Prestashop con discos SSDPrestashop 3desde8´34€ / mes
  • Hosting especializado en Prestashop con discos SSDPrestashop 1desde4´38€/mes
  • Hosting especializado en Prestashop con discos SSDPrestashop 2desde5´54€/mes
  • Hosting especializado en Prestashop con discos SSDPrestashop 3desde8´34€/mes
    • Almacenamiento en disco duro ultra rapido SSDAlmacenamiento en disco duro ultra rapido SSDAlmacenamiento en disco duro ultra rapido SSDAlmacenamiento en disco duro ultra rapido SSD
    • El espacio en disco es la suma del espacio que ocupan los archivos que forman la web y el correo electrónico.
    • La transferencia de datos mensual es la cantidad total de información que se descargan los visitantes de nuestra web en cada acceso más nuestro uso a través de FTP y correo.
    • Ideado para sacar el máximo partido a tu Prestashop
    • Aumenta la velocidad de tu web + Info
    • Tras evaluación de nuestro equipo de migraciones
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Elige la versión de PHP que necesites
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM, .INFO, .NET, .ORG ó .EU.
    • Migramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a Hostinet
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Hosting específicamente preparado para sacar el máximo rendimiento a tu Prestashop
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM, .INFO, .NET, .ORG ó .EU.
    • Cada dominio alojado muestra un contenido único y diferente del resto
    • Aparcando un dominio secundario en el alojamiento de nuestro dominio principal conseguimos que ambos dominios resuelvan indistintamente con la misma página que tenemos colgada.
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Tus buzones de correo y mails limpios de virus y con un potente filtro antispam
    • Centro de datos en Madrid (España)
    • Opción de contratación de IP dedicadaPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUI
    • Opción de contratación de certificados SSL. Se requiere Ip dedicada.Puedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUI
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • ¿Quieres realizar desarrollos con Python? En Hostinet innovamos dia a dia en tu beneficio y por ello te presentamos como última novedad en todos nuestros servidores Web la posibilidad de desplegar tus aplicaciones con Python directamente desde el cPanel de tu Hosting.
    • ¿Quieres desarrollar tus aplicaciones con Ruby? En Hostinet te presentamos como última novedad en todos nuestros servicios de Hosting Web la posibilidad de desplegar tus aplicaciones con Ruby on Rails directamente desde el panel de control cPanel.
    • El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor.
    • El módulo mod_rewrite permite crear direcciones URL alternativas a las dinámicas generadas por la programación de nuestros sitio web (blog, foro, portal…), de tal modo que sean más legibles y fáciles de recordar
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web. Soporte en español por personal de Hostinet.
    • Completa recopilación de tutoriales sobre Hosting, Dominios y Prestashop
    • 30 dias para probar tu servicio de Hosting y si no te convence el servicio... te devolvemos el dinero!!