Por qué importa la minificación

Si has revisado la velocidad de tu sitio web con WooRank (u otra herramienta de revisión), es posible que hayas recibido el consejo de minimizar sus archivos de hojas de estilo en cascada (CSS) o JavaScript (JS). JS y CSS pueden ser geniales: hacen que tu sitio sea interactivo (JS) y se vea bien (CSS). Si alguna vez has verificado la velocidad de tu sitio en lí­nea, es posible que hayas visto los consejos para minimizar estos archivos.

¿Qué es la minificación?

La minificación es el proceso de eliminar caracteres innecesarios del código sin cambiar la forma en que funciona el código.

Estos caracteres innecesarios suelen ser cosas como:

• Caracteres en espacios en blanco
• Nuevos saltos de lí­nea
• Comentarios
• Delimitadores de bloque (corchetes)

Digamos que tienes un código como este:

/** * 4.0 Header * ------------------------------------------------------- */
/* Ensure that there is no gap between the header and the admin bar for WordPress versions before 3.8. */
#wpadminbar{
	Min-height: 32px;
}
.site-header {
	top: 0;
  left: 0;
  width: 100%;
  background: #fff;
}
body.admin-bar .site-header{
	top: 32px;
}
.site-title {
	float: left;
  width: 18.965517241%;
  margin: 0;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 28px;
  line-height: 2.8rem;
}

‍

Hay muchas cosas en este código (notas, saltos de lí­nea) que ayudan a los humanos a leer el código, pero no es necesario que el navegador lea la página.

Después de la minificación, ese mismo código podrí­a verse así­:

#wpadminbar{min-height:32px;} .site-header {top:0;left:0;width:100%;background:#fff}body.admin-bar .site-header{top:32px}.site-title{float: left;width:18.965517241%;margin:0;font-size:18px;font-size:1.8rem;font-weight:400;line-height: 28px;line-height: 2.8rem}

Concatenación

También puedes concatenar archivos. Concatenar significa unir un montón de archivos diferentes en solo un par.

Esto reducirá la cantidad de archivos que deben descargarse, aumentando la velocidad.

¿Cómo es esto más rápido?

Como se mencionó anteriormente, los navegadores aún tienen que leer todos esos caracteres en exceso en tu código, ya sea que los usen o no. Esos caracteres adicionales también ocupan espacio en un archivo, haciéndolo más grande de lo necesario.

Como las computadoras no necesitan todo ese formato para poder leerlo, puedes eliminarlo sin afectar la capacidad del código para ejecutarse correctamente.

De hecho, minificar tu código puede reducir el tamaño del archivo en un 30-40%. A veces incluso hasta en un 50%.

La concatenación de archivos también ayuda a reducir la carga en tu servidor y red. La combinación de varios archivos en uno permite que un servidor enví­e más datos en un menor número de conexiones.

Cómo minificar tu código

Si tienes un sitio de WordPress, hay muchos plugins que puedes usar que minimizarán tu código.

Si no tienes un sitio de WordPress, existen otras herramientas que puedes usar para minificar tus diferentes tipos de código:

• HTML: HTMLMinifier
• CSS: CSSNano
• JavaScript: UglifyJS