Cómo agilizar la carga de tu sitio distribuyendo archivos estáticos
Es bien sabido que si un sitio tiene muchas imágenes tardará en cargar. Y más cuando las imágenes son más o menos pesadas.
Para agilizar la carga de tu sitio existen muchas prácticas y soluciones que van desde hacer cache hasta distribuir tu contenido en una CDN (Content Delivery Network).
Pero no necesitamos un CDN para poder aprovechar las ventajas de la "distribución" de archivos, y entrecomillo distribución porque en esta ocasión no me refiero a distribuir por diferentes partes del mundo, sino a distribuir entre diferentes dominios.
En esta receta veremos cómo distribuir nuestros assets (archivos estáticos, como javascripts, hojas de estilo, imágenes) entre diferentes subdominios.
¿Pero esto para qué? Pues resulta que muchos navegadores limitan el número de conexiones simultáneas que hacen a un servidor, no importando si el servidor es capaz de manejar muchas más conexiones a la vez. Por ejemplo, Internet Explorer limita estas conexiones a dos, es decir que no puede descargar más de dos archivos a la vez de un mismo servidor.
Entonces, si en vez de tener un solo servidor de assets, tenemos 4 (que es el máximo que podemos usar en rails), nuestra página cargará 8 conexiones al mismo tiempo en vez de solo 2, y así evitamos que tarde demasiado.
En rails existen los helpers de image_tag, javascript_include_tag y stylesheet_link_tag que precisamente nos ayudan a esto. Por default rails va a utilizar un solo servidor para nuestros assets y es el mismo servidor de donde se carga la aplicación, pero si vamos a config/environments/production.rb y descomentamos la línea config.action_controller.asset_host = "http://assets.tudominio.com" podemos especificar un dominio diferente para cargar los assets; y no sólo eso, sino que podemos ponerle un valor como http://assets%d.tudominio.com para que rails cicle los archivos entre los subdominios del 0 al 3.
Es decir que el primer archivo lo cargará de assets0.tudominio.com, el segundo de assets1.tudominio.com, y asi sucesivamente hasta assets3.
Y entonces, ¿qué podemos utilizar como servidor de assets? No sería bueno sobrecargar nuestro servidor de la aplicación para que también sirva los archivos estáticos, para eso hay servicios como AWS S3 que son realmente económicos.
No voy a entrar en detalle de cómo configurar AWS S3, las instrucciones breves son:
- Crea un bucket por cada subdominio de assets que desees, ten en cuenta que el nombre del bucket tiene que ser exactamente la url del subdominio, es decir que para el subdominio
assets0.tudominio.comdebe existir un bucket llamadoassets0.tudominio.com - Agrega registros CNAME por cada subdominio apuntando a
s3.amazonaws.com.
La razón por la que los buckets se tienen que llamar exactamente igual que tu subdominio es porque todos los CNAME apuntan a un solo dominio, y Amazon determina el bucket correcto por el nombre del subdominio.
Ahora sólo descomenta la línea en tu environment de producción como lo hicimos arriba y asegúrate de agregar el comodín %d en la url.
Listo, ahora sólo sube todos tus archivos javascript, css e imágenes a tus cuatro buckets. Como esto sería mucho trabajo hacerlo a mano, y volverlo a hacer cada vez que editas algún archivo, puedes usar este script que sirve para subir un archivo a múltiples buckets a la vez.
