Buenas tardes,
Nos hemos puesto en contacto mediante un ticket con Webempresa porque queremos mejorar el PageSpeed de nuestra web.
1. Nos han dicho que el principal problema son las imágenes, pero no entiendo bien como tenemos que hacer para que estén bien optimizadas. Nosotros tenemos la siguiente configuración de tamaños la cuál adjunto en una captura. Las imágenes que nosotros subimos optimizadas tienen un tamaño de 800 x 800. ¿Cómo deberíamos de proceder para solucionar esto y conseguir una mejora?
2. En segundo lugar nos dicen: Especificar caché de navegador
Establecer una fecha de caducidad o una edad máxima en las cabeceras HTTP de los recursos estáticos indica al navegador que cargue los recursos descargados previamente del disco local en lugar de hacerlo a través de la red. Esto he leído que se puede hacer cargando un módulo mod_expires, pero no sé muy bien como conseguir esto.
3. Reducir el tiempo de respuesta del servidor. Esto no sé cómo se puede mejorar tampoco.
4. Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página. Necesito optimizar la entrega de CSS.
También no sé si influye el tener una multitienda y trabajar con 4 tiendas desde el mismo Prestashop.
Espero que puedan ayudarme. Muchas gracias por adelantado.
Un saludo.
URL del sitio: Contenido solo visible a usuarios registrados
Hola
Con respecto a las imágenes, efectivamente veo que puedes optimizarlas, pero la optimización no sólo es cuestión de tamaño.
Por ejemplo la imagen principal de 1170x470 es una imagen que pesa aprox 310kb lo cual es mucho, puedes mantener el mismo tamaño y optimizarla, para esto tienes que usar un programa editor de ima´genes como photoshop y exportarla con menos calidad, se verá igual, pero como menos tamaño.
Lo mismo para cada imagen de producto, si tiene pocos colores puedes optimizar calidad. En este caso puedes probar también la opción de prestashop de reducción de calidad, tendrías que regenerar miniaturas.
Saludos.
Con respecto a tus otras dudas, hay temas similares que ya se han tratado en este foro, por ejemplo:
Especificar cache de navegador (es similar en PrestaShop) debes tener un .htaccess igualmente:
https://www.webempresa.com/foro/24-Administraci%C3%B3n-WordPress/142144-Especificar-cach%C3%A9-del-navegador.html
Reducir el tiempo de servidor:
Esto lo puedes lograr activando la caceh de tu PrestaShop, y algunos parámetros de optimización. Revisa:
https://www.webempresa.com/blog/mejora-la-velocidad-de-tu-tienda-prestashop-en-5-sencillos-pasos.html
Eliminar el JavaScript que bloquea la visualización y el CSS:
Este es un punto que muchas veces se pasa por alto ya que implica muchos cambios, depende del theme que usas y la estructura de los módulos, de manera general resuelve los primeros puntos en los cuales tienes más control.
Saludos.
Buenos días,
Gracias por la respuesta Jhon, tengo algunas dudas aún. Con respecto a especificar caché de navegador, ¿en qué parte del .htaccess debería añadir ese código? Debería de ponerlo antes de esta línea: # ~~start~~ Do not remove this comment, Prestashop will keep automatically the code outside this comment when .htaccess will be generated again
Por otro lado, en reducir el tiempo del servidor tengo algunas preguntas, adjunto la configuración que tenemos actualmente. Creo que nos quedaría activar optimizar apache y los servidores multimedia que no sé exactamente que tendría que poner ahí y si primero tengo que crear dichos subdominios y cómo los crearía. Muchas gracias por adelantado.
Un saludo.
Hola Mario,
Te respondo por partes:
1º ¿en qué parte del .htaccess debería añadir ese código?
Tienes que ponerlo al final después de la línea que me indicas para que no se elimine al ser regenerado este fichero.
2º reducir el tiempo del servidor tengo algunas preguntas, adjunto la configuración que tenemos actualmente.
Para mejorar esto es necesario por actives una caché en tu Prestashop como la Smarty que ayudará que la web cargue más rápido.
Te recomiendo ir a parámetros avanzados > Rendimiento y activa solo la caché del primer bloque que es Smarty. Si tienes otras activadas en el resto de bloques desactívalas.
Luego veo que en tu web cargan bastante imágenes, prueba a optimizarlas con IMGOptimizar -> https://guias.webempresa.com/preguntas-frecuentes/optimizar-imagenes-herramienta-imgoptimizer/
Dime si con esto ya la web carga mejor y en las proximas revisiones de PageSpeed mejoras la velocidad. Recuerda que debes esperar un tiempo entre cada analisis para evitar los resultados caché.
Saludos
Buenas tardes Rafael,
Antes se me olvidó adjuntar las imágenes. Las adjunto ahora con una captura del htaccess para ver si está correcto ahí.
¿Hay alguna manera de optimizar las imágenes sólo para un clon de la página? Quiero hacer primero las pruebas de optimización en un clon primero y ver si mejora.
Muchas gracias.
Un saludo.
Hola Mario,
Está perfecto la especificación en el .htaccess
Sobre la configuración del apartado Rendimiento de tu Prestashop, te recomiendo que solo dejes activo el primero y desactives el resto (CCC) etc. ya que en nuestro Hosting te puede dar más carga que beneficio y en la mayoría de los casos no es necesario debido al uso de disco SSD.
Respecto a IMGOptimizer, este optimiza todas las imagenes de toda la cuenta, no es posible hacerlo para una web en concreto pero no te preocupes, antes de optimizar hace una copia por si no te interesa el resultado, puedes pedir vía ticket que te restauren las imagenes tal cual estaban sin optimizar
Saludos
Buenas tardes,
Coloqué el siguiente código en mi htaccess pero no funciona:
ExpiresActive On ExpiresDefault "access plus 10 days" ExpiresByType image/jpg "access 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/gif "access 1 month" ExpiresByType image/png "access 1 month" ExpiresByType text/css "access 1 week" ExpiresByType text/plain "access plus 1 week" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/javascript "access plus 1 week" ExpiresByType text/javascript "access plus 1 week" ExpiresByType image/x-icon "access 3 months" ExpiresDefault "access plus 1 month"
En cuanto al IMGOptimizer, ¿cuánto tiempo tardaría? ¿Hay algún riesgo de perder algunas imágenes?
Respecto a la parte de reducir el tiempo de servidor, si desactivo las opciones de CCC (COMBINACIÓN, COMPRESIÓN Y CACHE), en concreto la última (Mover JavaScript al final) la página no funciona de manera correcta.
Muchas gracias.
Un saludo.
Hola Mario.
El código lo tienes bien, ese es el código que se utiliza para determinar el tiempo de expiración de la caché del navegador.
ExpiresActive On ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType text/css "access plus 1 week" ExpiresByType text/javascript "access plus 1 week" ExpiresByType application/javascript "access plus 1 week" ExpiresByType application/x-javascript "access plus 1 week" ExpiresByType image/x-icon "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/vnd.microsoft.icon "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType font/opentype "access plus 1 year" ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-otf "access plus 1 year"
En cuanto al IMGOptimizer, ¿cuánto tiempo tardaría? ¿Hay algún riesgo de perder algunas imágenes?
No suele tardar mucho, tambien dependera de la cantidad de imágenes que tienes, una vez seleccionada la opción de optimizar, en cuando termine, te llegara un correo con todos los datos, tamaño que tenias anteriormente y tamaño después de la optimización
Si mueves el java al final es muy probable que tengas problemas con tu web ya que puede que algunas de las extensiones que tienes instaladas necesiten cargar esa librería para poder mostrarse antes de que se carge toda tu web.
Google es muy estricto en lo que te muestra y muchas de las opciones son complicadas de poder llevarlas a cabo a no ser que sepas de programación y realices muchas modificaciones en el core de tu CMS, para que te hagas una idea, una de las opciones que proponen cuando realizas un test si utilizas fuentes de google es que reduzcas la entrega css de https://fonts.googleapis.com, esta url es de google y no se puede reducir porque son ellos los que te la están sirviendo.
Un saludo
Buenos días Pepe,
Ya se ha solucionado el tiempo de expiración de la caché del navegador y también el tema de optimizar las imágenes. Hemos subido a un 72 / 100 en móvil y un 76 / 100 en pc. Sólo nos quedaría mejorar Reducir el tiempo de respuesta del servidor pero no sé bien que parámetros tengo que dejar activados y cuales desactivados en la parte de rendimiento de Prestashop.
De momento tenemos lo siguiente:
- En Smarty:
Cache de plantillas: Nunca recompilar los archivos de las plantillas
Caché: Si
Tipo de cache: Sistema de archivos
Vaciar el caché: Limpiar la cache siempre que algo se haya modificado
- Modo Depuración:
Inhabilitar los módulos no nativos: No
Inhabilitar las sobre-cargas: No
- Características opcionales:
Combinaciones: Si
Funcionalidades: Si
Grupos de clientes: Si
- CCC
"Smart cache" para las hojas de estilo (CSS): Si
"Smart cache" para el código de JavaScript: Si
Reducción del código HTML: Si
Compresión del JavaScript dentro del código HTML: Si
Mover JavaScript al final: Si
¿Optimizar Apache?: No
- Servidores Multimedia -> Aquí no tenemos nada
- Cifrado
Algoritmo: Utilizar Rijndael con la librería mcript.
- Cache
Usar cache: No
¿Qué tendría que cambiar? Lo único que no puedo poner a no es mover JavaScript al final porque no se ve bien la página.
Muchas gracias por adelantado.
Un saludo.
Hola
Para que la respuesta en servidor mejore básicamente tendrías que evaluar usar cache.
- Cache
Usar cache: Si
También te recomiendo
- En Smarty:
Cache de plantillas: Recompilar cuando los archivos sean modificados
Saludos..
Buenas tardes,
Si activo caché me aparece un desplegable y ahí, ¿qué tengo que poner? ¿Dejo marcado Sistema de archivos y en Produndidad de los directorios dejo 1?
Por otro lado, en la guía https://www.webempresa.com/blog/mejora-la-velocidad-de-tu-tienda-prestashop-en-5-sencillos-pasos.html dice que deje marcado Nunca recompilar los archivos de plantillas. Dejo mejor recompilar cuando los archivos sean modificados.
En esa misma guía también aparece activado optimizar apache. ¿Debería de marcarlo como activado también?
Muchas gracias y disculpen las molestias.
Un saludo.
Hola
Si, para cache usa sistema de archivos y deja la opción de directorios por defecto a 1.
Luego con respecto a la recompilación de los archivos del theme, te sugerí dejarlo en Recompilar si son modificados en caso en el futuro hagas cambios a los archivos del theme. La verdad no difiere mucho de la opción de no recompilar, sólo que te aseguras que tus cambios sean tomados en caso hagas cambios.
Saludos.
Buenas tardes,
¿El optimizador apache entonces lo dejo desactivado?
He hecho pruebas y he visto que en la URL Contenido solo visible a usuarios registrados con conexión segura ¿No debería de ser el mismo?
Muchas gracias.
Un saludo.
Hola
Si puedes dejar desactivado optimizar Apache,
Con respecto al tema de https, si que puede ser un poco más lento aunque no debería ser demasiado.
Ten en cuenta que la seguridad implica comprobaciones extra, pero si pierdes algo de velocidad en esto, lo ganas en qeu google te considere mejor por tener https.
Saludos.