¿Qué es WPO?

La Optimización de Rendimiento Web (o comúnmente conocida como WPO por sus siglas en inglés) se puede considerar como el estudio y mejora del comportamiento de una web, especialmente los tiempos de carga.

Para hacer esto, se recurre a diversas técnicas que listo a continuación:

  • Comportamiento del servidor: Son las optimizaciones aplicadas al entorno en el que está alojada la web, esto comprende desde el servicio de ficheros debidamente comprimidos, el cacheo de contenidos estáticos o el alojado de cookies.
  • Servicio de contenido estático: En general se habla del uso de CDN, o incluso de subdominios, paralelizar peticiones…
  • Comportamiento del cliente: Aquí viene lo interesante. Es mucho lo que se puede hacer y es importante tener claro que estas mejoras deben planificarse ANTES del desarrollo. Aquí se incluye casi todo, y es en lo que me voy a centrar en este artículo. Hablaremos de optimización de imágenes, de reducir el número de peticiones al servidor, optimizar estilos y muchas cosas más. Seguramente me deje algo en el tintero, así que sentíos libres de comentar con vuestras ideas.

Optimización de Comportamiento del Cliente

Podríamos definir este apartado como el cúmulo de muchos pequeños subapartados que paso a indicar a continuación:

  • Optimización de imágenes.
  • Optimización de CSS.
  • Optimización de JavaScript.
  • Reducción de peticiones al servidor.

Pasemos a describir las labores que estas tareas implican.

Optimización de imágenes

Parece de cajón, pero no lo es. Debemos mirar bien el tamaño de las imágenes que servimos, no tiene sentido mostrar imágenes de 1280*1080 píxeles cuando el máximo tamaño al que se muestran es de 400*379 píxeles sólo cambiando el tamaño de estas imágenes estaremos reduciendo su peso a un 30% de lo que pesaban antes, y supone una mejora de carga considerable. Para muestra, un botón.

Tenemos una imagen de 1900*2533 píxeles que nos viene desde diseño. Esta imagen forma parte de una galería de imágenes, digamos que unas 20, la imagen pesa 936kB, o sea, cerca de un megabyte. Si lo multiplicamos por 20 imágenes que tendrá nuestra web, sólo en imágenes estamos sirviendo 20MB, que con una conexión mala, puedes tardar la vida en cargarlo y si entras desde un móvil, alguien se va a enfadar mucho por gastar su tarifa de datos… Después de hacer un pequeño análisis, vemos que el tamaño máximo al que se muestra la imagen en cuestión es de 630*840px. No hace falta ser muy listo para ver que este tamaño es MUY inferior al que estamos sirviendo la imagen, ¿cierto?

Tomamos la decisión de que para todas estas imágenes hace falta una optimización, y reducimos su tamaño a la máxima resolución a la que se mostrará y obtenemos como resultado que el peso de la imagen nueva que hemos servido es de 92,4 kB. La imagen original es 10 veces más pesada que la imagen optimizada. Con esto hemos reducido la carga de imágenes a una décima parte, la web cargará más rápido y no nos fundiremos la tarifa de datos de nadie.

Esto es la optimización de las imágenes que servimos.

Optimización de CSS

Empecemos por la base: el css inline es caca el mal. Otra vez. NO hay que usar estilos inline en elementos, y con algo menos de peligro en etiquetas style dentro del cuerpo de la página. Aparte de los problemas que nos puede dar el mantenimiento de estos estilos, la imposibilidad de seleccionar pseudo-elementos o pseudo-clases y otras derivadas de estos estilos, tenemos otro problema que se nos presenta. La repetición constante de estilos. Creo que en este ejemplo se verá bastante claro a lo que me refiero:

<ul class="menu">
	<li class="menu-item" style="text-decoration: underline; color: red;">
		Elemento 1
	<li>
	<li class="menu-item" style="text-decoration: underline; color: red;">
		Elemento 2
	<li>
	<li class="menu-item" style="text-decoration: underline; color: red;">
		Elemento 3
	<li>
	<li class="menu-item" style="text-decoration: underline; color: red;">
		Elemento 4
	<li>
</ul>

Aquí se puede ver como todos los elementos .menu-item llevan como propiedades css un subrayado y un atributo de color rojo. Para ello hemos indicado cuatro veces que estos elementos llevan estas propiedades visuales, metiendo los estilos en el propio elemento. Ahora bien, si en lugar de eso, indicamos en nuestra hoja de estilos el siguiente código (usaré sintaxis de SCSS).

.menu {
	&-item {
		color: red;
		text-decoration: undeline;
	}
}

Sólo estaremos indicando que estos elementos tienen estas propiedades una sola vez, evitando duplicidad de reglas constante y el ahorro en caracteres y, por tanto, en peso.

Por otro lado, es conveniente servir los archivos de hojas de estilos propiamente minificados. Esto es reducir el contenido de los mismos eliminando los caracteres innecesarios como algunos espacios y saltos de línea. Hay muchas herramientas online que pueden hacer este trabajo por nosotros y si, como yo, utilizas algún procesador de estilos para LESS o SASS, el propio procesador puede hacerlo por nosotros si está debidamente configurado.

Optimización de JavaScript

Podemos empezar por lo básico. Lo primero de todo es asegurarnos de que las llamadas a nuestros scripts se hagan después de la carga de las hojas de estilos, de esta forma nos aseguramos de que el contenido se renderice antes de la ejecución de cualquier script y, por tanto, el contenido se muestre correctamente sin ser bloqueado por la carga de los archivos JavaScript.

Analizar y refactorizar si existen varias funciones que modifican al mismo elemento, si es posible que una función lo haga todo mejor que si tenemos varias funciones pequeñas que enturbian el código y pueden acabar dándonos muchas más líneas de código de las que realmente necesitamos.

Asegurar que no tenemos funciones “muertas” que ejecuten acciones en otra sección de nuestra web. No añadamos código que no utilicemos en una vista de nuestra web. Ahorraremos peticiones y tiempos de carga, además de tener código inservible.

Al igual que comentamos con CSS, minificar la salida de nuestros archivos JS nos ofrecerá archivos de peso menor y sin caracteres innecesarios. Que también reducirá el tiempo de carga de nuestra web.

También al igual que con CSS, es conveniente evitar el uso de scripts inline, aunque no es “tan necesario”.

Reducción de peticiones al servidor

Para hacer esto hay varias técnicas sencillas que nos pueden ayudar. Reducir las peticiones al servidor evita el envío innecesario de cabeceras por cada archivo que carguemos, y ese peso y tiempo de carga (por pequeño que pueda parecer) que nos ahorramos.

Combinar los archivos CSS y JS de nuestra página es la primera opción. Una vez tengamos nuestros estilos y nuestros scripts ordenados e identificados, podemos combinar los distintos módulos que hayamos necesitado desarrollar en uno solo (uno para CSS y otro para JS), y reduciremos (por ejemplo de 15) a únicamente dos las llamadas HTTP que hagamos al servidor en este tipo de archivos.

Utilizar métodos de carga perezosa (Lazy Loading) para nuestras imágenes (e incluso scripts). Utilizándo esta técnica las peticiones HTTP iniciales se reducen drásticamente, ya que las imágenes son servidas conforme se van mostrando en el DOM, y no en la carga inicial de la web. Tengamos en cuenta que las imágenes son los elementos que más peso y tiempo de carga suponen en la web, si no las servimos de entrada, nuestro tiempo de carga inicial se reducirá drásticamente.

Conclusiones

Son muchas las tareas para mejorar el comportamiento y la velocidad de carga de una web y, aunque parezcan sencillas, si no se tienen en cuenta durante todo el desarrollo del proyecto arreglarlas después puede resultar muy engorroso.

Por eso mi recomendación es tener en cuenta el WPO durante el desarrollo del proyecto y no dejarlo para el final del mismo. Hace poco tuve una mala experiencia con eso (de ahí la existencia de este artículo esperando que os ayude a vosotros).

Y vosotros, ¿Qué pensáis? ¿Sabéis de algún otro método que mejore los tiempos de carga de la web a nivel de optimización de cliente? No dudéis en dejarlo en los comentarios.