SEO

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

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.

Alberto Bravo

Hola, soy Alberto Bravo, licenciado en BB.AA. en la Universidad del País Vasco. Me especialicé en diseño gráfico e ilustración. Tras varios años trabajando de ello (etapa de autónomo incluida), decidí digitalizarme y pasar al diseño web. Allí descubrí el SEO y la programación. Actualmente, soy el responsable del departamento SEO de Caronte Studio. En mis artículos te hablaré, principalmente, de SEO y tiendas online, pero seguro que también podrás encontrar algún que otro artículo sobre diseño gráfico. WEB | LINKEDIN | ARTSTATION

Ver comentarios

  • Justo la información que estaba buscando en Internet, precisa y transparente, gracias por este aporte

Entradas recientes

Notas de Instagram: Decimos adiós también a este formato

Desde hace unas semanas, los rumores eran cada vez más fuertes, y ahora ya es… Leer más

3 días hace

Retos y oportunidades del B2B digital en España: situación actual en 2025

El entorno B2B (Business to Business) en España vive una etapa de profunda transformación impulsada… Leer más

6 días hace

Qué es el SEO y por qué hace falta en tu empresa

Qué es el SEO y por qué es importante para tu empresa. En este artículo… Leer más

2 semanas hace

Google Core Update marzo 2025 y lo que debes saber

El 13 de marzo de 2025, Google anunció el despliegue de su primera actualización central… Leer más

2 semanas hace

Cómo hacer una migración SEO y no perder posicionamiento en buscadores

La migración SEO es una operación crítica para una web que fácilmente se puede convertir… Leer más

3 semanas hace

Enlaces nofollow: qué son y para qué se utilizan

En el ámbito del SEO, uno de los aspectos clave es la gestión de enlaces… Leer más

3 semanas hace