Foros del Web » Creando para Internet » Diseño web »

Mejorar velocidad al visualizar imágenes Javascript de Prestashop

Estas en el tema de Mejorar velocidad al visualizar imágenes Javascript de Prestashop en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/04/2019, 05:06
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 482
Antigüedad: 6 años, 3 meses
Puntos: 16
Pregunta Mejorar velocidad al visualizar imágenes Javascript de Prestashop

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
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #2 (permalink)  
Antiguo 29/04/2019, 09:00
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.334
Antigüedad: 11 años, 2 meses
Puntos: 1040
Respuesta: Mejorar Velocidad al visualizar imágenes Javascript de Prestashop

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".
  #3 (permalink)  
Antiguo 02/05/2019, 18:11
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.030
Antigüedad: 11 años, 2 meses
Puntos: 1326
Respuesta: Mejorar Velocidad al visualizar imágenes Javascript de Prestashop

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
__________________
Grupo Telegram Docker en Español
  #4 (permalink)  
Antiguo 03/05/2019, 08:31
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 482
Antigüedad: 6 años, 3 meses
Puntos: 16
Respuesta: Mejorar Velocidad al visualizar imágenes Javascript de Prestashop

Cita:
Iniciado por ArturoGallegos Ver Mensaje
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.
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #5 (permalink)  
Antiguo 03/05/2019, 09:36
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.334
Antigüedad: 11 años, 2 meses
Puntos: 1040
Respuesta: Mejorar Velocidad al visualizar imágenes Javascript de Prestashop

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
  #6 (permalink)  
Antiguo 05/05/2019, 12:29
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 482
Antigüedad: 6 años, 3 meses
Puntos: 16
Respuesta: Mejorar Velocidad al visualizar imágenes Javascript de Prestashop

Cita:
Iniciado por ArturoGallegos Ver Mensaje
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 !!
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #7 (permalink)  
Antiguo 05/05/2019, 15:51
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.334
Antigüedad: 11 años, 2 meses
Puntos: 1040
Respuesta: Mejorar velocidad al visualizar imágenes Javascript de Prestashop

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.
  #8 (permalink)  
Antiguo 07/05/2019, 03:07
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 482
Antigüedad: 6 años, 3 meses
Puntos: 16
Respuesta: Mejorar velocidad al visualizar imágenes Javascript de Prestashop

Cita:
Iniciado por ArturoGallegos Ver Mensaje
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
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1
  #9 (permalink)  
Antiguo 07/05/2019, 08:52
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.334
Antigüedad: 11 años, 2 meses
Puntos: 1040
Respuesta: Mejorar velocidad al visualizar imágenes Javascript de Prestashop

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.
  #10 (permalink)  
Antiguo 08/05/2019, 03:49
Avatar de HackID1  
Fecha de Ingreso: febrero-2013
Ubicación: En Update
Mensajes: 482
Antigüedad: 6 años, 3 meses
Puntos: 16
Respuesta: Mejorar velocidad al visualizar imágenes Javascript de Prestashop

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.
__________________
Puntuar +1 es buena forma de dar las gracias. :P
Your Time is limited, so don't waste it living someone else´s life.
Por: HackID1



La zona horaria es GMT -6. Ahora son las 06:59.