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!
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.
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:
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.
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.
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.
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.
Especializado en la minificación de JavaScript. Te permite exportar tu código minificado directamente a un archivo para descargar.
El mismo caso que el anterior, pero centrado en los archivos css.
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:
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 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.
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.
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.
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é…
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.
En este artículo, aprenderás qué es el Lazy Loading y cómo implementarlo fácilmente en tu… Leer más
En esta guía práctica, te explicamos qué es el presupuesto de rastreo, por qué es… Leer más
¿Alguna vez te has encontrado con un mensaje que te invita a actuar, ya sea… Leer más
Una de las preguntas más comunes entre los desarrolladores web que comienzan a usar JavaScript… Leer más
Descubre qué es y para qué sirve la preimpresión digital para conseguir una buena impresión… Leer más
Ampliamos información para las redes sociales. Descubre cómo gestionar correctamente los consentimientos necesarios en las… Leer más
Ver comentarios
Justo la información que estaba buscando en Internet, precisa y transparente, gracias por este aporte