Cómo optimizar el rendimiento de tu web: Paralelización de carga

Benditas vacaciones, que me han dado tiempo para sentarme y optimizar el rendimiento de esta página, e incluso me permiten recuperar la vieja costumbre de traer algún que otro tutorial que seguramente ayude a más de uno en su quehacer diario.

Durante estos días he disfrutado de tiempo suficiente para llevar a cabo varias estrategias de SEO, con el fin de optimizar un elemento que requiere por lo general de una disponibilidad relativamente alta (los cambios no se suelen ver hasta pasadas 24/48 horas, y después de ello te exige asegurarte de que todo siga en su sitio), y que por ello suele acabar siempre en la lista de tareas pendientes. Hablamos de la optimización del rendimiento de una web.

En mi caso, y utilizando la herramienta pingdom (EN), he conseguido un índice de 86/100 (87/100 si el test lo hago pasar desde Europa), un 73% más rápido que la mayoría de las webs testeadas en el servicio, y en todo caso, por encima de todas las webs que he probado de analistas tecnológicos españoles reputados y portales de actualidad tecnológica que forman parte de las redes de blogs de habla hispana que todos leemos a diario.

También es importante señalar que a diferencia de la mayoría de «competencia», el servidor donde está alojada esta web tiene una capacidad básica (en torno a 1,2GB de RAM máximos y compartidos con otros proyectos), situación que sin duda está mermando la efectividad final de la optimización (y que si las cosas salen como espero, posiblemente de aquí a un par de meses acabe por solucionarlo).

Optimizar el rendimiento de tu web es un trabajo que nunca va a acabar, pero con este tutorial en tres entregas (previsiblemente publicadas una por semana), bajo el hashtag #OptimizarWeb, ofreceré una guía para aplicar tres principios que como mínimo deberían repercutir en un aumento visible del rendimiento de una página, lo que ayuda a reducir la tasa de rebote y a que los buscadores y los usuarios nos miren con mejores ojos.

En esta primera entrega, hablaremos de cómo implementar una paralelización de carga de contenido, el primer paso para desmarcarte del resto de webs poco o nada optimizadas, y que para colmo suele quedar olvidado como materia pendiente en la mayoría de proyectos.

Paralelización de carga de contenido ¿Por qué?

Todos los navegadores tienen implementado una limitación de peticiones por dominio (archivos CSS, JS, imágenes, vídeos,…), de tal manera que si por ejemplo el navegador usado puede paralelizar 6 peticiones de cada vez, descargará el contenido (cada archivo) de 6 en 6, manteniendo el resto en espera, lo que en la práctica aumenta considerablemente el tiempo de carga.

De todas las posibles peticiones, sin duda los vídeos y las imágenes son los elementos que más pesan de una web, por lo que interesa que éstos por encima del resto, se distribuyan en diferentes paquetes.

Paralelización de carga de contenido ¿Cómo aplicarlo?

Para implementar una estrategia de paralelización de carga de contenido, nos aprovecharemos de la facilidad con la que actualmente podemos crear diferentes subdominios. Por ello, lo primero es definir el número de subdominios que vamos a usar y su cometido.

Una idea equivocada es pensar que para realizar una estrategia de Domain Sharding, que es como se denomina esta técnica, lo mejor sería que definiéramos mientras más subdominios mejor, con el fin de que cada paquete estuviera formado por un solo archivo, y por tanto, todos cargaran a la vez en paralelo. Pero hay que considerar que el rendimiento que ganamos con esta medida podemos perderlo si el tiempo de carga de todos los DNS es superior, y puesto que cada subdominio obliga a que el cliente conecte con sus DNS, se calcula que para una web normal con una tecnología de backoffice habitual, un número de subdominios entre 3 y 5 está bien.

Como en la mayoría de páginas el uso del vídeo viene dado por enlaces embebidos (Youtube, Vimeo,…), podemos obviar este tipo de contenido y optimizar las imágenes, que sí son elementos que utilizamos habitualmente.

Para ello, iremos al CPanel del registrador de dominios que tengamos contratado, y seleccionando el dominio oportuno, crearemos varios subdominios, acordándose de que apunten a la página principal (no es estrictamente necesario, pero así evitamos posibles ataques a diferentes carpetas de nuestro servidor).

En mi caso, y como se puede observar, he definido 3 subdominios llamados img1, img2 e img3, pero el nombre puede ser cualquiera.

Hecho esto, nos tocará esperar a que se actualicen los DNS mundiales. Una acción que puede llevar desde unos minutos hasta 48 horas. Normalmente, con dejarlo para el día siguiente suele ser suficiente.

El segundo paso es aplicar estos dominios en todo aquel contenido que queramos que cargue de esta manera. Para ello, podemos optar por editar cada archivo por separado (cambiando la extensión www por img1, img2 o img3, según queramos), o utilizando un sistema que lo automatice.

En el caso de que estemos ante una página dinámica que carga el contenido a partir de una base de datos, se podría definir una acción que modificase las direcciones al contenido aleatoriamente entre los subdominios creados.

Como la mayoría de nosotros utilizamos CMS tales como Wordpress, podemos hacerlo fácilmente instalando el plugin de Domain Sharding (EN) (o el respectivo al gestor de contenido con el que trabajemos), cuya configuración será si no igual bastante parecida a la siguiente.

Como se ve en la imagen, definimos el patrón que utilizará el plugin para autoasignar, en tiempo de carga, un subdominio distinto entre los elegibles, así como el número de subdominios a utilizar. El checkbox de abajo lo que hace es redirigir las peticiones de contenido desde otro host a la página principal para evitar que algún listillo esté utilizando tu ancho de banda para cargar contenido multimedia (algo que lamentablemente es usado mucho por blogs que copian contenido de otros portales).

Una vez terminado el paso dos, nos quedará asegurarnos que en el cambio no nos hemos cargado ninguna parte de la página. Para ello, borraremos caché del navegador (para evitar que el navegador cargue automáticamente imágenes que quizás están ahora mal enlazadas) y visitaremos las diferentes tipologías de página de la web.

Sobre todo, echar un vistazo a posibles enlaces a imágenes que tengáis definidas de forma relativa (es decir, en vez de con el clásico http://www.dominio.tld/url-img/, con un sencillo /url-img/). Si tenéis alguna de esta manera, lo más seguro es que no se esté mostrando, por lo que te tocará modificarla para que apunte a la URL absoluta.

Con estos tres sencillos pasos, ya tendremos definida una estrategia de domain sharding, y quedará por implementar las próximas dos técnicas.

La siguiente, cacheado de páginas dinámicas.

Enlaces al resto de tutoriales #OptimizarWeb (actualizados conforme se vayan publicando):

• Paralelización de contenido.
• Cacheado de páginas.
• Implantación de un CDN.

Si os ha gustado el tutorial, agradecería que me dejarais un comentario y lo compartierais por redes sociales, con el fin de que pueda ayudar a más personas. Muchas gracias.

Edit a día 9 de Diciembre del 2015: Con la llegada de HTTP/2 esta optimización no es necesaria, puesto que HTTP/2 se encarga él solito de paralelizar la descarga de contenido. Pero para poder utilizar HTTP/2, nuestro servidor debe ser compatible, y tenemos que tener además una dominio con SSL configurado.

Imagen de LondonDeposit, Parallel pipes outside (EN) cedida por Depositphotos.com.