Minificar código: una técnica sencilla para hacer más liviano nuestro sitio web

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).

Izquierda o derecha: ¿dónde deberíamos ubicar la sidebar?

La sidebar, o barra lateral, es la sección que aparece a uno de los costados del contenido principal en muchas páginas web. Puede exponer contenido relacionado (a la página o al sitio en general), noticias vinculadas, menús de navegación, banners publicitarios, formularios para suscribirse al newsletter y todo tipo de widgets. El concepto proviene del diseño gráfico.

Tradicionalmente, la sidebar era una sola y se ubicaba al costado izquierdo. Sin embargo, durante el boom de los blogs (entre 2004 y 2008) se popularizó la sidebar a la derecha. Hoy podemos encontrar sitios web con una u otra disposición, o incluso con dos sidebars (una a cada costado). ¿Cuál es la mejor opción?

TechCrunch usa dos sidebars

1stwebdesigner usa sidebar derecha

Kotaku usa sidebar izquierda

Sidebar a la derecha

  • Para los usuarios occidentales, el orden de lectura predominante es de izquierda a derecha. Por eso, si la sidebar está a la izquierda el usuario la alcanzará con la mirada en primer lugar, antes que el contenido principal. En el diseño de blogs, revistas digitales y sitios de noticias, muchos eligen ubicar la sidebar a la derecha para que los usuarios vean el contenido principal (las noticias) antes que el secundario. De esta manera, suponen, capturarán la atención del lector apenas abra la página. Así, esta decisión ayudaría a cumplir con la «regla de los tres segundos».
  • Según Paul Boag, la navegación a la derecha refleja el tradicional sistema de «navegación» de los libros y las agendas, donde las pestañas están ubicadas a la derecha. Además, la barra de scroll vertical siempre se ubica a la derecha, y es allí donde el usuario coloca naturalmente el cursor del mouse.
  • Probablemente sea mejor en términos de posicionamiento en buscadores. Lo normal es que en el código fuente el contenido principal se presente antes que la sidebar, y los buscadores podrían basarse en este orden para determinar qué contenido es más importante.

Sidebar a la izquierda

  • Hay quienes objetan que los usuarios de Internet están más acostumbrados a ver las sidebars a la izquierda, y cambiar esta disposición implica traicionar sus expectativas.
  • El ojo tiende a posicionarse al centro de la pantalla. Con la sidebar ubicada a la izquierda, el título del post empieza cerca del centro. Pero si la sidebar está a la derecha, el título del post empieza «pegado» a la izquierda.

Conclusiones

No hay una opción mejor que otra. Muchos estudios revelan que el costado donde esté ubicada la sidebar no influye de manera significativa en el comportamiento del usuario: la duración de la visita y las tasas de conversión son prácticamente las mismas, con una leve diferencia a favor de la sidebar derecha. Sin embargo, se recomienda tomar una decisión según el contenido que queremos que el usuario encuentre a simple vista. Los demás aspectos del diseño y el nicho al que se oriente nuestro sitio web también deben ser tenidos en cuenta.

En el caso de utilizar dos sidebars, lo ideal es usar la izquierda para mostrar enlaces de navegación, publicidad, el formulario de suscripción y noticias relacionadas, y usar la derecha para brindar información complementaria (sobre el autor del post o sobre la empresa) y enlaces a nuestras cuentas en redes sociales.

Por último, debemos tener en cuenta que, en resoluciones chicas como las de las tablets y los smartphones, resulta conveniente quitarle espacio a la sidebar para privilegiar el ancho de la sección principal.