Minificar CSS manualmente en 1 solo archivo (Sin que el sistema lo haga)

19/01/2018 16:01 #1

Buenas a todos!

 No se si con el titulo me explico bien, si no que los señores Julio y Marc me lo corrijan. Con objetivo SEO técnico voy a explicar muy sencillamente como minificar todos los archivos CSS de nuestro Prestashop en 1 solo archivo, sin que lo haga automáticamente. El gran problema que tienen los plugins de caché o como lo hace PS, es que al generar el archivo minificado va creando diferentes rutas (lógico) y cuando volvemos a limpiar caché se crea un nuevo archivo CSS. Esto no solo es malo porque se quedan almacenados (unos pocos, cientos o miles de CSS) en nuestro servidor, si no que GoogleBot sigue rastreando estos archivos. Analizando los logs se puede comprobar.

Luis Villanueva y Victor Mollá hicieron un video hablando de este problema. Mejor verlo para entederlo: https://www.youtube.com/watch?v=W5wEhe8Pzs0

El pequeño problema que nos podemos encontrar es añadir todos los estilos al global.css, puesto que muchas plantillas las clases "se pisan", por lo que es recomendable nunca duplicar estilos para diferentes páginas. Para saber todos los archivos css de los que se "nutre" nuestro Prestashop abrimos el inspeccionador de elementos del navegador en las páginas de: inicio, categorias, productos, carrito, cms, mi cuenta y contactanos. (Ojo con las páginas personalizadas o de módulos instalados).

Una vez que tenemos generado un archivo Global.css con todos los estilos (hacer copia de seguridad antes de manipular este archivo), asegurandonos que nuestra tienda se visualiza correctamente. OJO: para comprobar que funciona y que el navegador no esté cogiendo estilos de los archivos (product-list.css, category.css...) abrimos nuestra consola del navegador y eliminamos los links (en el <head>) de estos con un simple "suprimir" hasta que solo nos queda el "global" y el link de la fuente googleapis.

Último paso para que desaparezcan las rutas de todos los archivos que hemos minificado en 1, es renombrar todos los CSS y no solo de nuestra plantilla, si no también de los CSS de los módulos. Las carpetas son: /themes/tu-plantilla/css/ y /modules/nombre-modulo/nombre-modulo.css

Lo aconsejable es si tenemos un archivo nombrado "category.css" es dejar "category-0.css". Así si tenemos que volver a recurrir a cualquiera de los arhivos, con quitar el "-0" será suficiente sin tocar código en el core de Prestashop.

Creo que con esto saldrá el tema de hacerlo con los JS, pero a mi me ha sido imposible hacerlo a mano, y habría que crear varios archivos para que funcione correctamente (como viene de serie). Mi recomendación es pasarlos al footer solamente.

Espero que pueda servir de ayuda!

Un saludo.

19/01/2018 16:05 #2

Como repunte final que se me ha pasado, es capar por Robots.txt las rutas de los archivos css de serie, para que googlebot no se encuentre con un 404 y siga perdiendo tiempo de rastreo con estas urls de css.

19/01/2018 16:22 #3

muy buen artículo Jaime! 

gracias