¿Te preocupa el tamaño de tu página web?¿Quieres reducir el tamaño del CSS y del JavaScript? Una de mis máximas preocupaciones a la hora de crear una página web, es la experiencia de usuario. Y no solo desde el punto de vista de que sea lo más atractiva y usable para él, que también, sino desde el punto de vista del tamaño.

La rapidez con la que carga una página web, es uno de los parámetros que tiene en cuenta Google a la hora de premiar en posición una página frente a otras. Y, sinceramente, creo que en este punto, Google está realmente acertado. Pero no solo por el aspecto de la velocidad con la que una página se muestra a un usuario, cuestión fundamental, por supuesto, si no, también por el aspecto de lo que pesa una página.

Ciertamente, creo que no es de recibo que un usuario gaste sus tarifa de datos en visitar mi página web, por muy espectacular que sea. Pienso que un buen implementador de páginas web es aquel que consigue el mejor resultado con el menor consumo de recursos, por que echando mucho aceite a la sartén, cualquiera fríe bien.

Sin embargo, en ocasiones, podemos hacer sencillas operaciones que nos permiten reducir el tamaño de nuestros archivos CSS y JavaScript. En esta caso, vamos a ver una sencilla, pero potente herramienta que te permitirá reducir el tamaño del CSS y del JavaScript.

Reducir el tamaño del CSS y JavaScript

El abuelo cebolleta…

Hace un par de años, que las hojas de estilo CSS las implemento utilizando SASS. Esto me permite poder crear diferentes proyectos reutilizando de una forma sencilla el código. Pero todo, sin riesgo de que todas las páginas tengan la misma apariencia. Mas bien, todo lo contrario, puesto que SASS, me permite reutilizar parte del código, y conseguir resultados realmente espectaculares, con menos trabajo.

Sin embargo, todo esto me lleva a que finalmente, el archivo CSS resultante suele tener un tamaño algo mayor del que espero. Esto, lo suelo resolver minimizando el código CSS y el JavaScript, a partir del código original, creado desde SASS, en el caso del CSS.

Hasta la fecha, he estado utilizando la herramienta YUI Compressor. Sin embargo, esta herramienta, tiene una desventaja, desde mi punto de vista, Java. Para mi gusto, como ya he comentado en otras ocasiones, Java, es un verdadero devorador de recursos, con lo que si puedo evitar Java, lo evito.

En este tiempo, he estado en busca de una nueva herramienta que me permite hacer esta operación, hasta hace poco que di con Minify.

Minify o reducir el tamaño del CSS y JavaScript

Minify es una herramienta para el terminal que utiliza la librería Minify, para hacer su trabajo. Se trata de una herramienta multiplataforma disponible para Windows, MacOS y Linux.

Instalación

Minify se encuentra en los repositorios oficiales de Ubuntu desde la versión 17.10, aunque la versión que está disponible en la 17.10 y la 18.04 es la 2.1.0. si quieres instalar esta versión, tan solo tienes que hacer clic en minify. Para la versión 18.10, ya se encuentra la última versión disponible 2.3.5. Eso si, en el momento de escribir este artículo… Si quiere instalar esta herramienta desde el terminal, estando desde la versión 17.10 en adelante, ejecuta,

sudo apt install minify

Por otro lado, también puedes instalarla desde GitHub. De esta forma te instalarás la última versión. Primero visita la página del proyecto para asegurarte que descargas la última versión. En ese caso, ejecuta,

wget https://github.com/tdewolff/minify/releases/download/v2.3.5/minify_2.3.5_linux_amd64.tar.gz
tar --extract --file=minify_2.3.5_linux_amd64.tar.gz minif
sudo mv minify /usr/bin/
rm minify_2.3.5_linux_amd64.tar.gz

Sin embargo, te recomiendo que en le medida de lo posible, utilices la versión que se encuentra en los repositorios. De esta forma, te aseguras estar utilizando una versión compatible con la versión de tu distribución que estás utilizando. Además, en caso de que se detecte una vulnerabilidad y se libere un parche, tu lo tendrás disponible para actualizar. Evidentemente, si lo descargas desde un comprimido descargado desde la página del desarrollador, no tendrás esta posibilidad.

Uso y funcionamiento o como reducir el tamaño del CSS

Minify es una herramienta que te permite reducir el tamaño del CSS, pero no solo de este tipo de archivos. Minify, también es capaz de reducir el tamaño de otros archivos como,

• css para text/css
• htm para text/html
• html para text/html
• js para application/javascript
• json para application/json
• svg para image/svg+xml
• xml para text/xml

El uso es realmente sencillo,

minify [opciones] [entrada]

En cuanto a las opciones disponibles, tenemos las siguientes

• -a reduce el tamaño de todos los archivos incluidos los archivos ocultos
• -h muestra la ayuda
• -l lista todos los tipos de archivo aceptados
• -o para indicar el archivo de salida o el directorio. En el caso de directorio hay que poner la barra invertida del final. Si no se indica nada, el archivo se mostrará por la salida estándar.
• -r se realizará de forma recursiva para todos los directorios
• -v se mostrará toda la salida
• -w se queda en forma de demonio, vigilando todos los archivos a la espera de cambios. En el caso de producirse, se minimizarán los archivos.

Así, para reducir el tamaño del CSS, tan solo tenemos que ejecutar la orden,

minify -o salida.css entrada.css

Para reducir todos los archivos en src/

minify -o out/ src

También es posible encadenar dos archivos en uno solo,

minify -o salida.css uno.css dos.css

Para monitorizar los cambios en style.css

minify -w -o style.css style.css

Mi flujo de trabajo para reducir el tamaño del CSS

Actualmente, cuatro de los proyectos que llevo entre manos, están alojados en hospedajes que no permiten el acceso vía ssh. Esto es algo realmente molesto, si no fuera por git-ftp una herramienta que te permite llevar el control de versiones de tu web, de forma sencilla e intuitiva.

De esta forma, he incoporado, minify dentro del propio flujo de trabajo. Así he creado, un sencillo script que se encarga de reducir el tamaño del CSS, como paso previo a subir a la página web, lo que me ahorra unos segundos. Esto al cabo del día o del mes, representa un tiempo que siempre viene bien.

Esto queda de la siguiente manera,

if [ -f sass/style.css ];then
    minify sass/style.css -o style.css
fi
git add .
git commit -m "`date +%FT%T`"
git push -u origin master
git ftp push

Si, como te has fijado, últimamente soy así de vago, el mensaje del commit es simplemente la fecha. La cuestión es que cuando tienes que hacer muchos, pues yo me canso…

Conclusión

Como he comentado en la introducción, creo que es realmente importante no penalizar al consumidor de tu página, con un gasto innecesario. Esto a la vez no solo redunda en una mejor experiencia de cara al usuario, puesto que tu página es mas rápida, sino que Google te tiene en mejor consideración.

Sin embargo, y aunque me parezca importante tener en cuenta a Google en tu pensamiento, a la hora de crear tu página web, es mas importante tener en mente al usuario. Esto es así, porque aunque te parezca hoy imposible, podría suceder que otro motor de búsqueda reemplazara al mayoritario en un futuro. Sin embargo, si a los usuarios les gusta esto va a seguir siendo así.

Por todas estas razones, piensa en reducir el tamaño del CSS, del JavaScript, de las imágenes, y de todo lo que esté en tu mano reducir… por que de esta forma, el usuario de tu página te estará mas agradecido.

Más información,

• Minify