Mejorar velocidad al visualizar imágenes Javascript de Prestashop

HackID1 · #1 (**permalink**) 29/04/2019, 05:06

Hola!

Tenemos una tienda en PS 1.6 que tiene multitud de productos todos con una gran cantidad de características atributos y unas cuantas fotos de cada producto.

El problema es que al ampliar las img para verlas en la principal tarda bastante ( 7 Seg para abrirla y 7seg para pasar entre foto y foto)

Si puedo dejar el enlace a la tienda y un producto con varias imágenes comentarme y de que forma puedo mejorar la velocidad de la visualización de las fotos de productos, es bastante lenta.

He revisado el inspector de navegador pero no consigo dar con el cambio.

Un saludo

ArturoGallegos · #2 (**permalink**) 29/04/2019, 09:00

Utiliza el acortador de url de google o de algún otro preferentemente que no tenga publicidad
https://goo.gl/

Algunos desistimos de continuar cuando aparece "deshabilita Adblock para poder continuar".

Carlangueitor · #3 (**permalink**) 02/05/2019, 18:11

Yo revisaría el tamaño de la imagen quiźa tienes imagenes en exceso grandes, fuera de eso habria que revisar más a fondo donde está el cuello de botella, pero muy probablemente no tenga que ver con el frontend y sea algo de backend.

Saludos

HackID1 · #4 (**permalink**) 03/05/2019, 08:31

Cita:

Iniciado por ArturoGallegos

Utiliza el acortador de url de google o de algún otro preferentemente que no tenga publicidad
https://goo.gl/

Algunos desistimos de continuar cuando aparece "deshabilita Adblock para poder continuar".

Hola Arturo referente al problema no es cuestión de acortadores, es el propio funcionamiento de la tienda Prestashop.

[ Carlangueitor ]

Respondiendo a Carlangueitor, tenemos las imágenes optimizadas es más cuando las diseño con Photoshop solemos elegir guardar para web que pesan poco. Eso si son bastantes fotos, pero la tienda debería ir fluida, quisiera encontrar el problema de ello, nota, si puedo dejar la URL sería de mucha ayuda para que visualicen el problema.

ArturoGallegos · #5 (**permalink**) 03/05/2019, 09:36

Cita:

Hola Arturo referente al problema no es cuestión de acortadores, es el propio funcionamiento de la tienda Prestashop.

Jajajaja chanfle me entendiste eso? yo lo decía para que dejaras aquí el link a tu sitio y no lo vayan a tomar como auto-promoción o spam

HackID1 · #6 (**permalink**) 05/05/2019, 12:29

Cita:

Iniciado por ArturoGallegos

Jajajaja chanfle me entendiste eso? yo lo decía para que dejaras aquí el link a tu sitio y no lo vayan a tomar como auto-promoción o spam

Hola!

Jajaj si entendí eso, ahora si adjunto la URL donde se podrá ver el problema, el fallo es igual en todos los productos de la tienda Prestashop 1.6

Es un problema que he querido solucionar pero no logro optimizar la carga de Javascript al visualizar las imágenes.

NOTA: En las opciones de rendimiento de Prestashop esta configurado con

Smart cache for CSS SI
Smart cache for JavaScript SI
Minify HTML SI
Compress inline JavaScript in HTML SI
Move JavaScript to the end SI
Apache optimization SI

LA URL DEL SITIO WEB ES:

http://bit.ly/2H2tSZj

Espero puedan ayudarme con ello, voy a colocar CSS y Javascript sin cache de momento por si lo requieren para intentar ayudarme.. Muchas gracias a todo el Foro !!

ArturoGallegos · #7 (**permalink**) 05/05/2019, 15:51

Tu problema es con javascript esta mal escrito, mal organizado y/o puede que tengas demasiadas funciones y entran en conflicto creando un cuello de botella.

Revisando con las herramientas de desarrollador de firefox veo que no se hacen llamadas adicionales al hacer click a una imagen, todo carga en un tiempo optimo, el problema es que tu javascript no lo renderiza con rapidez.

Considera revisar los plugins que tienes activos y removerlos si es posible, optimizar los estilos unificándolos a ser posible y minimizarlos, el HTML limpialo y serapara el CSS y JS en archivos independientes.

Tu puro HTML pesa casi 2 megas, es mucho.

Haciendo eso ganaras un poco de tiempo al momento de cargar el sitio web, para el tiempo al dar click en las imagenes, tienes una gran tarea al tener que revisar todo tu JS, te recomiendo trabajar en un backup e ir deshabilitando cosas para ver donde esta el fallo.

HackID1 · #8 (**permalink**) 07/05/2019, 03:07

Cita:

Iniciado por ArturoGallegos

Tu problema es con javascript esta mal escrito, mal organizado y/o puede que tengas demasiadas funciones y entran en conflicto creando un cuello de botella.

Revisando con las herramientas de desarrollador de firefox veo que no se hacen llamadas adicionales al hacer click a una imagen, todo carga en un tiempo optimo, el problema es que tu javascript no lo renderiza con rapidez.

Considera revisar los plugins que tienes activos y removerlos si es posible, optimizar los estilos unificándolos a ser posible y minimizarlos, el HTML limpialo y serapara el CSS y JS en archivos independientes.

Tu puro HTML pesa casi 2 megas, es mucho.

Haciendo eso ganaras un poco de tiempo al momento de cargar el sitio web, para el tiempo al dar click en las imagenes, tienes una gran tarea al tener que revisar todo tu JS, te recomiendo trabajar en un backup e ir deshabilitando cosas para ver donde esta el fallo.

Hola, muchas gracias por tu aporte, el problema que optimizar JS y CSS de la tienda va ser complicado, CSS puedo ir eliminando estilos innecesarios pero tardaría eternidad para no ver rendimiento realmente, ya que borraría id o class que sean innecesarios pero no notaría casi cambio.

Para Javascript al ser de prestashop desconozco que puedo cambiar, prácticamente todo es de código que viene con la web y de módulos instalados que hay bastantes (y eso que hemos borrado muchos).

Por último conoces alguna herramienta o forma de saber que códigos ir eliminando que sobrecarguen en ese dato de la carga de imágenes específicamente?

Gracias

ArturoGallegos · #9 (**permalink**) 07/05/2019, 08:52

No conozco herramienta alguna que haga algo con tal precisión, como te dije antes mi recomendación seria trabajar en un backup para no afectar el sitio principal he ir deshabilitando cosas y probando.

Lamentablemente, si usas un template que tu no has programado te atienes a este tipo de cosas... si no logras solventarlo deshabilitando plugins, si o si te va a tocar volver a programar tu mismo el template desde cero.

HackID1 · #10 (**permalink**) 08/05/2019, 03:49

Buenas, es la plantilla por defecto de Prestashop, tiene muchos cambios php y CSS en variedad de sitios.

Pero bueno el problema de módulo es que ya todos los que tenemos son los que usamos no me sirve deshabilitarlos porque es las herramientas que hemos ido adaptando a nuestra web.

El tema de Javascript lo comentaba sólo si había algún debug o forma de ver donde se van creando esos cuello de botella al cargar las imágenes.
Dejaré el tema abierto por si encuentro algo nuevo ;)

Muchas Gracias por tu respuesta.

HackID1 · #11 (**permalink**) 29/05/2019, 02:05

De momento he visto que el fallo de lentitud se nota más en Firefox, en Chrome funciona más rápido una vez carga, permite pasar fácilmente las imágenes.

Si alguno encuentra forma de depurar exactamente ese código de visualizar imágenes me escribe, ya que no encuentro aún la manera.