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!
Índice de contenidos
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.
¿Te encuentras atrapado en la resolución de problemas? Desde formular la pregunta adecuada hasta aprovechar… Leer más
Como en todas las áreas del diseño, el color tiene un papel fundamental. Comprenderlo y… Leer más
Ha llegado el momento. Al fin tenemos entre nuestras manos la primera gran actualización de… Leer más
¿No has oído hablar de Zapier todavía? ¿Quizás te han hablado por encima de Zapier… Leer más
Imagina que un usuario que esté ubicado en Inglaterra encuentre tu web en la versión… Leer más
En este artículo no solo te explicaremos algunas formas para conseguir quitar una página de… Leer más
Ver comentarios
Justo la información que estaba buscando en Internet, precisa y transparente, gracias por este aporte