La velocidad de carga es uno de los factores más influyentes en la experiencia que reciben los usuarios de nuestro sitio web. Por eso, tiene una incidencia directa en las tasas de abandono: los usuarios tienden a cerrar la página cuando ven que tarda demasiado en cargar.
Una de las muchas técnicas que apuntan a resolver este problema es la minificación de código: reducir el peso de los archivos de código fuente a través de la eliminación de bytes innecesarios —espacios adicionales, saltos de línea, sangrías y comentarios—, además de simplificar todo lo posible la escritura de las sentencias (por ejemplo, usando nombres de variables y funciones más cortos, o evitando lo más posible la repetición). Otra técnica relacionada es juntar todos los archivos de código fuente de un mismo lenguaje en uno solo. En desarrollo web, los lenguajes que se suelen minificar son CSS y JavaScript (la simplificación de código HTML puede generar una interpretación incorrecta por parte del browser, mientras que en los lenguajes del lado del servidor —como PHP— no se producen mejoras significativas). El verbo no existe oficialmente en español, sino que es una traducción literal del inglés minify.
Veamos un ejemplo. El siguiente código CSS no ha sido minificado, ya que contiene saltos de línea y sangrías, que son útiles para que una persona lo comprenda bien, pero prescindibles para una correcta interpretación por parte del browser:
#main #archives {
margin-bottom: 30px;
margin-top: 0px;
padding-bottom: 40px;
padding-top: 0px;
position: relative;
}
Al minificarlo, el código pasa a verse así:
#main #archives{margin-bottom:30px;margin-top:0;padding-bottom:40px;padding-top:0;position:relative}
Un archivo CSS que contenga el primer código pesará 128 bytes, mientras que el segundo tendrá apenas 100 bytes. El peso se ha reducido en un 21,875%.
Conozcamos las ventajas y las desventajas de esta técnica.
Ventajas
- Se reduce el peso del código fuente del sitio web. Dependiendo de la técnica utilizada, el código fuente original y la posible combinación con otros métodos (como ofuscación de código y almacenamiento en caché), esto puede acelerar de forma drástica la carga de las páginas.
- Como se reduce la cantidad de bytes que necesita nuestro sitio web, también se reduce el espacio ocupado en el servidor y el consumo mensual de ancho de banda. A partir de cierto nivel de tráfico, esto se traduce en un ahorro de dinero en servicios de hosting.
Desventajas
- El código minificado es extremadamente difícil de depurar: no hay comentarios y todos los errores se producirán en una única línea larga.
- Especialmente en JavaScript, si no conocemos la técnica en profundidad, minificar el código puede alterar de manera indeseada su funcionamiento.
Por las características señaladas, muchos plugins de JavaScript y CSS vienen con cada archivo en dos versiones. La versión sin comprimir se recomienda para la etapa de desarrollo, mientras que la versión minificada se destina al sitio ya en producción.
Obviamente, el proceso de minificación nunca es manual, sino que debe realizarse con herramientas específicas como YUI Compressor (Yahoo!) y Closure Compiler (Google).
