Cómo minificar JavaScript, HTML y CSS
Nos centramos en una de las tareas imprescindibles para los desarrolladores frontend. Se trata de la optimización del código por medio de la minificación, un aspecto esencial en el desarrollo web que puedes aplicar en todos los lenguajes de programación estándar que entienden los navegadores web: HTML, CSS y JavaScript.
¿Qué es la minificación de código y por qué es importante?
La minificación del código, a veces también llamada minimificación o compactación, es un proceso por el cual se transforma el código fuente, eliminando todas aquellas partes que resultan innecesarias a la hora de procesarlo. Con esto conseguimos disminuir el tamaño de los archivos que se tienen que transferir por Internet cuando se visita una página web, obteniendo una transferencia más rápida y mejorando la experiencia de usuario.
En el proceso de minificación se eliminan caracteres como espacios en blanco o retornos de carro de nuevas líneas. También se borran los comentarios y se reduce los nombres de las variables y otros identificadores, como los nombres de funciones o clases. Todo ello sin alterar la funcionalidad o el aspecto de las páginas.
Beneficios de minificar JavaScript, HTML y CSS
Este proceso forma parte del flujo habitual del desarrollo frontend y resulta especialmente importante, no solo porque consigue mejorar la experiencia de usuario, sino también porque desde hace un tiempo los buscadores posicionan mejor las páginas correctamente optimizadas. Vamos a resumir a continuación éstos y otros beneficios de la minificación.
Reducción del tamaño de los archivos
La ventaja fundamental de la minificación es la reducción del tamaño de los archivos que forman una web, en los lenguajes frontend: JavaScript, HTML y CSS. Al volverse más pequeños se pueden transferir más rápidamente desde el servidor al navegador del usuario.
Mejora en los tiempos de carga de la página
Como consecuencia de la reducción del tamaño de los archivos se consiguen tiempos de carga menores en el acceso a las páginas de los sitios web. Menores tiempos de carga implican mejor experiencia de usuario y también disminuye la posibilidad de que los visitantes abandonen la página durante su carga.
Ahorro en el ancho de banda
Otro de los beneficios de la minificación consiste en el ahorro de ancho de banda con cada transferencia de página. De cara a nuestro servidor, ahorrar unos KB en una única página quizás no resulte a primeras luces muy espectacular, pero hay que considerar que este ahorro resulta muy relevante al cabo de miles o millones de descargas de páginas al día o al mes. Paralelamente, los usuarios también se benefician por un menor consumo de datos, algo especialmente importante cuando navegan con dispositivos móviles.
Mejor rendimiento en dispositivos móviles
Hablando de dispositivos móviles, también resulta relevante mencionar el mayor rendimiento que obtienen gracias a la minimificación, ya que el volumen de datos transferidos disminuye y a la vez tienen que gestionar archivos más pequeños, consumiendo menos memoria.
Optimización del SEO y la experiencia del usuario
Como hemos dicho antes, desde hace un tiempo los motores de búsqueda como Google tienen en cuenta la experiencia de usuario de cara al posicionamiento de las páginas. Aumentando la velocidad de la página estaremos beneficiando a nuestros usuarios y por tanto aumentarán las posibilidades de obtener un buen posicionamiento SEO. Paralelamente, menor tiempo de descarga de la página puede aumentar las tasas de retención y reducir las tasas de rebote, lo que también impactará positivamente en el SEO.
Herramientas para minificar JavaScript
Existen numerosas herramientas para minificar el código JavaScript. Incluso si utilizamos un framework o CMS es posible que ya estés utilizando alguna en tu proyecto, ya que en muchas ocasiones estos sistemas vienen con herramientas integradas de casa para la optimización del código frontend.
Algunas de las herramientas más populares para minificar JavaScript son las siguientes:
UglifyJS
UglifyJS es una herramienta específica para la minificación de JavaScript. Es muy fácil de usar. Está basada en NodeJS y funciona mediante la línea de comandos.
Instalas UglifyJS de manera global en tu ordenador con este comando:
npm install uglify-js -g
Luego puedes minificar usando comandos de consola como estos:
uglifyjs origen.js -o destino.min.js
Google Closure Compiler
Esta herramienta de Google no solo minifica el código, sino que también lo analiza para encontrar errores y sugerir correcciones, realizando también cambios de manera autónoma, por ejemplo para eliminar código muerto. Se trata de una herramienta más avanzada que quizás no todo el mundo conoce.
Terser
Terser es un fork realizado a partir de UglifyJS que ha seguido un desarrollo paralelo para aportar soporte a las últimas características de ECMAScript.
YUI Compressor
Esta herramienta ya no es tan utilizada y se ha quedado un poco relegada en uso, pero también te puede ayudar a minificar lenguajes como JavaScript o CSS.
Babel Minify
Otra herramienta muy utilizada que a menudo está integrada en procesos de transpiración del código es Babel Minify. Forma parte del ecosistema de Babel, una herramienta básica en proyectos JavaScript que permite adaptar el código de versiones modernas del lenguaje a versiones en uso en los navegadores actuales.
Cómo minificar HTML
Ahora vamos a ver las herramientas más comunes para minimificar el código HTML, logrando que sea más compacto.
Uso de HTMLMinifier
Quizás la herramienta más popular para la minificación del código HTML es HTMLMinifier. Gracias al proceso de compactación del HTML puedes reducir sensiblemente el tamaño de los archivos, eliminando espacios en blanco y atributos vacíos o innecesarios. Incluso, si tienes CSS o JavaScript embebido en el código HTML, también lo puede optimizar.
Esta herramienta está basada en NodeJS, por lo que la instalaremos a través de npm. Puedes usar el comando
npm install html-minifier -g
Eso lo instalará de manera global en tu sistema, lo que te permitirá usar la herramienta en cualquier ruta del terminal de línea de comandos.
Luego, para minificar de una vez todos los archivos de un proyecto lanzarás un comando como el siguiente:
html-minifier --input-dir ./src --output-dir ./dist --collapse-whitespace --remove-comments
Minificación con Gulp
Gulp también es una herramienta muy utilizada para la optimización del código frontend en general, que nos permite transformar el código HTML pero también el código de otros lenguajes. Quizás hoy se encuentre un poco en desuso, debido a la aparición de otras herramientas más sencillas y más fáciles de integrar en los flujos de desarrollo como WebPack o Vite.
Esta herramienta también está basada en Node y generalmente se usa a nivel de proyecto. Si deseas compilar el HTML necesitas instalar, además de Gulp, el plugin gulp-htmlmin. Lo puedes realizar todo de una vez con el siguiente comando:
npm install gulp gulp-htmlmin -D
Para usar Gulp necesitamos crear un archivo con el código del proceso de compilación que será específico para cada tipo de proyecto. El archivo que tienes que crear se llama gulpfile.js y tendrás que colocarlo en la raíz de tu proyecto, en la misma carpeta donde se encuentra el package.json.
Existen multitud de configuraciones comunes pero te damos un ejemplo a continuación para compilar tu HTML:
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
gulp.task('minify-html', () => {
return gulp.src('src/*.html')
.pipe(htmlmin({ collapseWhitespace: true, removeComments: true }))
.pipe(gulp.dest('dist'));
});
Con el código anterior hemos definido una tarea llamada minify-html. Lo normal para ejecutarla será crear un script en el package.json con este comando:
gulp minify-html
Minificación automática con Grunt
Grunt es una herramienta directamente competidora de Gulp. Adquirió una tracción mayor debido a su facilidad de configuración. El proceso de trabajo, no obstante, es muy similar al que hemos descrito con Gulp.
Primero se instala a nivel de proyecto como dependencia de desarrollo:
npm install grunt grunt-contrib-htmlmin -D
Luego se tiene que configurar la tarea en el archivo Gruntfile.js, que colocarás en la raíz de tu proyecto.
Dependiendo de las tareas que quieras asignar a Grunt el código puede ser uno u otro. Te damos un archivo típico de configuración para que puedas tenerlo como referencia.
module.exports = function(grunt) {
grunt.initConfig({
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: {
'dist/index.html': 'src/index.html'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.registerTask('default', ['htmlmin']);
};
Entonces se recomienda crear el script en el package.json con el comando «grunt» para poder ejecutar las tareas.
Cómo minificar CSS
Dentro de los lenguajes frontend que deberíamos minificar en los proyectos nos queda hablar del CSS. Aquí las herramientas más populares son las siguientes.
Uso de CSSNano
CSSNano es una herramienta muy usada para la minificación y compactación del código CSS. Nuevamente, está basada en NodeJS, por lo que la instalamos vía npm, generalmente como dependencia de desarrollo a nivel de proyecto:
npm install cssnano -d
Para usar CSSNano Necesitaremos apoyarnos en otras herramientas frontend, siendo la más popular PostCSS.
Tenemos que instalar PostCSS también a través de npm.
npm install postcss -d
Lo normal es usar Nano de manera automatizada mediante PostCSS. Luego te explicamos cómo lo debes hacer.
Uso de CleanCSS
Si no deseamos configurar herramientas como PostCSS en el proyecto y mantener archivos para sus flujos funcionamiento, otra alternativa consiste en utilizar CleanCSS, que solo los implica lanzar comandos de consola.
Podemos instalar CleanCSS de manera global con el siguiente comando:
npm install clean-css-cli -g
Luego podemos minificar el CSS utilizando un comando como el que sigue:
cleancss -o dist/styles.css src/styles.css
Minificación automática con PostCSS
Como hemos dicho antes, es muy habitual que se utilice PostCSS para la transformación del código CSS. Desde PostCSS podemos utilizar diversos plugins como CSSNano o Sass para optimizar el CSS o traducir el código de preprocesadores a CSS convencional.
Una vez instalado PostCSS, como describimos anteriormente, podemos crear un archivo llamado postcss.config.js con instrucciones para su funcionamiento.
module.exports = {
plugins: [
require('cssnano')({
preset: 'default',
}),
],
};
Una vez hemos creado ese archivo en la raíz del proyecto podemos lanzar el comando siguiente para verificar el código CSS automáticamente.
postcss src/styles.css -o dist/styles.css
Mejores prácticas y consejos para minificar código
Dada la importancia de la minificación del código frontend, es recomendable que creemos flujos de trabajo que nos permitan gozar de sus beneficios, sin que ello impacte en una mayor carga en nuestras tareas diarias. Vamos a ver algunas buenas prácticas que merece la pena señalar para que nuestro trabajo sea lo más liviano y productivo posible.
Automatiza el proceso de minificación
El primer paso para conseguir mejorar nuestros flujos de trabajo es crear scripts de automatización de las tareas de minificación.
Muchas herramientas como WebPack o Vite tienen opciones o plugins que puedes utilizar para integrar en ellas los procesos de minificación del código cuando llevamos a producción los proyectos. También puedes usar scripts npm o scripts NodeJS.
Utiliza herramientas de minificación confiables
Busca herramientas de minificación que sean ampliamente usadas por la comunidad. En este artículo hemos destacado las más importantes. De este modo no solo mejorará el rendimiento de los procesos de compactación del código sino que además será más fácil encontrar soluciones a las dudas frecuentes.
Mantén una versión no minificada para depuración
El proceso de minificado debe ser aplicado en los flujos de construcción (build) de los proyectos, aquellos que se ejecutan cuando queremos llevar a producción. Durante la etapa de desarrollo es habitual trabajar con los archivos sin minificar, lo que nos ayudará a mejorar el rendimiento y la experiencia de desarrollo, o la depuración del código.
Verifica la compatibilidad del código minificado
Cuando minimices el código de tus aplicaciones verifica luego que funciona todo correctamente. Es ideal que pruebes tu página en diferentes navegadores y dispositivos.
Realiza pruebas de rendimiento después de minificar
Cuando tengas tu sitio web en producción utiliza herramientas para medir el rendimiento y obtener consejos de optimización. Algunas herramientas muy conocidas son Google Lighthouse o GTmetrix.
Actualiza regularmente tus herramientas de minificación
Con el paso de los meses o años las herramientas de minificación evolucionan y publican nuevas versiones que, no solo corrigen errores, sino que optimizan el código resultante, teniendo en cuenta las configuraciones de los navegadores actuales.
Es por ello importante que revises las versiones de las herramientas instaladas en tu proyecto o a nivel global, para tener las más nuevas posibles.
Documenta el proceso de minificación en tu proyecto
Finalmente y especialmente cuando trabajes en equipo, tómate un tiempo para documentar el proceso de llevar a producción tu proyecto. Deja claro a los otros miembros del equipo cómo debe realizarse el proceso de minificación y cuándo se realiza, las herramientas que estás usando, etc.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.