Mejorar la carga de imágenes en PrestaShop con lazyload y srcset

Pensemos en ese template de PrestaShop que te acabas de comprar para tu proyecto o para endiñárselo a tu cliente (y que con tantas fuerzas odio) que está repleto de carrouseles, tabs, paginaciones ajax… y… que siendo tan bonito carga más de 20mb en cada página en gran parte por las imágenes. ¿Cómo podemos mejorar la carga de las imágenes y ofrecer una experiencia de uso medianamente decente al usuario si importar su dispositivo? lazyload y src-set. Implementar  lazyload y srcset va a aportar un salto de calidad tanto al SEO de tu proyecto como a la experiencia de uso por la sensación de velocidad que van a tener los usuarios.

Uno de los problemas que se encuentra con asiduidad a la hora de optimizar un Prestashop es que no hay manera de optimizar la carga de estáticos, y en concreto las imágenes. Muchas veces se piensa que el WPO se soluciona con minfy, mejor máquina y mod page speed, pero no, lo que estamos haciendo es ‘compactar la basura’ y disimular los problemas, y a veces se puede mejorar más los tiempos de carga trabajando algo el front.

Los servidores de estáticos tal y como están planteados en Prestashop sirven para ofrecer el estático si cookies y paralelizar la carga de contenidos. Normalmente los navegadores suelen tener un límite de X peticiones por host (unos 10) y al paralelizar la carga se acceden a más contenidos de forma parella, pero el servidor está emitiendo esas imágenes y el cliente también las está recibiendo. Es decir, no se resuelve el problema de base, se transfieren contenidos que no sabemos si se van a usar. La otra opción sería reducir y comprimir las imágenes hasta el ridículo, pero esa opción debe de estar contemplada porque las imágenes suelen ser la principal arma de venta para convencer y persuadir al usuario.

Carga asíncrona de imágenes con lazyload y srcset

En la estructura más habitual de una tienda online con Prestashop, nos encontramos contenidos con tabs (pestañas), carrusel/slider o listados de categorías bastante amplios que no tiene sentido comenzar a cargar al inicio del documento. Lo más conveniente es que las imágenes se carguen poco a poco y mejor aún cuando el usuario las necesite al estar en la región donde son necesarias. Está técnica de carga asíncrona se conoce comunmente como lazyload. Existen numerosos scripts que añaden esa funcionalidad a los documentos html, pero mi preferido es el de Alexander Farkas. Además contempla las imágenes en diferentes medidas para diferentes dispositivos a través del atributo srcset:

A continuación dejo una receta sobre como implementar este script en PrestaShop siguiendo la siguiente receta:

1) Añadir el script lazysizes

Añadir lazysizes.min.js al autoload del theme (en /themes/tu-teheme/js/autoload/)

2) Editar las clases de las imágenes que vamos a cargar de forma asíncrona en los diferentes tpls

Para realizar esto depende de tu destreza y ganas (editar todos los tpls), añadir la clase lazyload a todas las imágenes y srcset según las imágenes definidas en tu tienda, o bien añadir automátcamente la clase lazyload con javascript.

Método 1, añadir la clase lazyload a los tpls principales (listados, producto, homeslider,…)

<img ...  class="... lazyload" />

Esto hará una carga asíncrona de la imagen en cuestión, pero si lo hacemos en product-listing o las imágenes de la ficha de producto podremos aumentar bastante la velocidad del sitio.

Método 2, imágenes responsive con src-set, por ejemplo en los listados product-list.tpl (ojo con el nombre de las imágenes y las medidas del ejemplo):

<img
   data-sizes="auto"
   data-srcset="{$link->getImageLink(..., 'medium_default')|escape:'html'} 120w,
   {$link->getImageLink(..., 'home_default')|escape:'html'} 275w"
   {$link->getImageLink(..., 'otra_dimension')|escape:'html'} anchow"
   class="lazyload img-responsive" ...  />
<noscript>
   <img src="{$link->getImageLink(..., 'home_default')|escape:'html':'UTF-8'}" class="img-responsive"  ... />
</noscript>

Esta es para mí la mejor solución, pero más laboriosa. Se definen diferentes src-set para cada imágen de forma que los dispoistivos más pequeños no tedrán que «cargar» a la fuerza una imagen de alta calidad y también se añade alternativa no script por si google no lo vé.

Modo lazy, añadimos la clase lazyload automáticamente a todas las imágenes:

<script type="text/javascript">
   $(document).ready(function(){
      $('img').addClass('lazyload');
   });
</script>

¿Por qué casi nadie usa src-set ni layzload en PrestaShop?

Pues.. ese es el principal motivo que me lleva a maldecir a los tempates. En el front siempre se ha cuidado hasta el último kb sobrante, pero con el auge de los multi(des)propisto nos hemos insensibilizado y enviamos kb inecesarios por todos los rincones de internet, el SEO onPage tiene mucha parte de front y si desde salida se descuidan todos estos aspectos o no se sabe apreciar el valor añadido de un diseño o maquetación exclusiva a la larga se jugará en inferioridad para hacer en SEO.