En este tutorial vamos a implementar lazyload aka carga diferida en tu pagina ecommerce prestashop 1.7 o cualquier página que quieras. Lazyload permite que se carguen imagenes a medida que un usuaria va interactuando con la pagina y no al inicio – asi mejorando la velocidad de carga inicial y puntos en Pagespeed y GTMetrix.
No quiero pagar para ningún módulo, no sé quizás sea tacaño pero sé que existen métodos gratis de hacer las cosas, ya que PrestaShop es opensource y el objetivo es ese, mantenerlo libre para que se desarrolle con la comunidad.
Me salen el error de «Defer offscreen images» en pagespeed.
- Tengo una tienda PrestaShop 1.7.6.7
- El primer paso consiste en elegir un script lazyload. Yo utilizo el que ofrecen en https://web.dev/codelab-use-lazysizes-to-lazyload-images/ porque fue el que me salió como ejemplo cuando hice el test en pagespeed. Descarga aquí
- Sube el script en la ruta de tu instalación o donde quieras.
- Tienes que hacer que el script se cargue con tu página. Pon el siguiente código indicando la ruta del script en tu index.
<script src="lazysizes.min.js" async></script>
- Para prestshop, esto es según el Layout (diseño) de la página que uses, es decir en tu tema de prestashop puedes elegir entre mostrar todo el ancho, usar una barra a la derecha, o dos columnas etc. En el caso que uses el tema clásico, esto lo vas a encontrar en «themes/classic/templates/layouts» alli habran varios archivos
segun el diseno que uses, introduce el codigo anterior antes del cierre como asi –
si no estas seguro cual o usas varios segun tu pagina, introducelo en todas las paginas para estar mas seguro.
Ahora vamos a hacer que lazy load funcione para todas las páginas que usen miniaturas, es decir – la página principal, resultados y página de categorías.
- nos dirigimos al archivo producto de miniaturas -> /themes/classic/templates/catalog/_partials/miniatures/
- editamos el archivo products.tpl hacemos 4 cambios.
- 2 veces vamos a cambiar img src a img data-src
Tienes que saber que data-src no es un atributo que el navegador reconoce, por lo que cuando encuentra una etiqueta de imagen con este atributo, no carga la imagen. En este caso, eso es algo bueno, porque luego permite que el script lazysizes decida cuándo se debe cargar la imagen, en lugar del navegador.
- 2 veces vamos a hacer que sepa que esta imagen tiene que hablar con lazyload e introducimos
class="lazyload"
- una vez realizados los cambios, limpia tu caché de prestashop y listo. Ya está funcionando lazyload en tu página.
- Para imágenes estáticas que tengas en tu CMS o si quieres cargar imágenes de producto de forma lazy, simplemente cambia
"img scr" por "img data-src" e introduce"class=lazyload" y listo. La implementación es bastante fácil para cualquier tipo de página web, ya que solo se trata de cambiar
"img scr" por "img data-src" e introducir "class=lazyload"déjenme un like si les gusto, gracias.
Justo lo que estaba buscando.
Muchas gracias por compartir.