Minificar CSS, JS, HTML… Acelera tu página web

Publicado el 8 septiembre, 2020 por Alberto Bravo.  / 1 Comentario

Si has pasado alguna auditoria SEO o de velocidad, posiblemente te suene el término «minificación de archivos». Veamos qué es y cómo minificar css, js y html para conseguir más velocidad en nuestro sitio. ¡Acelera tu página web!

Qué es la minificación de archivos

Minificar un archivo consiste en quitarle todo aquello que no aporta nada a su funcionamiento. El objetivo es hacerlo lo más ligero posible. De esta manera queda, generalmente, una sola línea de código, sin espacios en blanco y sin comentarios. El archivo sigue siendo funcional, pero el resultado es tan denso y compacto que hace muy difícil el trabajar con él.

Para trabajar con un archivo minificado podríamos darle un formato automático para que nuestro editor de código indente correctamente el contenido. Sin embargo, si teníamos nuestro código comentado, no recuperaremos estos apuntes, ya que fueron eliminados en la minificación.

Qué tipos de archivos se pueden minificar

Todo es susceptible de minificación, por ejemplo es posible minificar PHP o JSON. Pero nos vamos a centrar en los archivos fundamentales para la velocidad de nuestro sitio web. Para ello podemos minificar:

• CSS
• JS
• HTML

Como minificar tus archivos

Estructura

Es habitual no minimizar el archivo original con el que trabajamos, sino crear una copia con otro nombre, ya que los archivos minificados no son muy fáciles de manejar. Generalmente usamos el término «.min» que añadimos ante de la extensión. Así, si el archivo original se llama «styles.css», la versión minificada la guardaremos como «styles.min.css». Esto debes aplicarlo, también, a tus archivos JavaScript.

Por supuesto, luego habría que cambiar la llamada al archivo original por la llamada al nuevo archivo minificado.

Minificar un archivo

Para minificar el código tenemos varias opciones. Si trabajas con un editor de código puede que ya tenga integrada una opción para crear archivos minificados. Si no la tiene seguro que dispone de alguna extensión adicional.

En el caso de que uses Visual Studio Code te recomiendo la extensión Minify. Si usas este editor puedes echar un vistazo a nuestro artículo sobre las mejores extensiones para Visual Studio.

Minificar en línea

Hay múltiples webs con las que podrás minificar css online de una manera rápida y sencilla. La mayoría también ofrece soporte para minificar JS.

minifier.org

Te permite trabajar con archivos js y css. Pega tu código y, con un clic, te dará el contenido minificado que tendrás que copiar y pegar en tu archivo.

javascript-minifier.com

Especializado en la minificación de JavaScript. Te permite exportar tu código minificado directamente a un archivo para descargar.

cssminifier.com

El mismo caso que el anterior, pero centrado en los archivos css.

Minificar automáticamente en WordPress

En el caso de que tu web trabaje bajo WordPress, tengo una buena noticia: Hay plugins que realizarán todo el trabajo por ti. En un Gestor CMS como WordPress es una locura pretender minificar todos los css y js uno a uno que usa el sitio, por no hablar de los HTML. Por otro lado, de hacerlo de forma manual, corremos el riesgo de echar nuestro trabajo por tierra al actualizar algún plugin o tema.

Por fortuna, como te comentaba, existen plugins que permiten minificar js y css en WordPress:

WP Super Minify

Minifica y combina los archivos HTML, js y CSS de forma sencilla. Puedes seleccionar qué archivos no quieres que minifique, en el caso de que, por ejemplo, alguno diera problemas.

Autoptimize

Autoptimize es un plugin de optimización de velocidad y caché. Una de sus funciones es la minificación de archivos. Tan solo hay que marcar las opciones de minificación deseadas y él se encargará de todo. Dispone, además, de muchas otras opciones para mejorar la velocidad de la web.

Merge + Minify + Refresh

Este plugin es específico para esta tarea. Se encarga de unir todos los CSS usados en nuestro WordPress en un solo archivo minificado. Lo mismo hace con los archivos JavaScript.

Fast Velocity Minify

Además de reunir los archivos css y js en un archivo minificado, también optimiza la carga de Google Fonts. También permite minificar el HTML de las páginas.

Better WordPress Minify

Se trata de un plugin de minificación muy completo. Usa la librería Minify de PHP y da mucho control sobre las acciones a seguir: localización de llamadas, personalización de URLs, CDN, caché…

Conclusión

Si te preocupa la velocidad de carga de tu sitio web no te olvides de minificar tus archivos. Es fácil, cómodo y los resultados son notables. Eso sí, procura ser ordenado y metódico, para no eliminar los archivos originales y no perder el trabajo de documentación que hayáis hecho tú o tus compañeros.