Portada PrestaShop Carga Diferida de Imágenes con Lazy Loading Product Images (By ST-Themes para PS 1.6 y PS 1.7)
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…
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:
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:
En dicha página también tenemos las características tanto para PrestaShop 1.7 como 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.
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.
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
Debemos localizar la parte que pone: “
«> <img src = «{$product.cover.bySize.home_default.url}»
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»
En lo que respecta a PrestaShop 1.6, la ruta es la siguiente:
\themes\nombredenuestrotheme\product-list.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} />stlazyloadthisdata-
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-
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
if (typeof(stlazyloading) == ‘function’) stlazyloading($(‘img.stlazyloadthis’));
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!
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.